آموزش ASP.Net به زبان ساده   >   آموزش مدل فرم های وب ASP.Net Web Forms
درس هفدهم : آموزش کار با صفحات مسترپیج یا الگو در ASP.Net

مقدمه و معرفی مسترپیج ( Master Pages ) :

از صفحات مسترپیج در ASP.Net می توان برای تعیین یک قالب یا الگو پیش ساخته ، جهت طراحی صفحات وب استفاده نمود .
برای مثال همین سایت ما ، از امکان مسترپیج ها استفاده می کند . اگر دقت کرده باشید ، محتویات صفحات هر بخش ( مثلا صفحات بخش ASP.Net ) همگی دارای ساختار یکسانی می باشند . در تمامی صفحات هدر ، نوار منو و تبلیغی سمت راست و فوتر یکسان بوده و ففط محتویات بخش مرکزی در هر صفحه تغییر می کند .
در این صفحات ، بخش های مشترک توسط یک مسترپیج یا الگو ایجاد شده و اجزای متغیر توسط صفحات محتوا ( Content ) تعیین می گردند .
عملکرد این صفحات به این گونه است که مرورگر دز هنگام اجرای صفحه ، قالب کلی را از صفحه مسترپیج و محتویات را از صفحه محتوای تعیین شده ، دریافت کرده و با ترکیب آنها یک صفحه واحد را به عنوان خروجی نمایش می دهد .
مسترپیج ها بسیار سودمند بوده و سرعت طراحی صفحات را بسیار افزایش می دهند . زیرا مجبور نیستید هر بار محتویات تکراری را مجددا در صفحات وارد نمایید . از طرف دیگر ، به وسیله مسترپیج ها می توانید تغییرات مورد نظر خود را در صفحات اعمال کنید . کافی است تغییر مورد نظر را در کد صفحه مسترپیج ایجاد نموده ، سپس این تغییر در تمامی صفحات متصل به آن اعمال می شود .
مسترپیج ها از کنترل هایی به نام asp:ContentPlaceHolder استفاده نموده که در مرحله بعد به تشریح آنها خواهیم پرداخت .

آموزش ایجاد و کار با مسترپیج ها در ASP.Net :

کد زیر ، یک صفحه مسترپیج معمولی را نشان می دهد . اولین تفاوت این نوع صفحه با صفحات معمولی ASP.Net ، وجود اعلان <% @ Master %> در بالای صفحه به جای اعلان <% @ Page %> می باشد . به کد مسترپیج زیر دقت نمایید ، سپس به توضیح آن خواهیم پرداخت :

کد <%@ Master %>

<html>
  <body>
         <h1> هدر تعیین شده در صفحه مسترپیج</h1>
         <asp:ContentPlaceHolder id="CPH1" runat="server">
         </asp:ContentPlaceHolder>

  </body>
</html>

صفحه مسترپیج فوق ، شامل یک کنترل نگهدارنده یا PlaceHolder که دارای id برابر با " CPH1 " است . هر کنترل PlaceHolder در یک صفحه مسترپیج می تواند جایگاه قرار گیری و اتصال یک صفحه محتوا باشد . در یک مسترپیج می توانید چندین کنترل PlaceHolder را به کار ببرید .
صفحه مسترپیج فوق را با نام " Master1.master " ذخیره می کنیم .

آموزش ایجاد و اتصال صفحات محتوا به مسترپیج ها در ASP.Net :

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

کد <%@  Page   MasterPageFile="master1.master" %>

<asp:Content ID="Content2" ContentPlaceHolderId="CPH1" runat="server">
    <h2> محتویات صفحه محتوا </h2>
    <p> پاراگراف فرضی  1 </p>
    <p> پاراگراف فرضی  2 </p>

</asp:Content>

توضیح کد صفحه محتوا و ارتباط آن با مسترپیج

  • در خط اول یک اعلان <% @ Page > وجود دارد که بیانگر این است که این صفحه یک صفحه معمولی ASP.Net است . سپس توسط خاصیت MasterPageFile به صفحه مسترپیج متصل شده است . این خاصیت ، برای اتصال صفحه محتوا به صفحه مسترپیج به کار می رود .
  • این صفحه نیز دارای یک کنترل asp:Content با id برابر با " CPH1 " ( همان id کنترل PlaceHolder در صفحه مسترپیج ) می باشد . محتویات و تگ های درون این کنترل در محل کنترل PlaceHolder صفحه مسترپیج نشسته و با سایر محتویات آن ترکیب می شود تا صفحه ای واحد را تشکیل دهند .
  • نام صفحه محتوا را myPage1.aspx تعیین کرده ایم .

نکته مهم : تمامی تگ ها و محتویات در صفحه محتوا ، بایستی درون تگ باز و بسته کنترل asp:Content قرار بگیرند ، در غیر اینصورت خطا رخ می دهد .

مشاهده خروجی ترکیب دو صفحه محتوا و مسترپیج :

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

خروجی صفحه محتوا ( متصل به مسترپیج )

صفحه محتوا با محتویات بیشتر :

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

کد <%@  Page   MasterPageFile="master1.master" %>

<asp:Content ID="Content2" ContentPlaceHolderId="CPH1" runat="server">
     <h2> Developer 1 </h2>
     <form id="Form1" runat="server">
       
 <asp:TextBox id="textbox1" runat="server" />
         <asp:Button id="button1" runat="server" text="Button" />

      </form>

</asp:Content>
خروجی مشاهده خروجی مثال


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


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

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

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