peyman_666
Member
منظور از قالب سازی برای صفحات چيست؟ ( مقايسه با روش های ديگر... )
قالب سازی بدين معنی است که با ايجاد يکسری نقاط مشترک برای تمامی صفحات بصورت جداگانه و قرار دادن نوعی ارجاع از آن نقاط در تمامی صفحات وب، يک نوع مديريت جامع را به ساختار وب سايت تحميل کنيم. تعريف ذکر شده کمی گنگ و پيچيده به نظر می آيد. بنابراين با ذکر مثالی سعی در باز کردن مساله فوق می نمايم.
فرض کنيد که قرار است سايتی را با بيش از ده صفحه ايجاد نماييد. مسلما برای ايجاد اين سايت طرحی را درنظر می گيريد. بطور مثال اينچنين فرض می کنيد که آرم و نام سايت را در قسمت بالا قرار ميدهيد، منوهای اصلی سايت را در سمت راست، در پايين موارد مربوط به کپی رايت، در چپ تبليغات سايت و نهايتا فضای باقيمانده را به قسمت اصلی سايت (که از اين پس آنرا Main Part می ناميم) يعنی مکانی برای نمايش اطلاعات و عملکرد سايت خود اختصاص می دهيد. مسلما تمامی قسمت های ذکر شده در تمامی صفحات ثابت هستند (يا تقريبا ثابت هستند) و فقط فضای باقيمانده (Main Part) که معمولا بيشترين فضای صفحه را به خود اختصاص می دهد پويا می باشد، که در اين مکان با توجه به درخواست و عملکرد کاربر اطلاعاتی نمايش داده می شود. حالت معمول طراحی بدين گونه هست که يکبار شمای ذکر شده طراحی و سپس در تمامی صفحات قرار می گيرد. پس از آن در هر صفحه با توجه به نياز آن، مواردی به Main Part آن اضافه می شود (مواردی چون datagrid،buttons،forms، انواع کنترلهای وب، متن های مورد نياز صفحه و...).
حال فرض کنيد که قرار شود يک منوی جديد به ليست منوها اضافه گردد. بنابراين مجبور هستيم که اين منو جديد را در تمامی ده صفحه فوق اضافه کنيم. شايد در نگاه اول اين مساله مهمی نباشد ولی اگر صفحات فوق به صد صفحه و يا بيشتر افزايش يابد، ديگر اين مساله کوچک نيست.
استفاده از فريم(Frame)ها به عنوان اولين راه حل
شايد خيلی ها به فريم های موجود در HTML متوسل شوند، که اين به نوبه خود اگرچه مفيد هست ولی سختی ها و کاستی های خود را دارد. در استفاده از فريم ها نياز به دانش HTML، آشنايی با مدل شی سند (DOM) و همچنين تا حدودی نياز به JavaScript می باشد. در ضمن در حالت های پيشرفته تر نياز بيشتری به موارد فوق است و اين در حالی است که يک ساختار اجباری را به سايت نيز تحميل می کند. بطور مثال اسکرولهای هر فريم جداگانه می باشد و اغلب در بسياری از حالتها نحوه نمايش صفحه را از يک حالت پيوسته به صورتی گسسته درمی آورد. به عنوان نمونه در نظر بگيريد منوهای سمت راست صفحه در يک فريم راست و صفحه اصلی(Main Part) در فريم سمت چپ تعريف شود. حال در صورتی که منوها و متن صفحه اصلی از اندازه صفحه خارج شوند، نياز به اسکرول پيدا می کنند و در نتيجه در صفحه دو اسکرول يافت می شود که اين ساختار معمولا کاربر پسند نيست. همچنين در Address bar مربوط به اکسپلورر فقط آدرس فريم دربرگيرنده ظاهر می شود، که در صورت فشرده شدن دکمه refresh اکسپلورر، دوباره به صفحه اول باز می گردد که اين به نوبه خود يک فاجعه در navigating می باشد!
پس راه حل چيست؟
خوب مسلما اولين راه حلی که از ديد آشنايان با ASP.NET بنظر می رسد، استفاده از کنترلهای کاربر يا همان User controls می باشد. مسلما اين يک راه حل بسيار خوب و جامع است ولی معايبی دارد که آنرا نيز می توان با اعمال روشهايی خاص برطرف ساخت. از آنجايی که راه حل اصلی مورد نظر در اين مقاله بر پايه همين مدل است، ابتدا به بررسی اين روش پرداخته و سپس آنرا کامل می کنيم. بنابراين برای درک مرحله بعد نياز است که اين مرحله بخوبی درک شده باشد. در ضمن در کدهای زير از روش code behind استفاده شده است تا مطلب واضح تر باشد.
قالب سازی به کمک User Control ها
نحوه عمل
در اين روش بدين صورت عمل می شود که قسمتهای يکسان موجود در تمام صفحات در قالب user controlها تعريف می شوند و سپس اين کنترلها در تمامی صفحات قرار داده می شوند. برای بررسی اين روش به يک مثال نياز داريم. در اين مثال بدين گونه فرض می شود که صفحه وب ما شامل سه قسمت می باشد:
(1) مکان لوگو
(2) منوها (3) قسمت اصلی (Main Part)
و با انتخاب هر منو متن قسمت 3 يا همان Main Part تغيير می کند.
طراحی بدين صورت شکل می گيرد که به جز قسمت 3 که هميشه غير ثابت و متغير هست، قسمت های 1 و 2 بصورت User Control (که از اينجا به بعد به منظور خلاصه سازی با نام اختصاری UC نامبرده می شود) تعريف و استفاده می شوند. اين قسمت ها را پنل(Panel) نيز می گويند. پنل 1 را به صورت زير تعريف می کنيم: (فايل با نام Panel_logo.ascx)
---Panel_logo.ascx file---
<%@ Control Language="vb" AutoEventWireup="false" Inherits="site.Panel_logo" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
اين تعريف کنترل panel_logo می باشد. در ضمن در اين قسمت از هيچگونه برنامه نويسی استفاده نشده است.
نکته مهم: بايد توجه کنيد که به هيچ وجه درUCها از فرمهای با ويژگی runat=server استفاده نشود. اگرچه اين کار مجاز است ولی عملا کاربرد کنترل شما را بسيار محدود می کند. توجه کنيد، کنترلهايی که بدين صورت ايجاد می گردند در هنگام ترجمه کدهای HTML آن بصورت مستقيم در مکان فراخوانی کنترل قرار خواهند گرفت.
حال کنترل دوم را ايجاد می کنيم. اين کنترل را بصورتی ايجاد می کنيم که با انتخاب هر منو، پس از رفتن به صفحه مربوطه، منوی مربوط به آن صفحه غير فعال شود:
---Panel_right.ascx file---
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="Panel_right.ascx.vb" Inherits="site.Panel_right" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
<table >
<tr>
<td id="td1" runat="server"><A href="index.aspx"> Home Page </A></td>
<td id="td2" runat="server"><A href="search.aspx"> Searching </A></td>
<td id="td3" runat="server"><A href="AboutUs.aspx"> About Us </A></td>
</tr>
</table>
همانطور که ديده می شود در اين پنل سه لينک به سه صفحه متفاوت موجود است. همچنين اين سه لينک هر کدام در يک تگ <td> با ويژگی runat=server قرار داده شده اند، تا بتوان از آنها در Codebehind مربوطه استفاده نمود. توجه کنيد که قرار است با رفتن به هر صفحه، به اين کنترل بفهمانيم که در کدام صفحه است و کدام لينک را بايد غيرفعال کند. پس نياز است که يک property برای اين کنترل معرفی شود که اين کار را برای ما انجام دهد. بنابراين در Codebehind مربوط به پنل راست داريم:
---Panel_right.ascx.vb file---
Protected WithEvents td1 As System.Web.UI.HtmlControls.HtmlTableCell
Protected WithEvents td2 As System.Web.UI.HtmlControls.HtmlTableCell
Protected WithEvents td3 As System.Web.UI.HtmlControls.HtmlTableCell
که باعث معرفی td1,td2,td3 در کد می شود. سپس property مربوطه به صورت زير تعريف می شود:
Public WriteOnly Property current_page() As Integer
Set(ByVal Value as Integer)
Select Case Value
Case 1
td1.InnerHtml = "Home Page"
Case 2
td2.InnerHtml = "Searching"
Case 3
td3.InnerHtml = "About Us"
End Select
End Set
End Property
بدين ترتيب مثلا اگر خصيصه current_page به مقدار 2 تنظيم شود، به جای لينک searching، فقط متن آن قرار خواهد گرفت که نشانگر غيرفعال بودن آن لينک و يا به عبارتی نشانه قرار داشتن در صفحه searching می باشد.
هم اکنون جزئيات قالب ما معين است و فقط کافی است که شکل صفحه قالب را معين کنيم. صفحه قالب را با نام template.aspx ايجاد و از آن استفاده می نماييم:
---template.aspx---
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="template.aspx.vb" Inherits="site.template"%>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysite
anel_logo id="panel_logo1" runat="server"></mysiteanel_logo>
</td>
</tr>
<td>متن و کنترلهايی که مخصوص هر صفحه هست و جداگانه تعريف می شوند در اينجا قرار] [می گيرند(Main Part)
</td>
<td>
<mysiteanel_right id="panel_right1" runat="server"></mysiteanel_right>
</td>
<tr>
</tr>
</table>
</body>
</HTML>
بدين ترتيب قالب ما ساخته می شود و برای ايجاد هر صفحه جديد کافی است کدهای فوق (البته به غير از directive مربوط به page که بايد مخصوص همان صفحه باشد) را در آنجا قرار داد. نمونه ساده ای از استفاده اين قالب به صورت زير است: (بطور مثال برای صفحه aboutus.aspx)
---aboutus.aspx---
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="aboutus.aspx.vb" Inherits="site.aboutus"%>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysiteanel_logo id="panel_logo1" runat="server"></mysiteanel_logo>
</td>
</tr>
<td> درباره ما... سابقه کاری شرکت ما به صورت زير می باشد: 1-...2-...
</td>
<td>
<mysiteanel_right id="panel_right1" current_page="3"
runat="server"></mysiteanel_right>
</td>
<tr>
</tr>
</table>
</body>
</HTML>
همانطور که در اين کد ملاحظه می شود، directive مربوط به Page تغيير کرده است، متن قسمت "صفحه اصلی" (Main Part) نيز با متن مورد نياز در اين صفحه تنظيم شده و نهايتا ويژگی current_page، از کنترل panel_right، با مقدار 3 تنظيم شده که باعث می شود لينک سوم در هنگام بازديد از اين صفحه غيرفعال گردد. توجه کنيد که تغييرات فوق فقط مختص اين صفحه است و به هيچکدام از صفحات ديگر در ارتباط نيست. بنابراين اصل قالب بندی به هيچ وجه زير سوال نمی رود. حال برای درک بيشتر اين قضيه فرض کنيد که ۲۰۰ صفحه با قالب فوق ايجاد کرديد و حال تصميم می گيريد که در پنل مربوط به لوگو مکانی را برای قرار دادن يک عکس تبليغاتی اختصاص دهيد. فقط کافی است که بدرون کنترل panel_logo يک خط بصورت زير اضافه شود:
همين!... با تغيير فوق اين تغيير را تمامی صفحات مشاهده خواهيد کرد و ديگر لازم نيست که اين خط را به تمامی صفحات اضافه و از درست عمل کردن آن مطمئن شويد. و يا اينکه تصميم می گيريد يک منوی جديد به ليست منوها اضافه کنيد. همانند مورد فوق خط مشابهی را در صفحه panel_right.ascx اضافه کرده و يک case ديگر نيز به دستور select در code behind مربوطه اضافه می کنيد و ديگر تمام! حتی لازم نيست current_page مربوط به صفحات ديگر را تغيير دهيد. همچنين شما می توانيد به کنترلهای خود ويژگی visible را هم اضافه نماييد تا در صفحات مورد نياز از نمايش بعضی پنل ها (مانند پنل تبليغات) جلوگيری به عمل آوريد. چيزی که اجرای آن با فريم ها بسيار مشکل و دردسر ساز می باشد. همانطور که ديده می شود، اصول شئ گرايی تماما در اين روش رعايت شده است.
در اين روش شما می توانيد با استفاده از caching کنترلها، سرعت و کارايی برنامه را تا حد قابل توجهی بالا ببريد.
همچنين در موارد پيشرفته تر و تعداد صفحات بالا مشاهده خواهيد کرد که:
• از حجم برنامه شما بسيار کاسته می شود.
• خوانايی کدهای HTML شما افزايش می يابد و درنتيجه ايراد زدايی از کدهای HTML نيز بسيار آسانتر خواهد شد.
• سرعت کار و تمرکز شما نيز بطور قابل توجهی افزايش می يابد.
روش ذکر شده بسيار خوب و کامل است. ولی اين روش ايراداتی دارد که پس از اشاره به آنها، به نحوه رفع آن با روش دوم خواهيم پرداخت:
فرض کنيد پس از مدتی تصميم می گيريم که ظاهر سايت را تغيير دهيم. مثلا يک پنل تبليغات به سمت چپ اضافه کنيم. اگر دقت کنيد، با مشکلی همانند اولين مشکل ذکر شده در مقاله برخورد خواهيم کرد. در اينجا ديگر پنلی به اين نام در صفحات ما وجود ندارد و ما مجبور خواهيم بود که اين پنل را ايجاد و در تمامی صفحات قرار دهيم. و اين در حالی است که ساختار HTML موجود در صفحات بهم نخورد. اغلب ساختار HTML صفحات بسيار پيچيده تر از مثال فوق است و بنابراين نياز است که در کدهای HTML تمامی صفحات نيز بازنگری شود و اين نيز بر مشکل اول افزوده می شود. مشکل اساسی آنجا آغاز می شود که قصد کنيم ظاهر سايت را کاملا تغيير داده و کل قالب را عوض کنيم. اگر چه شايد اين مشکل مانند مشکلات مدل ايجاد صفحات بدون قالب نباشد، ولی حداقل نياز است که اين تغييرات برای تمامی صفحات موجود اجرا شود و قالب جديدی نيز ساخته شود. پس از آن است که ديگر نياز به تغييرات نيست، ولی اگر دوباره نياز به اينچنين تغييری پيدا شد چه؟... مسلما اين راه حل کاملا پاسخگو نيست.
در راه حل زير مشکل فوق بررسی و برطرف می شود:
قالب سازی پويا بوسيله سگمنت کردن قالب اوليه
اگر در روش قبلی دقت کرده باشيد، مشکل از وجود کدهای HTML موجود درقالب بود و اگرچه در تمامی صفحات ثابت بودند ولی با اندکی تغيير در ساختار صفحه نياز به تغيير آن و در نتيجه تغيير قالب و نهايتا قالب گيری مجدد صفحات ساخته شده است. اگر بتوان بصورتی عمل کرد که قالب اصلی ما هميشه شکل ثابتی داشته باشد و بهيچ وجه تغيير نکند، مشکل برطرف می شد. به عبارتی با قالب سازی برای قالب اوليه و يا به عبارتی پويا سازی قالب، ديگر و در هيچ شرايطی نياز به تغيير قالب مورد استفاده صفحات را نداشتيم و با تغيير شکل قالب، خودبخود در تمامی صفحات نيز تغييرات صورت می گرفت. قبل از بررسی روش مورد نظر توجه شما را به نکته ای جلب می کنم:
همانطور که احتمالا همه شما تا کنون متوجه شده ايد، هر سايت مجموعه ای از پنل های فرعی و تقريبا ثابت، و يک قسمت اصلی (Main Part) که حاوی مطالب صفحه مورد نظر است می باشد. برای درک بيشتر اين موضوع همين الان به چند سايت مختلف نگاه کنيد...، بطور مثال همين سايت IranASP.NET شامل دو پنل چپ و راست و يک پنل بالا و پايين است. قسمت وسط آن نيز، قسمت اصلی صفحه (Main Part) را تشکيل می دهد. در سايت ياهو نيز در صفحه مربوط به ميل آن يک پنل در چپ، يک پنل در بالا و يک پنل تبليغات در بالاترين نقطه وجود دارد. در قسمت راست صفحه هم اصلی ترين قسمت(Main Part) وجود دارد. می توان گفت که اين قسمت يا همان Main Part بيشترين فضای صفحه را در تمامی سايتها اشغال می کند.
پس هم اکنون به اين امر واقف هستيد که "قسمت اصلی" جزو لاينفک هر سايت هست و کليه تغييرات در سايت حول اين قسمت می باشد.
برای توضيح اين روش از مثال ذکر شده در روش قبل استفاده می کنيم و آنرا تکميل می نماييم. اکنون همانند مثال ذکر شده در روش قبل يک قالب ايجاد کنيد. مکانی که بايد کدهای قسمت اصلی در آنجا قرار بگيرند را در نظر بگيريد. از همين مکان کدها را به دو قسمت بالايی و پايينی تفکيک کنيد. يعنی کدهای HTML ای که بالای قسمت Main Part قرار دارند به صورت زير خواهد بود:
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
Inherits="site.template"%>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysiteanel_logo id="panel_logo1" runat="server"></mysiteanel_logo>
</td>
</tr>
<td>
و بلافاصله پس از خط آخر کدهای قسمت اصلی قرار دارند:
[Codes that are for main part of the page, must put here.]
و بلافاصله پس از اين کدها، کدهای HTML مربوط به ادامه قالب قرار دارند:
</td>
<td>
<mysiteanel_right id="panel_right1" runat="server"></mysiteanel_right>
</td>
<tr>
</tr>
</table>
</body>
</HTML>
هم اکنون اين دو قسمت بالايی و پايينی را در دو کنترل جداگانه تعريف می کنيم. اولين کنترل را سگمنت بالايی می ناميم: (segment_top.ascx)
---segment_top.ascx---
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="segment_top.ascx.vb" Inherits="site.segment_top" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysiteanel_logo id="panel_logo1" runat="server"></mysiteanel_logo>
</td>
</tr>
<td>
از آنجايی که کد HTML فوق شامل پنل راست نيست، directive مربوطه را نيز از آن حذف می کنيم. همچنين اين قمست دارای code behind خاصی نيست و از آن صرف نظر می کنيم.
کنترل دوم را سگمنت پايينی می ناميم و شامل کدهای قسمت پايينی قالب است (segment_down.ascx):
---segment_down.ascx---
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="segment_down.ascx.vb" Inherits="site.segment_down" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
</td>
<td>
<mysiteanel_right id="panel_right1" runat="server"></mysiteanel_right>
</td>
<tr>
</tr>
</table>
</body>
</HTML>
همانطور که ديده می شود، directive حذف شده در اين سگمنت آورده شده است.همچنين کدهای HTML نيز در هيچکدام از دو کنترل فوق بصورت کامل نمی باشند ( به عبارتی well formed نيست) و در واقع بصورت تنها، اشتباه و بدون کاربرد می باشد. بنابراين توجه داشته باشيد که اين دو سگمنت با هم بکار برده می شوند. همچنين VS.NET در بعضی شرايط خود اقدام به تکميل اين کدها می کند که در صورت مشاهده اين عمل، خود اقدام به حذف کدهای اضافی نماييد.
انجام يک کار در هنگام ايجاد سگمنت ها مورد اجباری است و آن اينکه از آنجا که پس از استفاده از صفحه قالب ايجاد شده، امکان دسترسی به خصوصيات کنترلهای موجود در اين سگمنت ها نيست، بايد اين خصوصيات را به اين سگمنت ها انتقال داد. بطور مثال در پنل راست خصيصه ای بود که با آن صفحه جاری را معين می کرديم. حال اين خصيصه را به صورت زير به عنوان يک خصيصه در سگمنت پايينی (چون اين کنترل در اين سگمنت قرار دارد) تعريف می کنيم. ابتدا بايد کنترل panel_right را بصورت زير در درون codebehind تعريف کنيم، زيرا بصورت خودکار اين تعريف ايجاد نمی شود.
---segment_down.ascx.vb---
Protected WithEvents Panel_right1 As Panel_right
سپس اين خصيصه را به کنترل سگمنت پايين اضافه می کنيم:
WriteOnly Property current_page() As Integer
Set(ByVal Value As Integer)
Panel_right1.current_page = Value
End Set
End Property
بدين ترتيب اين خصيصه را به کنترل پايينی اضافه کرده ايم. حال صفحه قالب ما در تمامی حالات فقط از شکل زير برخوردار است:
---template.aspx---
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="template.aspx.vb" %>
<%@ Register TagPrefix="mysite" TagName="segment_down" Src="segment_down.ascx" %>
<%@ Register TagPrefix="mysite" TagName="segment_top" Src="segment_top.ascx" %>
<mysite:segment_top id="Segment_top1" runat="server"></ mysite:segment_top>
<mysite:segment_down id="Segment_down1" runat="server"></ mysite:segment_down>
فقط اينکه در صفحات مورد استفاده از قالب ها، page directive بايد مربوط به خود آن صفحه باشد.
حال به عنوان نمونه صفحه aboutus.aspx را با اين قالب جديد پياده سازی می کنيم:
---aboutus.aspx---
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="aboutus.aspx.vb" %>
<%@ Register TagPrefix="mysite" TagName="segment_down" Src="segment_down.ascx" %>
<%@ Register TagPrefix="mysite" TagName="segment_top" Src="segment_top.ascx" %>
< mysite:segment_top id="Segment_top1" runat="server"></ mysite:segment_top>
درباره ما... سابقه کاری شرکت ما به صورت زير می باشد: 1-...2-...
< mysite:segment_down id="Segment_down1" runat="server" current_page=" 3" ></ mysite:segment_down>
همانطور که ملاحظه می شود، متن قسمت اصلی در ميان دو سگمنت قرار می گيرد. همچنين مقدار خصيصه current_page نيز در سگمت پايينی معين شده است.
حال فرض کنيد می خواهيم يک پنل تبليغات در سمت چپ قرار دهيم. فقط کافی است در سگمنت بالايی کدهای زير را در انتهای آن اضافه کنيم: (فرض کنيد کنترل تبليغات به اسم panel_adv.ascx طراحی شده است)
<%@ Register TagPrefix="Mysite" TagName="Panel_adv" Src="Panel_adv.ascx" %>
<mysiteanel_adv id="panel_adv1" runat="server"></myiteanel_adv>
و فقط همين! ديگر نيازی به تغيير در هيچکدام از فايلها نيست و صفحه "درباره ما" با شکلی جديد به نمايش خواهد آمد. در اين شرايط اگر ظاهر سايت نيز به کلی تغيير کند طوری که تمام کدهايHTML عوض گردند، حداکثر تغيير در کنترل های سگمنت بالايی و پايينی است. يعنی حداکثر کدهای HTML اين دو تغيير خواهند کرد و تمامی صفحات از قالب جديد پيروی خواهند کرد.
در دو طراحی آخر فقط به اين مورد می توان اشاره کرد که در صورت استفاده از قالب بندی به يکی از اين دو روش، در هر صورت تمامی فايلهای سايت شما بايد تبديل به aspx شوند. شايد اين از نظر برخی ناخوشايند باشد. بطور مثال تمامی صفحات با محتوای ثابت که می توانند به صورت HTML نيز باشند، بايد به صورت aspx درآيند و ازآنجا که هيچ برنامه نويسی سمت سرور در اين فايلها نيست، در واقع کار بی موردی انجام داده ايم و به سرور بار اضافی تحميل کرده ايم. خوب اين بستگی به طراح سايت دارد که کدام مدل برای وی بيشتر به صرفه باشد. چيزی که اينجا مشخص است، برای سايت های با حجم و ترافيک محدود شايد چند صفحه ثابت ارائه شده بصورت aspx آنچنان بر عملکرد سايت موثر نباشد. در ضمن قابل ذکر است که اين يک مدل و شيوه است و اجباری بر اجرای آن بر روی تمامی صفحات نيست.
در آخر به عنوان نمونه ای از کارهای انجام شده با اين روش می توان به سايت http://www.hudhud-dubai.com/ و http://www.irantbc.com/ (بزودی) اشاره کرد.
قالب سازی بدين معنی است که با ايجاد يکسری نقاط مشترک برای تمامی صفحات بصورت جداگانه و قرار دادن نوعی ارجاع از آن نقاط در تمامی صفحات وب، يک نوع مديريت جامع را به ساختار وب سايت تحميل کنيم. تعريف ذکر شده کمی گنگ و پيچيده به نظر می آيد. بنابراين با ذکر مثالی سعی در باز کردن مساله فوق می نمايم.
فرض کنيد که قرار است سايتی را با بيش از ده صفحه ايجاد نماييد. مسلما برای ايجاد اين سايت طرحی را درنظر می گيريد. بطور مثال اينچنين فرض می کنيد که آرم و نام سايت را در قسمت بالا قرار ميدهيد، منوهای اصلی سايت را در سمت راست، در پايين موارد مربوط به کپی رايت، در چپ تبليغات سايت و نهايتا فضای باقيمانده را به قسمت اصلی سايت (که از اين پس آنرا Main Part می ناميم) يعنی مکانی برای نمايش اطلاعات و عملکرد سايت خود اختصاص می دهيد. مسلما تمامی قسمت های ذکر شده در تمامی صفحات ثابت هستند (يا تقريبا ثابت هستند) و فقط فضای باقيمانده (Main Part) که معمولا بيشترين فضای صفحه را به خود اختصاص می دهد پويا می باشد، که در اين مکان با توجه به درخواست و عملکرد کاربر اطلاعاتی نمايش داده می شود. حالت معمول طراحی بدين گونه هست که يکبار شمای ذکر شده طراحی و سپس در تمامی صفحات قرار می گيرد. پس از آن در هر صفحه با توجه به نياز آن، مواردی به Main Part آن اضافه می شود (مواردی چون datagrid،buttons،forms، انواع کنترلهای وب، متن های مورد نياز صفحه و...).
حال فرض کنيد که قرار شود يک منوی جديد به ليست منوها اضافه گردد. بنابراين مجبور هستيم که اين منو جديد را در تمامی ده صفحه فوق اضافه کنيم. شايد در نگاه اول اين مساله مهمی نباشد ولی اگر صفحات فوق به صد صفحه و يا بيشتر افزايش يابد، ديگر اين مساله کوچک نيست.
استفاده از فريم(Frame)ها به عنوان اولين راه حل
شايد خيلی ها به فريم های موجود در HTML متوسل شوند، که اين به نوبه خود اگرچه مفيد هست ولی سختی ها و کاستی های خود را دارد. در استفاده از فريم ها نياز به دانش HTML، آشنايی با مدل شی سند (DOM) و همچنين تا حدودی نياز به JavaScript می باشد. در ضمن در حالت های پيشرفته تر نياز بيشتری به موارد فوق است و اين در حالی است که يک ساختار اجباری را به سايت نيز تحميل می کند. بطور مثال اسکرولهای هر فريم جداگانه می باشد و اغلب در بسياری از حالتها نحوه نمايش صفحه را از يک حالت پيوسته به صورتی گسسته درمی آورد. به عنوان نمونه در نظر بگيريد منوهای سمت راست صفحه در يک فريم راست و صفحه اصلی(Main Part) در فريم سمت چپ تعريف شود. حال در صورتی که منوها و متن صفحه اصلی از اندازه صفحه خارج شوند، نياز به اسکرول پيدا می کنند و در نتيجه در صفحه دو اسکرول يافت می شود که اين ساختار معمولا کاربر پسند نيست. همچنين در Address bar مربوط به اکسپلورر فقط آدرس فريم دربرگيرنده ظاهر می شود، که در صورت فشرده شدن دکمه refresh اکسپلورر، دوباره به صفحه اول باز می گردد که اين به نوبه خود يک فاجعه در navigating می باشد!
پس راه حل چيست؟
خوب مسلما اولين راه حلی که از ديد آشنايان با ASP.NET بنظر می رسد، استفاده از کنترلهای کاربر يا همان User controls می باشد. مسلما اين يک راه حل بسيار خوب و جامع است ولی معايبی دارد که آنرا نيز می توان با اعمال روشهايی خاص برطرف ساخت. از آنجايی که راه حل اصلی مورد نظر در اين مقاله بر پايه همين مدل است، ابتدا به بررسی اين روش پرداخته و سپس آنرا کامل می کنيم. بنابراين برای درک مرحله بعد نياز است که اين مرحله بخوبی درک شده باشد. در ضمن در کدهای زير از روش code behind استفاده شده است تا مطلب واضح تر باشد.
قالب سازی به کمک User Control ها
نحوه عمل
در اين روش بدين صورت عمل می شود که قسمتهای يکسان موجود در تمام صفحات در قالب user controlها تعريف می شوند و سپس اين کنترلها در تمامی صفحات قرار داده می شوند. برای بررسی اين روش به يک مثال نياز داريم. در اين مثال بدين گونه فرض می شود که صفحه وب ما شامل سه قسمت می باشد:
(1) مکان لوگو
(2) منوها (3) قسمت اصلی (Main Part)
و با انتخاب هر منو متن قسمت 3 يا همان Main Part تغيير می کند.
طراحی بدين صورت شکل می گيرد که به جز قسمت 3 که هميشه غير ثابت و متغير هست، قسمت های 1 و 2 بصورت User Control (که از اينجا به بعد به منظور خلاصه سازی با نام اختصاری UC نامبرده می شود) تعريف و استفاده می شوند. اين قسمت ها را پنل(Panel) نيز می گويند. پنل 1 را به صورت زير تعريف می کنيم: (فايل با نام Panel_logo.ascx)
---Panel_logo.ascx file---
<%@ Control Language="vb" AutoEventWireup="false" Inherits="site.Panel_logo" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
اين تعريف کنترل panel_logo می باشد. در ضمن در اين قسمت از هيچگونه برنامه نويسی استفاده نشده است.
نکته مهم: بايد توجه کنيد که به هيچ وجه درUCها از فرمهای با ويژگی runat=server استفاده نشود. اگرچه اين کار مجاز است ولی عملا کاربرد کنترل شما را بسيار محدود می کند. توجه کنيد، کنترلهايی که بدين صورت ايجاد می گردند در هنگام ترجمه کدهای HTML آن بصورت مستقيم در مکان فراخوانی کنترل قرار خواهند گرفت.
حال کنترل دوم را ايجاد می کنيم. اين کنترل را بصورتی ايجاد می کنيم که با انتخاب هر منو، پس از رفتن به صفحه مربوطه، منوی مربوط به آن صفحه غير فعال شود:
---Panel_right.ascx file---
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="Panel_right.ascx.vb" Inherits="site.Panel_right" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
<table >
<tr>
<td id="td1" runat="server"><A href="index.aspx"> Home Page </A></td>
<td id="td2" runat="server"><A href="search.aspx"> Searching </A></td>
<td id="td3" runat="server"><A href="AboutUs.aspx"> About Us </A></td>
</tr>
</table>
همانطور که ديده می شود در اين پنل سه لينک به سه صفحه متفاوت موجود است. همچنين اين سه لينک هر کدام در يک تگ <td> با ويژگی runat=server قرار داده شده اند، تا بتوان از آنها در Codebehind مربوطه استفاده نمود. توجه کنيد که قرار است با رفتن به هر صفحه، به اين کنترل بفهمانيم که در کدام صفحه است و کدام لينک را بايد غيرفعال کند. پس نياز است که يک property برای اين کنترل معرفی شود که اين کار را برای ما انجام دهد. بنابراين در Codebehind مربوط به پنل راست داريم:
---Panel_right.ascx.vb file---
Protected WithEvents td1 As System.Web.UI.HtmlControls.HtmlTableCell
Protected WithEvents td2 As System.Web.UI.HtmlControls.HtmlTableCell
Protected WithEvents td3 As System.Web.UI.HtmlControls.HtmlTableCell
که باعث معرفی td1,td2,td3 در کد می شود. سپس property مربوطه به صورت زير تعريف می شود:
Public WriteOnly Property current_page() As Integer
Set(ByVal Value as Integer)
Select Case Value
Case 1
td1.InnerHtml = "Home Page"
Case 2
td2.InnerHtml = "Searching"
Case 3
td3.InnerHtml = "About Us"
End Select
End Set
End Property
بدين ترتيب مثلا اگر خصيصه current_page به مقدار 2 تنظيم شود، به جای لينک searching، فقط متن آن قرار خواهد گرفت که نشانگر غيرفعال بودن آن لينک و يا به عبارتی نشانه قرار داشتن در صفحه searching می باشد.
هم اکنون جزئيات قالب ما معين است و فقط کافی است که شکل صفحه قالب را معين کنيم. صفحه قالب را با نام template.aspx ايجاد و از آن استفاده می نماييم:
---template.aspx---
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="template.aspx.vb" Inherits="site.template"%>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysite
anel_logo id="panel_logo1" runat="server"></mysiteanel_logo></td>
</tr>
<td>متن و کنترلهايی که مخصوص هر صفحه هست و جداگانه تعريف می شوند در اينجا قرار] [می گيرند(Main Part)
</td>
<td>
<mysite
anel_right id="panel_right1" runat="server"></mysiteanel_right></td>
<tr>
</tr>
</table>
</body>
</HTML>
بدين ترتيب قالب ما ساخته می شود و برای ايجاد هر صفحه جديد کافی است کدهای فوق (البته به غير از directive مربوط به page که بايد مخصوص همان صفحه باشد) را در آنجا قرار داد. نمونه ساده ای از استفاده اين قالب به صورت زير است: (بطور مثال برای صفحه aboutus.aspx)
---aboutus.aspx---
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="aboutus.aspx.vb" Inherits="site.aboutus"%>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysite
anel_logo id="panel_logo1" runat="server"></mysiteanel_logo></td>
</tr>
<td> درباره ما... سابقه کاری شرکت ما به صورت زير می باشد: 1-...2-...
</td>
<td>
<mysite
anel_right id="panel_right1" current_page="3" runat="server"></mysite
anel_right></td>
<tr>
</tr>
</table>
</body>
</HTML>
همانطور که در اين کد ملاحظه می شود، directive مربوط به Page تغيير کرده است، متن قسمت "صفحه اصلی" (Main Part) نيز با متن مورد نياز در اين صفحه تنظيم شده و نهايتا ويژگی current_page، از کنترل panel_right، با مقدار 3 تنظيم شده که باعث می شود لينک سوم در هنگام بازديد از اين صفحه غيرفعال گردد. توجه کنيد که تغييرات فوق فقط مختص اين صفحه است و به هيچکدام از صفحات ديگر در ارتباط نيست. بنابراين اصل قالب بندی به هيچ وجه زير سوال نمی رود. حال برای درک بيشتر اين قضيه فرض کنيد که ۲۰۰ صفحه با قالب فوق ايجاد کرديد و حال تصميم می گيريد که در پنل مربوط به لوگو مکانی را برای قرار دادن يک عکس تبليغاتی اختصاص دهيد. فقط کافی است که بدرون کنترل panel_logo يک خط بصورت زير اضافه شود:
همين!... با تغيير فوق اين تغيير را تمامی صفحات مشاهده خواهيد کرد و ديگر لازم نيست که اين خط را به تمامی صفحات اضافه و از درست عمل کردن آن مطمئن شويد. و يا اينکه تصميم می گيريد يک منوی جديد به ليست منوها اضافه کنيد. همانند مورد فوق خط مشابهی را در صفحه panel_right.ascx اضافه کرده و يک case ديگر نيز به دستور select در code behind مربوطه اضافه می کنيد و ديگر تمام! حتی لازم نيست current_page مربوط به صفحات ديگر را تغيير دهيد. همچنين شما می توانيد به کنترلهای خود ويژگی visible را هم اضافه نماييد تا در صفحات مورد نياز از نمايش بعضی پنل ها (مانند پنل تبليغات) جلوگيری به عمل آوريد. چيزی که اجرای آن با فريم ها بسيار مشکل و دردسر ساز می باشد. همانطور که ديده می شود، اصول شئ گرايی تماما در اين روش رعايت شده است.
در اين روش شما می توانيد با استفاده از caching کنترلها، سرعت و کارايی برنامه را تا حد قابل توجهی بالا ببريد.
همچنين در موارد پيشرفته تر و تعداد صفحات بالا مشاهده خواهيد کرد که:
• از حجم برنامه شما بسيار کاسته می شود.
• خوانايی کدهای HTML شما افزايش می يابد و درنتيجه ايراد زدايی از کدهای HTML نيز بسيار آسانتر خواهد شد.
• سرعت کار و تمرکز شما نيز بطور قابل توجهی افزايش می يابد.
روش ذکر شده بسيار خوب و کامل است. ولی اين روش ايراداتی دارد که پس از اشاره به آنها، به نحوه رفع آن با روش دوم خواهيم پرداخت:
فرض کنيد پس از مدتی تصميم می گيريم که ظاهر سايت را تغيير دهيم. مثلا يک پنل تبليغات به سمت چپ اضافه کنيم. اگر دقت کنيد، با مشکلی همانند اولين مشکل ذکر شده در مقاله برخورد خواهيم کرد. در اينجا ديگر پنلی به اين نام در صفحات ما وجود ندارد و ما مجبور خواهيم بود که اين پنل را ايجاد و در تمامی صفحات قرار دهيم. و اين در حالی است که ساختار HTML موجود در صفحات بهم نخورد. اغلب ساختار HTML صفحات بسيار پيچيده تر از مثال فوق است و بنابراين نياز است که در کدهای HTML تمامی صفحات نيز بازنگری شود و اين نيز بر مشکل اول افزوده می شود. مشکل اساسی آنجا آغاز می شود که قصد کنيم ظاهر سايت را کاملا تغيير داده و کل قالب را عوض کنيم. اگر چه شايد اين مشکل مانند مشکلات مدل ايجاد صفحات بدون قالب نباشد، ولی حداقل نياز است که اين تغييرات برای تمامی صفحات موجود اجرا شود و قالب جديدی نيز ساخته شود. پس از آن است که ديگر نياز به تغييرات نيست، ولی اگر دوباره نياز به اينچنين تغييری پيدا شد چه؟... مسلما اين راه حل کاملا پاسخگو نيست.
در راه حل زير مشکل فوق بررسی و برطرف می شود:
قالب سازی پويا بوسيله سگمنت کردن قالب اوليه
اگر در روش قبلی دقت کرده باشيد، مشکل از وجود کدهای HTML موجود درقالب بود و اگرچه در تمامی صفحات ثابت بودند ولی با اندکی تغيير در ساختار صفحه نياز به تغيير آن و در نتيجه تغيير قالب و نهايتا قالب گيری مجدد صفحات ساخته شده است. اگر بتوان بصورتی عمل کرد که قالب اصلی ما هميشه شکل ثابتی داشته باشد و بهيچ وجه تغيير نکند، مشکل برطرف می شد. به عبارتی با قالب سازی برای قالب اوليه و يا به عبارتی پويا سازی قالب، ديگر و در هيچ شرايطی نياز به تغيير قالب مورد استفاده صفحات را نداشتيم و با تغيير شکل قالب، خودبخود در تمامی صفحات نيز تغييرات صورت می گرفت. قبل از بررسی روش مورد نظر توجه شما را به نکته ای جلب می کنم:
همانطور که احتمالا همه شما تا کنون متوجه شده ايد، هر سايت مجموعه ای از پنل های فرعی و تقريبا ثابت، و يک قسمت اصلی (Main Part) که حاوی مطالب صفحه مورد نظر است می باشد. برای درک بيشتر اين موضوع همين الان به چند سايت مختلف نگاه کنيد...، بطور مثال همين سايت IranASP.NET شامل دو پنل چپ و راست و يک پنل بالا و پايين است. قسمت وسط آن نيز، قسمت اصلی صفحه (Main Part) را تشکيل می دهد. در سايت ياهو نيز در صفحه مربوط به ميل آن يک پنل در چپ، يک پنل در بالا و يک پنل تبليغات در بالاترين نقطه وجود دارد. در قسمت راست صفحه هم اصلی ترين قسمت(Main Part) وجود دارد. می توان گفت که اين قسمت يا همان Main Part بيشترين فضای صفحه را در تمامی سايتها اشغال می کند.
پس هم اکنون به اين امر واقف هستيد که "قسمت اصلی" جزو لاينفک هر سايت هست و کليه تغييرات در سايت حول اين قسمت می باشد.
برای توضيح اين روش از مثال ذکر شده در روش قبل استفاده می کنيم و آنرا تکميل می نماييم. اکنون همانند مثال ذکر شده در روش قبل يک قالب ايجاد کنيد. مکانی که بايد کدهای قسمت اصلی در آنجا قرار بگيرند را در نظر بگيريد. از همين مکان کدها را به دو قسمت بالايی و پايينی تفکيک کنيد. يعنی کدهای HTML ای که بالای قسمت Main Part قرار دارند به صورت زير خواهد بود:
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
Inherits="site.template"%>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysite
anel_logo id="panel_logo1" runat="server"></mysiteanel_logo></td>
</tr>
<td>
و بلافاصله پس از خط آخر کدهای قسمت اصلی قرار دارند:
[Codes that are for main part of the page, must put here.]
و بلافاصله پس از اين کدها، کدهای HTML مربوط به ادامه قالب قرار دارند:
</td>
<td>
<mysite
anel_right id="panel_right1" runat="server"></mysiteanel_right></td>
<tr>
</tr>
</table>
</body>
</HTML>
هم اکنون اين دو قسمت بالايی و پايينی را در دو کنترل جداگانه تعريف می کنيم. اولين کنترل را سگمنت بالايی می ناميم: (segment_top.ascx)
---segment_top.ascx---
<%@ Register TagPrefix="Mysite" TagName="Panel_logo" Src="Panel_logo.ascx" %>
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="segment_top.ascx.vb" Inherits="site.segment_top" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
<HTML>
<head> My site </head>
<body>
<table>
<tr>
<td colspan="2">
<mysite
anel_logo id="panel_logo1" runat="server"></mysiteanel_logo></td>
</tr>
<td>
از آنجايی که کد HTML فوق شامل پنل راست نيست، directive مربوطه را نيز از آن حذف می کنيم. همچنين اين قمست دارای code behind خاصی نيست و از آن صرف نظر می کنيم.
کنترل دوم را سگمنت پايينی می ناميم و شامل کدهای قسمت پايينی قالب است (segment_down.ascx):
---segment_down.ascx---
<%@ Register TagPrefix="Mysite" TagName="Panel_right" Src="Panel_right.ascx" %>
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="segment_down.ascx.vb" Inherits="site.segment_down" TargetSchema= "http://schemas.microsoft.com/intellisense/ie5" %>
</td>
<td>
<mysite
anel_right id="panel_right1" runat="server"></mysiteanel_right></td>
<tr>
</tr>
</table>
</body>
</HTML>
همانطور که ديده می شود، directive حذف شده در اين سگمنت آورده شده است.همچنين کدهای HTML نيز در هيچکدام از دو کنترل فوق بصورت کامل نمی باشند ( به عبارتی well formed نيست) و در واقع بصورت تنها، اشتباه و بدون کاربرد می باشد. بنابراين توجه داشته باشيد که اين دو سگمنت با هم بکار برده می شوند. همچنين VS.NET در بعضی شرايط خود اقدام به تکميل اين کدها می کند که در صورت مشاهده اين عمل، خود اقدام به حذف کدهای اضافی نماييد.
انجام يک کار در هنگام ايجاد سگمنت ها مورد اجباری است و آن اينکه از آنجا که پس از استفاده از صفحه قالب ايجاد شده، امکان دسترسی به خصوصيات کنترلهای موجود در اين سگمنت ها نيست، بايد اين خصوصيات را به اين سگمنت ها انتقال داد. بطور مثال در پنل راست خصيصه ای بود که با آن صفحه جاری را معين می کرديم. حال اين خصيصه را به صورت زير به عنوان يک خصيصه در سگمنت پايينی (چون اين کنترل در اين سگمنت قرار دارد) تعريف می کنيم. ابتدا بايد کنترل panel_right را بصورت زير در درون codebehind تعريف کنيم، زيرا بصورت خودکار اين تعريف ايجاد نمی شود.
---segment_down.ascx.vb---
Protected WithEvents Panel_right1 As Panel_right
سپس اين خصيصه را به کنترل سگمنت پايين اضافه می کنيم:
WriteOnly Property current_page() As Integer
Set(ByVal Value As Integer)
Panel_right1.current_page = Value
End Set
End Property
بدين ترتيب اين خصيصه را به کنترل پايينی اضافه کرده ايم. حال صفحه قالب ما در تمامی حالات فقط از شکل زير برخوردار است:
---template.aspx---
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="template.aspx.vb" %>
<%@ Register TagPrefix="mysite" TagName="segment_down" Src="segment_down.ascx" %>
<%@ Register TagPrefix="mysite" TagName="segment_top" Src="segment_top.ascx" %>
<mysite:segment_top id="Segment_top1" runat="server"></ mysite:segment_top>
<mysite:segment_down id="Segment_down1" runat="server"></ mysite:segment_down>
فقط اينکه در صفحات مورد استفاده از قالب ها، page directive بايد مربوط به خود آن صفحه باشد.
حال به عنوان نمونه صفحه aboutus.aspx را با اين قالب جديد پياده سازی می کنيم:
---aboutus.aspx---
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="aboutus.aspx.vb" %>
<%@ Register TagPrefix="mysite" TagName="segment_down" Src="segment_down.ascx" %>
<%@ Register TagPrefix="mysite" TagName="segment_top" Src="segment_top.ascx" %>
< mysite:segment_top id="Segment_top1" runat="server"></ mysite:segment_top>
درباره ما... سابقه کاری شرکت ما به صورت زير می باشد: 1-...2-...
< mysite:segment_down id="Segment_down1" runat="server" current_page=" 3" ></ mysite:segment_down>
همانطور که ملاحظه می شود، متن قسمت اصلی در ميان دو سگمنت قرار می گيرد. همچنين مقدار خصيصه current_page نيز در سگمت پايينی معين شده است.
حال فرض کنيد می خواهيم يک پنل تبليغات در سمت چپ قرار دهيم. فقط کافی است در سگمنت بالايی کدهای زير را در انتهای آن اضافه کنيم: (فرض کنيد کنترل تبليغات به اسم panel_adv.ascx طراحی شده است)
<%@ Register TagPrefix="Mysite" TagName="Panel_adv" Src="Panel_adv.ascx" %>
<mysite
anel_adv id="panel_adv1" runat="server"></myiteanel_adv> و فقط همين! ديگر نيازی به تغيير در هيچکدام از فايلها نيست و صفحه "درباره ما" با شکلی جديد به نمايش خواهد آمد. در اين شرايط اگر ظاهر سايت نيز به کلی تغيير کند طوری که تمام کدهايHTML عوض گردند، حداکثر تغيير در کنترل های سگمنت بالايی و پايينی است. يعنی حداکثر کدهای HTML اين دو تغيير خواهند کرد و تمامی صفحات از قالب جديد پيروی خواهند کرد.
در دو طراحی آخر فقط به اين مورد می توان اشاره کرد که در صورت استفاده از قالب بندی به يکی از اين دو روش، در هر صورت تمامی فايلهای سايت شما بايد تبديل به aspx شوند. شايد اين از نظر برخی ناخوشايند باشد. بطور مثال تمامی صفحات با محتوای ثابت که می توانند به صورت HTML نيز باشند، بايد به صورت aspx درآيند و ازآنجا که هيچ برنامه نويسی سمت سرور در اين فايلها نيست، در واقع کار بی موردی انجام داده ايم و به سرور بار اضافی تحميل کرده ايم. خوب اين بستگی به طراح سايت دارد که کدام مدل برای وی بيشتر به صرفه باشد. چيزی که اينجا مشخص است، برای سايت های با حجم و ترافيک محدود شايد چند صفحه ثابت ارائه شده بصورت aspx آنچنان بر عملکرد سايت موثر نباشد. در ضمن قابل ذکر است که اين يک مدل و شيوه است و اجباری بر اجرای آن بر روی تمامی صفحات نيست.
در آخر به عنوان نمونه ای از کارهای انجام شده با اين روش می توان به سايت http://www.hudhud-dubai.com/ و http://www.irantbc.com/ (بزودی) اشاره کرد.
