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

ایجاد یک صفحه جدید ASP.Net در ویژوال استودیو :

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

  • ساخت یک صفحه مسترپیج
  • ساخت یک یا چند صفحه محتوا و اتصال آنها به مسترپیج .

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

پیش نیازها :

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

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

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

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

مرحله دوم - ساخت صفحه مسترپیج Master Page :

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

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

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

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

طراحی قالب کلی صفحه مسترپیج :

در این مرحله از راهکار قصد داریم تا قالب صفحه مسترپیج را طراحی کنیم . برای این منظور از یک جدول در صفحه استفاده کرده ایم تا بتواند سایر المنت ها را به صورت مرتب در صفحه بچینیم .

نحوه طراحی قالب برای صفحه مسترپیج توسط یک table :

  1. فایل Master1.master را باز کرده و به بنای Design بروید .
  2. در وسط صفحه کلیک نمایید تا در حالت انتخاب قرار بگیرید . سپس از منوی Properties برنامه مقدار خاصیت BgColor صفحه را به یک رنگ دلخواه مثل Blue تغییر دهید تا رنگ پس زمینه آن مشخص شود .
  3. در مکانی که می خواهید جدول را قرار دهید ، کلیک نمایید ( جدول را درون کنترل ContentPlaceHolder قرار ندهید ) .
  4. از منوی ، Table برنامه ، گزینه Insert Table را انتخاب کرده و جدولی را با 3 ردیف و یک ستون ساخته و با زدن کلیک Ok ، آن را به صفحه اضافه نمایید .
  5. موس را درون سطر دوم جدول برده و کلیک نمایید . از منوی Table زیر منوی Modify را باز کرده و با انتخاب گرینه Split Cells ، سطر را به دو ستون تبدیل کنید .
  6. تنظیمات زیر را در جدول انجام دهید :
    1. در ردیف وسط ، ستون سمت چپ را انتخاب کرده و در منوی Properties عرض آن را به 200 پیکسل تغییر دهید .
    2. مقدار خاصیت Height ، سطرهای بالا و پایین را نیز 48 پیکسل تعیین کنید .
  7. کل جدول ( تمامی خانه های ) آن را انتخاب کرده و رنگ پس زمینه BgColor آن را به رنگی متفاوت با رنگ پس زمینه عنصر تغییر دهید .
    پس از طراحی کلی قالب جدول ، اکنون می توانید محتویات ثابتی که می خواهید در تمام صفحات نمایش داده شوند را در خانه های جدول قرار دهید .
    برای این منظور یک logo برای سایت را در سطر اول ، یک منو را در سطر دوم ستون سمت راست و یک متن ثابت برای footer تعیین می کنیم .

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

  1. ردیف پایین جدول را انتخاب کرده و یک متن به عنوان footer مثل Copyright ، در آن تایپ کنید .
  2. از منوی Toolbox و از بخش Navigation ، یک کنترل Menu را درگ کرده و در ستون بالایی قرار دهید .
  3. برای طراحی منو سایت مراحل زیر را انجام دهید :
    • مقدار خاصیت Orientation کنترل Menu را به Horizontal تغییر دهید .
    • گزینه smart tag کنترل منو را که به صورت یک فلش بر روی آن قرار دارد را کلیک کرده و سپس گزینه Edit Menu Items را از لیست Menu Tasks را انتخاب کنید .
      کادر محاوره ای Edit Menu Items باز می شود .
  4. از کادر محاوره ای Edit Menu Items ، در بخش Items ، گزینه Add a root node را دوبار برای اضافه کردن آیتم های منو کلیک نمایید :
    • گره اول را کلیک کرده ، مقدار خاصیت Text آن را به Home و مقدار خاصیت NavigateUrl آن را به Default.apsx تغییر دهید .
    • گره اول را کلیک کرده ، مقدار خاصیت Text آن را به About و مقدار خاصیت NavigateUrl آن را به About.apsx تغییر دهید .
  5. گزینه Ok را بزنید ، تا کادر Menu Item Editor بسته شود .
  6. برای قرار دادن یک فایل تصویری به عنوان لوگو سایت نیز مراحل زیر را انجام دهید :
    • در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add Existing Item را کلیک نمایید .
    • از منوی باز شده ، به میر عکس یا لوگو مورد نظر خود رفته ، آن را انتخاب نموده و گزینه Add را بزنید .
    • از قسمت Standard منوی Toolbox ، یک کنترل Image را کشیده و در ستون سمت چپ جدول قرار دهید ..
    • مقدار خاصیت ImageUrl کنترل Image را برابر با آدرس عکس جدیدی که به سایت خود اضافه کردید ، قرار دهید .

پس از انجام مراحل فوق ، زمان تعیین محل قرارگیری کنترل content placeholder بر روی صفحه مسترپیج است . محتویات صفحه های متصل به مسترپیج که با عنوان صفحات محتوا ( Content Page ) از آنها نام می بریم ، در محل این کنترل در صفحه مسترپیج در هنگام اجرا قرار می گیرند .

تنظیم محل قرار گرفتن کنترل content placeholder :

  1. کنترل content placeholder را درگ کرده و در ستون سمت چپ قرار دهید .
    راهنمایی : توجه داشته باشید که ID این کنترل ContentPalceHolder1 است ، می توانید این ID را تغییر داده و یا بدون تغییر رها نمایید .
  2. صفحه را ذخیره کنید .

طراحی صفحات محتوا ( Content Pages ) :

در مرحله قبل صفحه الگو یا مسترپیج را طراحی کردیم . اکنون قالب سایت ما آماده بوده و می توانید سایر صفحات محتوا را تولید کرده و با اتصال آنها به صفحه مسترپیج ، در هنگام اجرا ، دو صفحه را ترکیب کرده و خروجی نهایی را تولید کنیم .
صفحاتی که به صفحه مسترپیج متصل می شوند را صفحات محتوا ( Content Page ) می نامیم . این صفحات دارای فرمت aspx. بوده ، ولی برخلاف صفحات معمولی ASP.Net دارای المنت های اصلی HTML مثل html , head , body و ... نیستند .
این صفحات فقط از یک بخش اعلان در بالای صفحه ( Page@ ) و یک یا چندین کنترل ContentPalceHolder ، برای قرار دادن محتویات مورد نظرتان تشکیل می شوند . شما می توانید هر گونه کد یا المنت HTML ، اسکریپت و حتی کنترل های سرور ASP.Net را درون کنترل های ContentPalceHolder صفحات محتوا قرار دهید .
در این راهکار ما دو صفحه محتوا به نام های Default.aspx و About.aspx را طی مراحل زیر ایجاد می کنیم :

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را بزنید .
  2. پنجره Add New Item ، باز می شود . از بخش Visual Studio installed templates ، گزینه Web Form را انتخاب کرده و نام آن را بدون تغییر Default.apsx بگذارید .
  3. از بخش Language ، زبان برنامه نویسی خود را برای صفحه انتخاب کنید .
  4. علامت گزینه Select master page را زده و گزینه Add را فشار دهید . کادر Select Master Page مطابق تصویر زیر باز می شود :
  5. از کادر فوق ، فایل Master1.master را انتخاب کرده و Ok نمایید . برنامه صفحه جدید Default.aspx را ساخته و در نمای Source نمایش می دهد .

اضافه کردن محتوا به صفحه Default.aspx :

  1. در نمای کد Source ، در بخش اعلان صفحه Page@ مقدار خاصیت Title که عنوان صفحه در بالای مرورگر را تعیین می کند ، برابر با " Developer Home Page " قرار دهید .
    توجه داشته باشید که عنوان هر صفحه محتوا ، درون بخش اعلان خود آن صفحه تعیین می شود نه در فایل مسترپیج .
  2. به نمای Design بروید .
    کنترل ContentPlaceHolder در صفحه مسترپیج ، تحت عنوان کنترل Content در صفحه محتوا نمایش داده می شود . بقیه اجزای صفحه مسترپیج در نمای Design صفحه دیده شده و شما می توانید قالب کلی صفحه را مشاهده نمایید . اما ، این بخش به صورت کم رنگ تر از سایر قسمت هاست ، زیرا نمی توانید محتویات آن را از درون صفحات Content تغییر دهید . همچنین علامت موس در هنگام عبور از روی آن به صورت تابلو ورود ممنوع در می آید .
  3. درون کنترل Content ای که معادل با ContentPlaceHolder در مسترپیج است ، عبارت " Welcome to the Developer1 Web Site " را تایپ نمایید ( به عنوان یک تیتر برای صفحه).
    می توانید درون این کنترل هر محتوای دیگری که می خواهید به صفحه اضافه نمایید را نیز قرار دهید . در پایان کار صفحه را ذخیره نموده و ببندید .

طراحی صفحه About.apsx :

از روشی مشابه برای ایجاد صفحه About.aspx نیز استفاده می کنیم . مراحل 1 و 2 را برای این صفحه نیز انجام دهید . سپس کارهای زیر را انجام دهید :

  1. عنوان صفحه را به عبارت " Developer1 About Page " تععین نمایید .
  2. مقدار متن درون صفحه را به یک متن دلخواه خود تغییر دهید . سپس صفحه را ذخیره نمایید .

تست پروژه و اجرای صفحات :

اکنون که طراحی صفحه مسترپیج و صفحات محتوا به پایان رسید ، می توانید آنها را اجرا نموده و تست کنید . برای این منظور مراحل زیر را انجام دهید :

  1. صفحه Default.apsx را باز کرده و با زدن کلیدهای Ctrl + F5 آن را اجرا نمایید . برنامه فایل Default.aspx را با فایل Master1.master ، ادغام کرده و به صورت یک فایل در خروجی نمایش می دهد .
  2. در صفحه Default.aspx بر روی لینک صفحه About کلیک نمایید . آن صفحه نیز به صورت ادغام شده و کامل باز می شود .

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



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


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

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

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