راهکارهای موثر در ASP.Net > راهکار 5 - 4 : استفاده از صفحات مسترپیج تو در تو
در ASP.Net
مقدمه :
این راهکار نحوه تعریف و استفاده از یک مسترپیج که خود درون مسترپیج دیگری قرار می
گیرد را آموزش می دهد . به این نحوه تعریف مسترپیج ها ، مسترپیج های تو در تو ( Nested
Master Pages ) می گویند .
برای مثال شما می توانید یک مسترپیج مادر ( Parent ) که شامل یک بنر در بالای صفحه
و یک منوی صفحات در سمت راست آن بوده ، ساخته ، سپس یک مسترپیج فرزند یا Child می سازید
که برای نمایش گروهی از محصولات به کار رفته و درون مسترپیج مادر است . این مسترپیج
می تواند برای هر دسته از محصولات طراحی و قالب خود را داشته و از قالب مسترپیج مادر
نیز استفاده نماید .
کارهایی که در این راهکار آموزش داده خواهند شد ، عبارتند از :
- ایجاد یک مسترپیج .
- ایجاد یک مسترپیج فرزند که درون مسترپیج دیگری قرار دارد .
- ایجاد یک صفحه ASP.Net به عنوان صفحه محتوا که از هر دو مسترپیج برای نمایش قالب خود
استفاده می کند .
برای حمایت از این پروژه ، کتاب
راهکارهای موثر در ASP.Net را دانلود نمایید ...
پیش نیازها :
برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد
:
- Visual Studio.
- یک عکس برای بنر سایت با فرمت مناسب .
مرحله اول - طراحی یک سایت ASP.Net :
در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید
. فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ،
در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو
بروید .
مرحله دوم - ایجاد مسترپیج مادر :
در این بخش ، مسترپیج مادر ( Parent ) را طراحی می کنیم . همانطور که در بخش قبل گفتیم
، این مسترپیج دارای یک بنر در بالای صفحه و یک منوی فهرست در سمت راست آن است . سپس
مسترپیج دومی را می سازیم که درون این مسترپیج قرار دارد . مسترپیج فرزند می تواند
قالب های مختلفی را برای صفحات تولید کند ، در حالی که از نمای کلی مسترپیج مادر استفاده
می کند .
نحوه ایجاد مسترپیج مادر :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item
را انتخاب نمایید . پنجره Add New Item مطابق تصویر زیر باز می شود :
- از زیر بخشه Visual Studio installed templates ، نوع فایل Master Page را انتخاب کرده
و نام آن را به ParentMaster.master تغییر دهید .
- تیک گزینه Place code in separate file را برداشته تا فایل جدایی برای کد نویسی صفحه
ایجاد نشود ، سپس در بخش Language نیز زبان مورد نظر خود برای برنامه نویسی صفحه را
انتخاب نمایید .
- در نهایت با زدن کلید Add ، مسترپیج مادر را به سایت اضافه نمایید . برنامه فایل مسترپیج
را در نمای کد Source باز می کند .
اضافه کردن المنت های مورد نظر به مسترپیج مادر :
همانطور که در کد فایل مسترپیج مشاهده می کنید ، این فایل در بخش اعلان صفحه دارای
علامت Master@ به جای Page@ ( مانند آنچه در صفحات معمولی ASP.Net می بینید ) می باشد
. همچنین بدنه این فایل شامل دو کنترل ContentPlaceHolder است که اولی برای قرار گرفتن
کدها و اسکریپت ها و دومی نگهدارنده محتویات صفحات وابسته به آن ( مثل یک مسترپیج دیگر
یا صفحات محتوای ASP.Net ) در آن محل با فایل مسترپیج اصلی بوده و درنهایت ادغام شده
و نمایش داده می شوند . در مراحل بعدی با نحوه کار با این کنترل آشنا خواهید شد .
اضافه کردن بنرهای بالا و عکس پایین footer صفحه به مسترپیج مادر :
در این مرحله دو عکس را به عنوان بنر و footer برای سایت در نظر گرفته ایم ، آنها را
به صفحه مسترپیج مادر اضافه می کنیم :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add Exiting
Item را انتخاب نمایید .
پنجره Add Exiting Item مطابق تصویر زیر باز می شود :
- از پنجره باز شده ، تصاویر مورد نظر خود را انتخاب کرده و با زدن کلید Ok ، آنها را
به پروژه اضافه نمایید .
- در نمای کد Source صفحه ، بلافاصله بعد از تگ < form > ، یک المنت < div >
را برای قرار دادن عکس هدر مانند کد زیر اضافه نمایید :
|
کد
|
<div id="banner">
<img src="banner.gif" alt="banner graphic" />
</div>
|
- همچنین دقیقا قبل از تگ پایانی < form/ > در فایل مسترپیج ، یک المنت دیگر <
div > را برای قرار دادن عکس پایین صفحه یا footer اضافه نمایید . همانند کد زیر
:
|
کد
|
<div id="banner">
<img src="footer.gif" alt="footer graphic" />
</div>
|
- صفحه مسترپیج مادر را ذخیره کرده و ببندید .
نکته : توجه داشته باشید که تا این مرحله شما چیزی درون کنترل ContentPlaceHolder
صفحه قرار نداده اید . در این کنترل بایستی کد مسترپیج فرزند و سایر کدها قرار بگیرد
.
مرحله سوم - ایجاد یک مسترپیج فرزند :
در این مرحله می خواهیم مسترپیج دوم یا فرزند را به پروژه اضافه نماییم . مسترپیج جدید
باید درون کنترل PlaceHolder مسترییج مادر قرار بگیرد . مسترپیج دوم این امکان را به
ما می دهد تا بخشی از صفحه را به صورت مرتب تغییر دهیم ، در حالی که قالب کلی مسترپیج
اول را در اختیار داریم و آن قالب ثابت است .
نحوه ایجاد مسترپیج فرزند :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item
را انتخاب نمایید . پنجره Add New Item مطابق تصویر زیر باز می شود :
- از زیر بخشه Visual Studio installed templates ، نوع فایل Master Page را انتخاب کرده
و نام آن را به Child.master تغییر دهید .
- تیک گزینه Place code in separate file را برداشته تا فایل جدایی برای کد نویسی صفحه
ایجاد نشود ، ولی گزینه Select master page را حتما علامت بزنید ( برای انتخاب مسترپیج
مادر به عنوان مسترپیج آن ( .
- در بخش Language نیز زبان مورد نظر خود برای برنامه نویسی صفحه را انتخاب نمایید .
- گزینه Add را بزنید . پنجره Select a Master Page مطابق تصویر زیر باز می شود :
فایل مسترپیج مادر که در مرحله قبلی این راهکار ایجاد کرده بودیم را به عنوان مسترپیج
صفحه انتخاب نمایید .
- کلید Ok را بزنید . مسترپیج جدید در نمای کد Source باز می شود .
اضافه کردن کنترل های ContentPlaceHolder به مسترپیج فرزند :
به دلیل اینکه مسترپیج فرزند ، خود به مسترپیج دیگری متصل است ، دارای دو عدد کنترل
Content است . کنترل Content اول برای قرار دادن کدهایی که در بخش Head صفحه نهایی
قرار خواهند گرفت ، مثل اسکریپت ها به کار می رود . درون کنترل Content دوم نیز ، می
توانید یک کنترل ContentPlaceHolder قرار دهید که محتویات صفحه محتوا متصل به مسترپیج
را در محل خود ادغام می کند .
شما می توانید هر گونه کد یا المنت HTML ای را درون کنترل Content قرار دهید .
- به صفحه مسترپیج فرزند رفته و آن را در حالت کد Source باز کنید .
- کد جدول زیر را برای ایجاد کنترل های ContentPlaceHolder که محتویات صفحه محتوا و متصل
به مسترپیج را نمایش می دهند ، به کنترل Content دوم ، اضافه نمایید . همانند
عکس زیر:
|
کد
|
<div id="2col">
<asp:ContentPlaceHolder ID="leftcolumn" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="rightcolumn" runat="server">
</asp:ContentPlaceHolder>
</div>
|
- فایل را ذخیره نمایید .
اکنون فایل مسترپیج فرزند ، دارای کنترل های ContentPlaceHolder ای است که کدها و محتویات
را از صفحات ASP.Net معمولی دریافت می کند .
مرحله آخر - ایجاد یک صفحه محتوا که از مسترپبج فرزند استفاده می کند :
در مرحله آخر ، می خواهیم یک صفحه ساده ASP.Net را ساخته و با اتصال آن به مسترپیج
فرزند ، کاری کنیم تا در هنگام اجرا 3 فایل ، مسترپبج مادر و فرزند و خود آن فایل با
هم ادغام شده و خروجی نهایی را بسازند . برای این منظور مراحل زیر را انجام دهید :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item
را انتخاب نمایید . پنجره Add New Item باز می شود . مطابق تصویر زیر :
- از زیر بخشه Visual Studio installed templates ، نوع فایل Web Form را انتخاب
کرده و نام آن را به Task.aspx تغییر دهید .
- هر دو گزینه Place code in separate file و Select master page را علامت بزنید و میدانید
که این کار باعث انتخاب یک فایل به عنوان مسترپیج صفحه شده و همچنین فایل جدایی برای
کدنویسی آن ایجاد می کند .
- از قسمت Languages ، زبان مورد نظر خود برای کدنویسی فایل را انتخاب نموده و سپس گزینه
Add را بزنید .
- پنجره Select a Master Page باز می شود . مسترپیج فرزند با نام Child.master را به
عنوان مسترپیج فایل انتخاب نمایید .
- صفحه جدید Task.aspx در نمای کد Source باز می شود .
- ID کنترل Content اول در فایل Task.aspx را به مقدار " leftcolumn " و ID کنترل Content
دوم را به مقدار " rightcolumn " تغییر دهید . این کار باعث اتصال این کنترل ها به
کنترل های مرتبط ContentPalceHolder در فایل مسترپیج فرزند می شود .
- محتویات مورد نظر خود را به صفحه محتوا Task.aspx اضافه نمایید .
- کلیدهای Ctrl + F5 را برای اجرای وب سایت فشار دهید .
راهنمایی : هنگامی که صفحه بالا می آید ، توجه داشته باشید که این
صفحه ترکیبی از المنت های مسترپیج مادر ( بنر ، منو و لوگو ) ، دو ستون تعیین شده در
مسترپیج فرزند و محتویات درونی خود فایل Task.aspx است .
دانلود فایل عملی پروژه و نسخه PDF راهکار
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :