آموزش 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
حمایت نمایید :