راهکارهای موثر در ASP.Net > راهکار 5 - 4 : استفاده از صفحات مسترپیج تو در تو در ASP.Net

مقدمه :

این راهکار نحوه تعریف و استفاده از یک مسترپیج که خود درون مسترپیج دیگری قرار می گیرد را آموزش می دهد . به این نحوه تعریف مسترپیج ها ، مسترپیج های تو در تو ( Nested Master Pages ) می گویند .
برای مثال شما می توانید یک مسترپیج مادر ( Parent ) که شامل یک بنر در بالای صفحه و یک منوی صفحات در سمت راست آن بوده ، ساخته ، سپس یک مسترپیج فرزند یا Child می سازید که برای نمایش گروهی از محصولات به کار رفته و درون مسترپیج مادر است . این مسترپیج می تواند برای هر دسته از محصولات طراحی و قالب خود را داشته و از قالب مسترپیج مادر نیز استفاده نماید .
کارهایی که در این راهکار آموزش داده خواهند شد ، عبارتند از :

  • ایجاد یک مسترپیج .
  • ایجاد یک مسترپیج فرزند که درون مسترپیج دیگری قرار دارد .
  • ایجاد یک صفحه ASP.Net به عنوان صفحه محتوا که از هر دو مسترپیج برای نمایش قالب خود استفاده می کند .

برای حمایت از این پروژه ، کتاب راهکارهای موثر در ASP.Net را دانلود نمایید ...

پیش نیازها :

برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد :

  1. Visual Studio.
  2. یک عکس برای بنر سایت با فرمت مناسب .

مرحله اول - طراحی یک سایت ASP.Net :

در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید . فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ، در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو بروید .

مرحله دوم - ایجاد مسترپیج مادر :

در این بخش ، مسترپیج مادر ( Parent ) را طراحی می کنیم . همانطور که در بخش قبل گفتیم ، این مسترپیج دارای یک بنر در بالای صفحه و یک منوی فهرست در سمت راست آن است . سپس مسترپیج دومی را می سازیم که درون این مسترپیج قرار دارد . مسترپیج فرزند می تواند قالب های مختلفی را برای صفحات تولید کند ، در حالی که از نمای کلی مسترپیج مادر استفاده می کند .

نحوه ایجاد مسترپیج مادر :

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید . پنجره Add New Item مطابق تصویر زیر باز می شود :
  2. از زیر بخشه Visual Studio installed templates ، نوع فایل Master Page را انتخاب کرده و نام آن را به ParentMaster.master تغییر دهید .
  3. تیک گزینه Place code in separate file را برداشته تا فایل جدایی برای کد نویسی صفحه ایجاد نشود ، سپس در بخش Language نیز زبان مورد نظر خود برای برنامه نویسی صفحه را انتخاب نمایید .
  4. در نهایت با زدن کلید Add ، مسترپیج مادر را به سایت اضافه نمایید . برنامه فایل مسترپیج را در نمای کد Source باز می کند .

اضافه کردن المنت های مورد نظر به مسترپیج مادر :

همانطور که در کد فایل مسترپیج مشاهده می کنید ، این فایل در بخش اعلان صفحه دارای علامت Master@ به جای Page@ ( مانند آنچه در صفحات معمولی ASP.Net می بینید ) می باشد . همچنین بدنه این فایل شامل دو کنترل ContentPlaceHolder است که اولی برای قرار گرفتن کدها و اسکریپت ها و دومی نگهدارنده محتویات صفحات وابسته به آن ( مثل یک مسترپیج دیگر یا صفحات محتوای ASP.Net ) در آن محل با فایل مسترپیج اصلی بوده و درنهایت ادغام شده و نمایش داده می شوند . در مراحل بعدی با نحوه کار با این کنترل آشنا خواهید شد .

اضافه کردن بنرهای بالا و عکس پایین footer صفحه به مسترپیج مادر :

در این مرحله دو عکس را به عنوان بنر و footer برای سایت در نظر گرفته ایم ، آنها را به صفحه مسترپیج مادر اضافه می کنیم :

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add Exiting Item را انتخاب نمایید .
    پنجره Add Exiting Item مطابق تصویر زیر باز می شود :
  2. از پنجره باز شده ، تصاویر مورد نظر خود را انتخاب کرده و با زدن کلید Ok ، آنها را به پروژه اضافه نمایید .
  3. در نمای کد Source صفحه ، بلافاصله بعد از تگ < form > ، یک المنت < div > را برای قرار دادن عکس هدر مانند کد زیر اضافه نمایید :
    کد <div id="banner">
        <img src="banner.gif" alt="banner graphic" />
    </div>
  4. همچنین دقیقا قبل از تگ پایانی < form/ > در فایل مسترپیج ، یک المنت دیگر < div > را برای قرار دادن عکس پایین صفحه یا footer اضافه نمایید . همانند کد زیر :
    کد <div id="banner">
        <img src="footer.gif" alt="footer graphic" />
    </div>
  5. صفحه مسترپیج مادر را ذخیره کرده و ببندید .

نکته : توجه داشته باشید که تا این مرحله شما چیزی درون کنترل ContentPlaceHolder صفحه قرار نداده اید . در این کنترل بایستی کد مسترپیج فرزند و سایر کدها قرار بگیرد .

مرحله سوم - ایجاد یک مسترپیج فرزند :

در این مرحله می خواهیم مسترپیج دوم یا فرزند را به پروژه اضافه نماییم . مسترپیج جدید باید درون کنترل PlaceHolder مسترییج مادر قرار بگیرد . مسترپیج دوم این امکان را به ما می دهد تا بخشی از صفحه را به صورت مرتب تغییر دهیم ، در حالی که قالب کلی مسترپیج اول را در اختیار داریم و آن قالب ثابت است .

نحوه ایجاد مسترپیج فرزند :

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید . پنجره Add New Item مطابق تصویر زیر باز می شود :
  2. از زیر بخشه Visual Studio installed templates ، نوع فایل Master Page را انتخاب کرده و نام آن را به Child.master تغییر دهید .
  3. تیک گزینه Place code in separate file را برداشته تا فایل جدایی برای کد نویسی صفحه ایجاد نشود ، ولی گزینه Select master page را حتما علامت بزنید ( برای انتخاب مسترپیج مادر به عنوان مسترپیج آن ( .
  4. در بخش Language نیز زبان مورد نظر خود برای برنامه نویسی صفحه را انتخاب نمایید .
  5. گزینه Add را بزنید . پنجره Select a Master Page مطابق تصویر زیر باز می شود :
    فایل مسترپیج مادر که در مرحله قبلی این راهکار ایجاد کرده بودیم را به عنوان مسترپیج صفحه انتخاب نمایید .
  6. کلید Ok را بزنید . مسترپیج جدید در نمای کد Source باز می شود .

اضافه کردن کنترل های ContentPlaceHolder به مسترپیج فرزند :

به دلیل اینکه مسترپیج فرزند ، خود به مسترپیج دیگری متصل است ، دارای دو عدد کنترل Content است . کنترل Content اول برای قرار دادن کدهایی که در بخش Head صفحه نهایی قرار خواهند گرفت ، مثل اسکریپت ها به کار می رود . درون کنترل Content دوم نیز ، می توانید یک کنترل ContentPlaceHolder قرار دهید که محتویات صفحه محتوا متصل به مسترپیج را در محل خود ادغام می کند .
شما می توانید هر گونه کد یا المنت HTML ای را درون کنترل Content قرار دهید .

  1. به صفحه مسترپیج فرزند رفته و آن را در حالت کد Source باز کنید .
  2. کد جدول زیر را برای ایجاد کنترل های ContentPlaceHolder که محتویات صفحه محتوا و متصل به مسترپیج را نمایش می دهند  ، به کنترل Content دوم ، اضافه نمایید . همانند عکس زیر:
    کد <div id="2col">
         <asp:ContentPlaceHolder ID="leftcolumn" runat="server">
         </asp:ContentPlaceHolder>

         <asp:ContentPlaceHolder ID="rightcolumn" runat="server">
         </asp:ContentPlaceHolder>
    </div>

  3. فایل را ذخیره نمایید .

اکنون فایل مسترپیج فرزند ، دارای کنترل های ContentPlaceHolder ای است که کدها و محتویات را از صفحات ASP.Net معمولی دریافت می کند .

مرحله آخر - ایجاد یک صفحه محتوا که از مسترپبج فرزند استفاده می کند :

در مرحله آخر ، می خواهیم یک صفحه ساده ASP.Net را ساخته و با اتصال آن به مسترپیج فرزند ، کاری کنیم تا در هنگام اجرا 3 فایل ، مسترپبج مادر و فرزند و خود آن فایل با هم ادغام شده و خروجی نهایی را بسازند . برای این منظور مراحل زیر را انجام دهید :

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب نمایید . پنجره Add New Item باز می شود . مطابق تصویر زیر :
  2. از زیر بخشه Visual Studio installed templates ، نوع فایل Web Form  را انتخاب کرده و نام آن را به Task.aspx تغییر دهید .
  3. هر دو گزینه Place code in separate file و Select master page را علامت بزنید و میدانید که این کار باعث انتخاب یک فایل به عنوان مسترپیج صفحه شده و همچنین فایل جدایی برای کدنویسی آن ایجاد می کند .
  4. از قسمت Languages ، زبان مورد نظر خود برای کدنویسی فایل را انتخاب نموده و سپس گزینه Add را بزنید .
  5. پنجره Select a Master Page باز می شود . مسترپیج فرزند با نام Child.master را به عنوان مسترپیج فایل انتخاب نمایید .
  6. صفحه جدید Task.aspx در نمای کد Source باز می شود .
  7. ID کنترل Content اول در فایل Task.aspx را به مقدار " leftcolumn " و ID کنترل Content دوم را به مقدار " rightcolumn " تغییر دهید . این کار باعث اتصال این کنترل ها به کنترل های مرتبط ContentPalceHolder در فایل مسترپیج فرزند می شود .
  8. محتویات مورد نظر خود را به صفحه محتوا Task.aspx اضافه نمایید .
  9. کلیدهای Ctrl + F5 را برای اجرای وب سایت فشار دهید .

راهنمایی : هنگامی که صفحه بالا می آید ، توجه داشته باشید که این صفحه ترکیبی از المنت های مسترپیج مادر ( بنر ، منو و لوگو ) ، دو ستون تعیین شده در مسترپیج فرزند و محتویات درونی خود فایل Task.aspx است .

دانلود فایل عملی پروژه و نسخه PDF راهکار



راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1 حمایت نمایید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟      
حمایت از سایت Developer1