آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server
آموزش طراحی وب ، برنامه نویسی و کامپیوتر مشهد
بازار کار آنلاین
عینک مخصوص کامپیوتر 
 = دوره های آموزشگاه تحلیل داده     88446780      88146330       88146323 =
برگزاری دوره های تخصصی برنامه نویسی و طراحی وب و موبایل
به صورت خصوصی و گروهی با همکاری Developer1.ir
دوره کارگاه عملی وپیشرفته آموزش ASP.NET دوره آموزش MVC.NET 5.2 همراه با BootStrap AJAX
دوره آموزش برنامه نویسی آندروید دوره کارگاه عملی آموزش PHP
دوره آموزش برنامه نویسی #C دوره آموزش Sql Server 2012
دوره آموزش Entity Framework دوره آموزش PHP پيشرفته

راهکارهای موثر در 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