تبلیغات متنی و بنر

راهکارهای موثر در ASP.Net > راهکار 3 - 4 : ایجاد چندین تم با قابلیت انتخاب توسط کاربر در ASP.Net

مقدمه :

این راهکار نحوه ساخت یک صفحه ASP.Net را به شما آموزش می دهد ، که در آن کاربر می تواند از بین چندین تم آماده شده و موجود ، یکی را برای نمایش در صفحه انتخاب نماید .
گرچه در این راهکار برای آموزش مطلب از یک کنترل Skin تکی و یک فایل ساده استایل شیت CSS استفاده می کنیم ، اما نحوه کلی و شالوده کار برای پروژه های بزرگتر و تم های سنگین نیز به همین منوال است .
مطاب آموزش داده شده در این راهکار عبارتند از :

  • طراحی یک تم ( Theme ) در ویژوال استودیو که شامل یک کنترل Skin و یک فایل CSS است .
  • طراحی یک صفحه مسترپیج ASP.Net که از تم استفاده می کند .
  • طراحی یک صفحه ASP.Net که از یک مسترپیج تم دار استفاده می کند .
  • طراحی یک کنترل کادر کشویی ( drop-down list ) ، که کاربر می تواند تم موردنظر خود را از درون آن انتخاب کند .
  • اجرای صفحه و انتخاب تم های مختلف .

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

پیش نیازها :

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

  1. Microsoft Visual Studio .
  2. آشنایی با نحوه کار با نرم افزار ویژوال استودیو .

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

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

مرحله دوم - طراحی یک تم :

یک تم مجموعه ای از خواص است که به شما امکان می دهد تا ظاهر و نمای کلی یک صفحه و اجزای آن را تعیین نمایید .
تم ها از چندین المنت مختلف مثل کنترل های Skin ، فایل های CSS ، تصاویر و ... تشکیل شده اند . در این راهکار شما از یک Skin و فایل استایل شیت برای ایجاد تم استفاده می کنید . تم ها در پوشه های مخصوصی در ساختار سایت های ASP.Net به نام  پوشه App_Theme و زیر مجموعه های آن قرار می گیرند .

نحوه طراحی یک تم :

  1. در منوی Solution Explorer ، بر روی نام وب سایت یا پروژه خود کلیک راست کرده و گزینه Add ASP.NET Folder را باز نموده و پوشه Theme را به سایت اضافه کنید .
    پوشه ای به نام App_Themes که یک پوشه فرزند جدید به نام Theme1 درون آن قرار دارد ، به سایت اضافه می شود .
  2. نام پوشه Theme1 را به Blue تغییر دهید .
  3. بر روی پوشه Blue کلیک راست کرده و و گزینه Add New Item را بزنید . پنجره Add New Item مطابق تصویر زیر باز می شود :
  4. از پنجره باز شده یک فایل Skin File را انتخاب کرده و نام آن را default.skin تعیین نموده و گزینه Add را بزنید .
  5. مجددا بر روی پوشه Blue کلیک راست کرده و گزینه Add New Item را بازهم انتخاب کنید .
  6. از پنجره باز شده ، نوع فایل Style Sheet را انتخاب کرده و نام آن را default.css تعیین نموده و گزینه Add را بزنید .

اولین تم با یک فایل CSS و یک فایل Skin خالی به پروژه اضافه شده است . در مراحل بعدی تنظیمات لازم و کدهای لازم را در این فایل ها قرار خواهیم داد . اما قبل از آن نیاز داریم تا صفحه ASP.Net ای را طراحی کنیم ، تا شامل چندین کنترل سرور و کدهای HTML باشد تا تم به آن اعمال شود .

ایجاد یک مسترپیج Master Page :

برای نشان دادن اینکه یک تم می تواند هم به یک مسترپیج و هم به صفحه یا صفحاتی که از آن مسترپیج استفاده می کنند ، اعمال شود ، در این مرحله یک مسترپیج را طراحی می کنیم تا با فایل Default.apsx به کار رود .

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

  1. در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را کلیک نمایید .
  2. در زیر بخش Visual Studio installed templates ، گزینه Master Page را انتخاب کرده و نام آن را Master1.master تعیین کنید .
  3. در لیست Language ، زبان برنامه نویسی مورد نظر خود را انتخاب نمایید .
  4. علامت گزینه Place code in separate file را برداشته و گزینه Add را بزنید .
    راهنمایی : صفحه Master Page جدید در نمای کد Source باز می شود . توجه داشته باشید که در بالای صفحات مسترپیج @ Master قرار دارد ، بر خلاف صفحات ASP.Net که اعلان آن به صورت @ Page است .
    بخش body مسترپیج شامل کنترلی به نام asp:contentplaceholder با ID برابر با ContentPlaceHolder1 می باشد ، که در برگیرنده بخشی از صفحه مسترپیج بوده که بخش قابل تعویض و متغیر هر صفحه زیر مجموعه آن ( Content Page ) در آن قرار می گیرد . در مراحل بعدی بیشتر با نحوه کار این کنترل آشنا خواهید شد . کد پیش فرض فایل مستر پیج در تصویر زیر نمایش داده شده است :

طراحی مسترپیج :

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

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

فایل Master1.master را انتخاب نمایید . متن بین تگ form را در فایل مسترپیج پاک کرده و به جای آن کد زیر را وارد نمایید .
نکته : توجه داشته باشید که کد زیر ، کنترل placeholder را درون یک جدول قرار می دهد ، به جای اینکه بین تگ div باشد ( برخلاف حالت پیش فرض مسترپیج قبل ).

کد <table width="100%" cellspacing="0" cellpadding="0" border="0" class="header">
   <tr>
      <td class="title">Switchable Themes Example</td>
   </tr>
   <tr>
      <td> <hr /> </td>
   </tr>
   <tr>
      <td>
         <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
         </asp:contentplaceholder>
      </td>
   </tr>
   <tr>
      <td>  <hr />  </td>
   </tr>
</table>

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

فایل مسترپیج ، قالب کلی صفحاتی که به آن وصل می شوند ( Content Pages یا صفحات محتوا ) را تعیین می کند . صفحه های محتوا ، صفحات ساده ASP.Net ای هستند که فقط شامل کدهای معمولی بوده و با صفحه مسترپیج ترکیب می شوند . در واقع صفحه خروجی ، ترکیبی از مسترپیج و صفحه محتوا است .
صفحه محتوا در این راهکار ، از تم ای که برای مسترپیج آن در مراحل قبل تعیین کرده ایم ، استفاده می کند . این صفحه دارای یک عنوان ، یک کنترل placeholder و یک کنترل drop-down list است . همچنین در بخش اعلان صفحه یا @ Page ، به وسیله خاصیت MasterPageFile ، نام فایل مسترپیج را برای آن تعیین می کنیم .

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

  1. در منوی Solution Explorer بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب کنید .
  2. از زیر بخش Visual Studio installed templates ، گزینه Web Form را انتخاب نموده و نام آن Home.aspx قرار دهید .
  3. در بخش لیست زبان ها Languages ، زبان برنامه نویسی مورد نظر خود را انتخاب نمایید .
  4. همچنین گزینه Select Master Page را علامت زده و گزینه Add را کلیک نمایید .

    کادر Select Master Page باز می شود . از لیست باز شده ، فایل Master1.master را به عنوان مسترپیج مورد نظرتان انتخاب کرده و Ok را بزنید .

  5. یک فایل جدید با نام Home.aspx ، ایجاد می شود . این صفحه به وسیله خاصیت MasterPageFile در بخش اعلان صفحه @ Page ، به فایل مسترپیج مربوط به آن متصل شده است . همانند کد زیر :
    VB کد <%@ Page Language="VB"    MasterPageFile="~/Master1.master" ... %>
    C# کد <%@ Page Language="C#"   MasterPageFile="~/Master1.master" ... %>
  6. همچنین صفحه داری یک کنترل به نام <asp:Content> است که محتویات مورد نظر خود برای آن صفحه را ، درون آن قرار می دهید .

اضافه کردن محتوا به صفحه محتویات ( Content Page ) :

یک صفحه محتوا ( Content Page ) شامل المنت های معمولی که یک صفحه ساده ASP.Net را می سازند ، مثل html ، body ، form و ... نمی شوند .
به جای آن ، تمامی محتویات که می خواهید صفحه محتوا نمایش دهد را درون کنترل placeholder قرار می دهید .
در این مثال ، به صفحه محتوا یک المنت h1 و h2 ، یک پاراگراف و یک کنترل کشویی drop-down list را برای انتخاب تم اضافه می کنیم .

اضافه کردن محتوا به صفحه home page :

  1. کد زیر را درون تگ باز و بسته کنترل <asp:Content> با ID برابر با Content2 یا دوم قرار دهید :
    کد <h1 id="title1">
          عنوان صفحه
    </h1>
    <br />
    <h2 id="title2">
          محتویاتی برای صفحه
    </h2>
    <p>
          یک رنگ را برای اعمال تم آن از کادر کشویی انتخاب نمایید
    </p>
    <br />
    <asp:DropDownList ID="ddlThemes" runat="server" AutoPostBack="true">
          <asp:ListItem Value="Blue"> Blue </asp:ListItem>
          <asp:ListItem Value="Red"> Red </asp:ListItem>
          <asp:ListItem Value="Green"> Green </asp:ListItem>
    </asp:DropDownList>
  2. کد زیر را نیز به صفحه اضافه نمایید تا تم انتخاب شده توسط کنترل drop-down list ، را به صفحه اعمال کند . این کد بایستی در صفحه محتوا پس از خط اعلان صفحه @ Page قرار بگیرد .
    VB کد <script runat="server">
         Public Sub Page_PreInit( )
            ' این کد تم صفحه را تعیین می کند
            Me.Theme = "Blue"
            If ((Not (Request.Form) Is Nothing) AndAlso (Request.Form.Count > 0)) Then
               Me.Theme = Me.Request.Form(5).Trim
            End If
        End Sub
    </script>
    C# کد <script runat="server">
        public void Page_PreInit( )
          {
              // این کد تم صفحه را تعیین می کند
              this.Theme = "Blue";
              if (Request.Form != null && Request.Form.Count > 0)
                     this.Theme = this.Request.Form[5].Trim();
          }
    </script>
  3. راهنمایی : توضیح کد اسکریپت :: تم در طی فرآیند تولید صفحه توسط رویداد PreInit فراخوانی و اعمال می شود . این رویداد قبل از رندر شدن صفحه رخ می دهد .
    فرم درخواست صفحه ( Page Request Form ) شامل آرایه ای از مقادیر است و آرایه با اندیس 4 ، شامل مقدار انتخاب شده در کنترل drop-down list می باشد . هر بار که صفحه رفرش شده یا باز می شود ، مقدار انتخاب شده در کنترل drop-down list ، به عنوان تم صفحه ، بر روی آن اعمال می شود .
    مرحله بعدی در این راهکار ، تعیین چندین تم برای انتخاب توسط کاربر است .

ویرایش تم Blue :

تم Blue ای که در مراحل قبل این راهکار ایجاد کردیم ، دارای 2 فایل CSS و Skin خالی است . در این مرحله می خواهیم بر حسب نیاز و سلیقه خود ، ویژگی ها و خواص مورد نطر را برای صفحه و کنترل های آن در این 2 فایل تعیین کنیم . برای این منظور مراحل زیر را انجام دهید :

  1. فایل default.skin را باز کرده و کد زیر را برای قالب دهی به کنترل drop-down list وارد نمایید :
    کد <asp:dropdownlist  runat="server" ForeColor="white" BackColor="Blue" />
  2. فایل default.css را از پوشه تم Blue باز کرده و کد زیر را برای قالب دهی جدول عنوان در مسترپیج وارد نمایید :
    کد table.header
       {
          background-color: Blue;
       }

    td.title
       {
          font-size: 1em;
          text-align: center;
          font-family: verdana;
          font-size: x-large;
          font-weight: bolder;
          color: Navy;
       }
  3. در مرحله بعدی کدهای CSS زیر را برای قالب بندی تگ های h1 و h2 که در صفحه محتوا هستند ، به فایل استایل شیت اضافه نمایید :
    کد h1
      {
        font-size: large;
        color: Navy;
      }

    h2
      {
        font-family: Verdana;
        font-size: medium;
        margin-top: 30;
        color: Navy;
      }
  4. در پایان نیز خواص لازم برای تگ های پاراگراف و خط های افقی ( hr ) را به وسیله کدهای زیر را تعیین نمایید :
    کد p
      {
        font-family: Verdana;
        font-size: small;
        color: Aqua;
        text-align: left;
      }

    hr
      {
        border: 0;
        border-top: 2px solid Aqua;
        height: 2px    ;
      }

اعمال و اتصال تم به صفحه :

برای اتصال و اعمال تم ایجاد شده به صفحه ، مراحل زیر را انجام دهید :

  1. فایل Home.apsx را در حالت کد Source باز نمایید .
  2. در بخش اعلان صفحه @ Page خاصیت StyleSheetTheme را معادل با نام تم اضافه نمایید . همانند کد زیر :
    VB کد <%@ Page Language="VB" MasterPageFile="~/Master1.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
    C# کد <%@ Page Language="C#" MasterPageFile="~/Master1.master" Title="Switchable Themes" StylesheetTheme="Blue" %>

امتحان کردن صفحه :

هم اکنون می توانید صفحه ASP.Net خود را همانند سایر صفحات دیگر ، اجرا و آزمایش نمایید .
برای این منظور کلیدهای CRTL + F5 را همزمان فشار دهید . ASP.Net صفحه محتوا یعنی ( Home.aspx ) را با مسترپیج آن یعنی ( Master1.master ) ترکیب کرده ، تم Blue را به آن اعمال نموده و خروجی را در صفحه نمایش می دهد .

طراحی چند تم اضافه دیگر :

تم Blue ، تم زیبا و مناسبی است ، اما هدف ما در این راهکار ارایه چندین تم به کاربر برای انتخاب یکی از میان آنهاست . می توانید فایل های CSS و Skin موجود در تم Blue را کپی کرده و در پوشه جدیدی بریزید . سپس مقادیر خواص و رنگ های آن را به مقادیر دلخواه و متفاوتی تغییر دهید . در طی مراحل زیر دو تم دیگر با نام های Red و Green طراحی خواهیم کرد :

طراحی دو تم اضافه دیگر :

  1. در منوی Solution Explorer ، بر روی پوشه App_Themes کلیک راست کرده ، از گزینه Add New Item ، یک پوشه جدید Theme را به پروژه اضافه نمایید . در ابتدا نام پوشه جدید Theme1 است ، آن را به Red تغییر دهید .
  2. پوشه Blue را انتخاب کرده ، فایل های default.skin و default.css را کپی کرده و در پوشه Red بریزید .
  3. مراحل 1 و 2 را برای ایجاد یک پوشه جدید دیگر به نام Green انجام دهید .
  4. مقادیر خواص های رنگی را در تم های Red و Green به رنگ های متناسب با نام آنها تغییر داده و تنظیم نمایید .
    برای مثال ، کد فایل CSS تم Green می تواند به صورت زیر به روز رسانی شود :
    کد p
      {
        font-family: Verdana;
        font-size: small;
        color: Teal;
        text-align: left;
      }

    hr
      {
        border: 0;
        border-top: 2px solid Teal;
        height: 2px;
      }

    h1
      {
        font-size: large;
        color: Green;
      }

    h2
      {
        font-family: Verdana;
        font-size: medium;
        margin-top: 30;
        color: Green;
      }

    table.header
      {
        background-color: Lime;
      }

    td.title
      {
        font-size: 1em;
        text-align: center;
        font-family: verdana;
        font-size: x-large;
        font-weight: bolder;
        color: Teal;
      }

مرحله آخر ، آزمایش مجموعه تم ها :

اکنون پروژه به طور کامل آماده شده و کنترل drop-down list ، می تواند برای انتخاب تم مورد نظرتان از میان تم های موجود به کار رود :

  1. به صفحه Home.apsx رفته و با زدن کلیدهای Ctrl + F5 ، صفحه را اجرا نمایید .
  2. یکی از تم های Red یا Green را از کادر کشویی کنترل drop-down lis انتخاب نمایید . مشاهده خواهید کرد که تم مورد نظر به صفحه و کنترل های موجود در آن اعمال می شود .

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


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

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

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

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟  
حمایت از سایت Developer1