راهکارهای موثر در ASP.Net > راهکار 4 - 4 : ایجاد و استفاده از مسترپیج ها در ویژوال
استودیو و ASP.Net
ایجاد یک صفحه جدید ASP.Net در ویژوال استودیو :
این راهکار نحوه ساخت یک مسترپیج و اتصال چندین صفحه محتوا به آن را آموزش می دهد .
مسترپیج یک صفحه قالب یک الگو است که می توانید از آن برای ساخت سریع صفحات دیگر (
صفحات محتوا Content Page ) استفاده نمایید . صفحه محتوا و صفحه مسترپیج در هنگام اجرا
با هم ترکیب شده و یک صفحه واحد را در خروجی می سازند .
مواردی که در این راهکار آموزش داده خواهند شد ، عبارتند از :
- ساخت یک صفحه مسترپیج
- ساخت یک یا چند صفحه محتوا و اتصال آنها به مسترپیج .
برای حمایت از این پروژه ، کتاب
راهکارهای موثر در ASP.Net را دانلود نمایید ...
پیش نیازها :
برای اجرای این راهکار نیاز دارید تا برنامه های زیر بر روی سایت شما نصب شده باشد
:
- Visual Studio.
- یک عکس برای بنر سایت با فرمت مناسب ..
مرحله اول - طراحی یک سایت ASP.Net :
در مرحله اول از راهکار بایستی یک سایت ASP.Net را برای اجرای پروژه خود ایجاد نمایید
. فرض بر این است که سایت را قبلا ایجاد کرده و یا با نحوه اجرای آن آشنایی دارید ،
در غیر اینصورت به راهکار شماره 1-1 : نحوه ایجاد یک وب سایت ASP.Net در ویژوال استودیو
بروید .
مرحله دوم - ساخت صفحه مسترپیج Master Page :
همانطور که گفتیم مسترپیج یک صفحه قالب یا الگو است که برای ساخت سایر صفحات از آن
استفاده می کنید . در این بخش ، شما ابتدا یک مسترپیج می سازید . سپس جدولی را در فایل
مسترپیج ایجاد می کنید که چهارچوب صفحه را برای قرار دادن یک منو ، یک لوگو به عنوان
هدر و یک فوتر footer تعیین می کند . این بخش ها در تمام صفحات ساخته شده از مسترپیج
تکرار خواهند شد .
سپس با یک کنترل content:placeholder کار می کنیم که بخشی از صفحه مسترپیج را تعیین
می کند ، که محتوای صفحات محتوا ، در آن قرار می گیرند .
نحوه ایجاد یک مسترپیج :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item
را انتخاب کنید .
پنجره Add New Item مطابق تصویر زیر باز می شود :
- در زیر بخش Visual Studio installed templates ، گزینه Master Page را انتخاب نموده
و نام آن را به Master1 تغییر دهید .
همچنین علامت گزینه Place code in separate file را تیک بزنید . ( باعث ایجاد یک فایل
کد پشت صفحه ، برای نوشتن کدهای ASP.Net می شود ).
- از قسمت Language زبان مورد نظر خود برای برنامه نویسی صفحه را انتخاب کرده و گزینه
Add را بزنید .
فایل جدید مسترپیج ساخته شده در حالت کد Source باز می شود .
دقت داشته باشید ، در بخش اعلان فایل مسترپیج Master@ به جای Page@ ( مطابق آنچه در
صفحات عادی ASP.Net وجود دارد ) قرار گرفته و در بدنه فایل نیز یک کنترل
ContentPlaceHolder می باشد ، که تعیین کننده ناحیه ای است که محتوای صفحات
متصل به مسترپیج در آنجا قرار گرفته و با صفحه ترکیب می شوند .
طراحی قالب کلی صفحه مسترپیج :
در این مرحله از راهکار قصد داریم تا قالب صفحه مسترپیج را طراحی کنیم . برای این منظور
از یک جدول در صفحه استفاده کرده ایم تا بتواند سایر المنت ها را به صورت مرتب در صفحه
بچینیم .
نحوه طراحی قالب برای صفحه مسترپیج توسط یک table :
- فایل Master1.master را باز کرده و به بنای Design بروید .
- در وسط صفحه کلیک نمایید تا در حالت انتخاب قرار بگیرید . سپس از منوی Properties برنامه
مقدار خاصیت BgColor صفحه را به یک رنگ دلخواه مثل Blue تغییر دهید تا رنگ پس زمینه
آن مشخص شود .
- در مکانی که می خواهید جدول را قرار دهید ، کلیک نمایید ( جدول را درون کنترل ContentPlaceHolder قرار ندهید ) .
- از منوی ، Table برنامه ، گزینه Insert Table را انتخاب کرده و جدولی را با 3 ردیف
و یک ستون ساخته و با زدن کلیک Ok ، آن را به صفحه اضافه نمایید .
- موس را درون سطر دوم جدول برده و کلیک نمایید . از منوی Table زیر منوی Modify را باز
کرده و با انتخاب گرینه Split Cells ، سطر را به دو ستون تبدیل کنید .
- تنظیمات زیر را در جدول انجام دهید :
- در ردیف وسط ، ستون سمت چپ را انتخاب کرده و در منوی Properties عرض آن را به 200 پیکسل
تغییر دهید .
- مقدار خاصیت Height ، سطرهای بالا و پایین را نیز 48 پیکسل تعیین کنید .
- کل جدول ( تمامی خانه های ) آن را انتخاب کرده و رنگ پس زمینه BgColor آن را به رنگی
متفاوت با رنگ پس زمینه عنصر تغییر دهید .
پس از طراحی کلی قالب جدول ، اکنون می توانید محتویات ثابتی که می خواهید در تمام صفحات
نمایش داده شوند را در خانه های جدول قرار دهید .
برای این منظور یک logo برای سایت را در سطر اول ، یک منو را در سطر دوم ستون سمت راست
و یک متن ثابت برای footer تعیین می کنیم .
نحوه اضافه کردن اجزای ثابت به مسترپیج :
- ردیف پایین جدول را انتخاب کرده و یک متن به عنوان footer مثل Copyright ، در آن تایپ
کنید .
- از منوی Toolbox و از بخش Navigation ، یک کنترل Menu را درگ کرده و در ستون بالایی
قرار دهید .
- برای طراحی منو سایت مراحل زیر را انجام دهید :
- مقدار خاصیت Orientation کنترل Menu را به Horizontal تغییر دهید .
- گزینه smart tag کنترل منو را که به صورت یک فلش بر روی آن قرار دارد را کلیک کرده
و سپس گزینه Edit Menu Items را از لیست Menu Tasks را انتخاب کنید .
کادر محاوره ای Edit Menu Items باز می شود .
- از کادر محاوره ای Edit Menu Items ، در بخش Items ، گزینه Add a root node را دوبار
برای اضافه کردن آیتم های منو کلیک نمایید :
- گره اول را کلیک کرده ، مقدار خاصیت Text آن را به Home و مقدار خاصیت NavigateUrl
آن را به Default.apsx تغییر دهید .
- گره اول را کلیک کرده ، مقدار خاصیت Text آن را به About و مقدار خاصیت NavigateUrl
آن را به About.apsx تغییر دهید .
- گزینه Ok را بزنید ، تا کادر Menu Item Editor بسته شود .
- برای قرار دادن یک فایل تصویری به عنوان لوگو سایت نیز مراحل زیر را انجام دهید :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add Existing
Item را کلیک نمایید .
- از منوی باز شده ، به میر عکس یا لوگو مورد نظر خود رفته ، آن را انتخاب نموده و گزینه
Add را بزنید .
- از قسمت Standard منوی Toolbox ، یک کنترل Image را کشیده و در ستون سمت چپ جدول قرار
دهید ..
- مقدار خاصیت ImageUrl کنترل Image را برابر با آدرس عکس جدیدی که به سایت خود اضافه
کردید ، قرار دهید .
پس از انجام مراحل فوق ، زمان تعیین محل قرارگیری کنترل content placeholder بر روی
صفحه مسترپیج است . محتویات صفحه های متصل به مسترپیج که با عنوان صفحات محتوا ( Content
Page ) از آنها نام می بریم ، در محل این کنترل در صفحه مسترپیج در هنگام اجرا قرار
می گیرند .
تنظیم محل قرار گرفتن کنترل content placeholder :
- کنترل content placeholder را درگ کرده و در ستون سمت چپ قرار دهید .
راهنمایی : توجه داشته باشید که ID این کنترل ContentPalceHolder1
است ، می توانید این ID را تغییر داده و یا بدون تغییر رها نمایید .
- صفحه را ذخیره کنید .
طراحی صفحات محتوا ( Content Pages ) :
در مرحله قبل صفحه الگو یا مسترپیج را طراحی کردیم . اکنون قالب سایت ما آماده بوده
و می توانید سایر صفحات محتوا را تولید کرده و با اتصال آنها به صفحه مسترپیج ، در
هنگام اجرا ، دو صفحه را ترکیب کرده و خروجی نهایی را تولید کنیم .
صفحاتی که به صفحه مسترپیج متصل می شوند را صفحات محتوا ( Content Page ) می نامیم
. این صفحات دارای فرمت aspx. بوده ، ولی برخلاف صفحات معمولی ASP.Net دارای المنت
های اصلی HTML مثل html , head , body و ... نیستند .
این صفحات فقط از یک بخش اعلان در بالای صفحه ( Page@ ) و یک یا چندین کنترل ContentPalceHolder
، برای قرار دادن محتویات مورد نظرتان تشکیل می شوند . شما می توانید هر گونه کد یا
المنت HTML ، اسکریپت و حتی کنترل های سرور ASP.Net را درون کنترل های ContentPalceHolder
صفحات محتوا قرار دهید .
در این راهکار ما دو صفحه محتوا به نام های Default.aspx و About.aspx را طی مراحل
زیر ایجاد می کنیم :
- در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item
را بزنید .
- پنجره Add New Item ، باز می شود . از بخش Visual Studio installed templates ، گزینه
Web Form را انتخاب کرده و نام آن را بدون تغییر Default.apsx بگذارید .
- از بخش Language ، زبان برنامه نویسی خود را برای صفحه انتخاب کنید .
- علامت گزینه Select master page را زده و گزینه Add را فشار دهید . کادر Select Master
Page مطابق تصویر زیر باز می شود :
- از کادر فوق ، فایل Master1.master را انتخاب کرده و Ok نمایید . برنامه صفحه جدید
Default.aspx را ساخته و در نمای Source نمایش می دهد .
اضافه کردن محتوا به صفحه Default.aspx :
- در نمای کد Source ، در بخش اعلان صفحه Page@ مقدار خاصیت Title که عنوان صفحه در بالای
مرورگر را تعیین می کند ، برابر با " Developer Home Page " قرار دهید .
توجه داشته باشید که عنوان هر صفحه محتوا ، درون بخش اعلان خود آن صفحه تعیین می شود
نه در فایل مسترپیج .
- به نمای Design بروید .
کنترل ContentPlaceHolder در صفحه مسترپیج ، تحت عنوان کنترل Content در صفحه محتوا
نمایش داده می شود . بقیه اجزای صفحه مسترپیج در نمای Design صفحه دیده شده و شما می
توانید قالب کلی صفحه را مشاهده نمایید . اما ، این بخش به صورت کم رنگ تر از سایر
قسمت هاست ، زیرا نمی توانید محتویات آن را از درون صفحات Content تغییر دهید . همچنین
علامت موس در هنگام عبور از روی آن به صورت تابلو ورود ممنوع در می آید .
- درون کنترل Content ای که معادل با ContentPlaceHolder در مسترپیج است ، عبارت " Welcome
to the Developer1 Web Site " را تایپ نمایید ( به عنوان یک تیتر برای صفحه).
می توانید درون این کنترل هر محتوای دیگری که می خواهید به صفحه اضافه نمایید را نیز
قرار دهید . در پایان کار صفحه را ذخیره نموده و ببندید .
طراحی صفحه About.apsx :
از روشی مشابه برای ایجاد صفحه About.aspx نیز استفاده می کنیم . مراحل 1 و 2 را برای
این صفحه نیز انجام دهید . سپس کارهای زیر را انجام دهید :
- عنوان صفحه را به عبارت " Developer1 About Page " تععین نمایید .
- مقدار متن درون صفحه را به یک متن دلخواه خود تغییر دهید . سپس صفحه را ذخیره نمایید
.
تست پروژه و اجرای صفحات :
اکنون که طراحی صفحه مسترپیج و صفحات محتوا به پایان رسید ، می توانید آنها را اجرا
نموده و تست کنید . برای این منظور مراحل زیر را انجام دهید :
- صفحه Default.apsx را باز کرده و با زدن کلیدهای Ctrl + F5 آن را اجرا نمایید . برنامه
فایل Default.aspx را با فایل Master1.master ، ادغام کرده و به صورت یک فایل در خروجی
نمایش می دهد .
- در صفحه Default.aspx بر روی لینک صفحه About کلیک نمایید . آن صفحه نیز به صورت ادغام
شده و کامل باز می شود .
دانلود فایل عملی پروژه و نسخه PDF راهکار
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :