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

راهکارهای موثر در ASP.Net > راهکارهای ساخت منو و سیستم های مسیریاب

 راهکار 1 - 3 : نمایش منو بر روی صفحات ASP.Net

مقدمه :

در این راهکار قصد داریم تا نحوه قرار دادن یک کنترل Menu و تنظیم آن برای نمایش فهرست محتویات سایت Asp.Net را آموزش دهیم . یکی از امکانات مناسبی که در هر سایت باید قرار بگیرد ، منو یا فهرست موضوعات سایت است . به وسیله کنترل Menu در Asp.Net و بدون نوشتن کد خاصی به راحتی می توانید منوی مورد نظر خود را بسازید . کنترل Menu انواع حالت های نمایش منو را چه بصورت استاتیک و چه بصورت داینامیک در اختیار شما قرار می دهد .
در حالت منوی استاتیک ، تمام شاخه های اصلی منو و زیر شاخه های آن باز بوده و کاربر قادر به مشاهده و کلیک بر روی آنهاست .
اما در حالت داینامیک معمولا سرعنوان ها فقط نمایش داده شده و با حرکت موس بر روی هر سرعنوان ، زیر منوی آن بصورت Pop-Up نمایش داده می شود .
کنترل Menu این امکان را می دهد که ترکیبی از هر دو حالت استاتیک و داینامیک را نیز بکار ببرید .

اما نحوه تعیین کردن موضوعات برای نمایش درفهرست Menu ؟! . شما می توانید منو ها و زیرمنوهای کنترل را بصورت از پیش تعیین شده در هنگام طراحی تعریف نمایید و یا اینکه کنترل را به یک منبع داده ای که دارای ساختار درختی و سلسله مراتبی است ، مثل XmlDataSource پیوند دهید .
در این راهکار موارد زیر آموزش داده خواهند شد :

  • ساخت یک منوی ساده و استاتیک و سپس اتصال هر عنوان به صفحه مربوطه .
  • ساخت یک منوی پیشرفته تر که برای دریافت فهرست موضوعات خود به یک فایل XML به نام Web.sitemap متصل می شود .
  • تنظیم جهت چیدمان و نمایش منو .
  • تلفیق منو های استاتیک با داینامیک و نمایش در هنگام اجرا .

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

پیش نیازها :

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

  1. Microsoft Visual Studio .
  2. Microsoft .NET Framework version 2.0 یا بالاتر ( همراه با ویژوال استودیو نصب می شود ) .

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

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

مرحله دوم - ساخت یک منوی ساده و ایستاتیک :

برای ساخت یک منوی ساده در صفحه مورد نظرمان مراحل زیر را انجام دهید :

  1.  صفحه مورد نظر را باز کرده و به حالت Design بروید .
  2. از منوی ToolBox و بخش Navigation یک کنترل Menu را کشیده و بر روی صفحه قرار دهید .
  3.  دراین مثال ، قصد داریم تا یک منوی افقی طراحی نماییم . بنابراین کنترل Menu را انتخاب کرده و از قسمت Properties ، مقدار خاصیت Orientation را بر روی Horizontal قرار دهید .

تنظیم کردن منوی قرار داده شده بر روی صفحه :

در این بخش ، بوسیله ویرایشگر Menu Item Editor، آیتم های کنترل منو را تنظیم می کنیم :

  1.  بر روی کنترل Menu راست کلیک کرده و سپس گزینه Edit Menu Items را انتخاب نمایید . پنجره Menu Item Editor، باز می شود .
  2.  در زیر قسمت Items ، آیکون Add a root item را انتخاب کنید .
  3.  در زیر قسمت Properties آیتم جدید ، مقدار خاصیت Text را بر روی Home و Navigate URL را به Default.aspx ، تغییر دهید .
  4.  مجددا با کلیک بر روی گزینه Add a root item ، یک آیتم جدید دیگر را به منو اضافه کنید .
  5. مقدار خاصیت Text آیتم جدید را بر روی Books و خاصیت Navigate آن را بر روی Books.aspx تعیین کنید .
  6. کار فوق را برای گزینه دیگر به نام Apps انجام داده و آدرس ضفحه مقصد را نیز Apps.aspx تعیین نمایید .
    حال اگر به بخش Design صفحه دقت نمایید ، آیتم هایی که برای کنترل Menu را تعیین کرده اید ، مشاهده خواهید کرد .
  7. صفحات Home.aspx ، Books.aspx و Apps.aspx را به پروژه خود اضافه نمایید . حال زمان تست کردن منوی ساخته شده است ، مراحل زیر را انجام دهید :
    1.  به صفحه اصلی یا Defalt.aspx رفته و کنترل های Ctrl + F5 را برای اجرای پروژه فشار دهید .
    2.  صفحه اجرا شده و کنترل Menu را با آیتم های تعیین شده بر روی صفحه مشاهده خواهید کرد .
    3.  موس را بر روی هر آیتم ببرید ، آدرس مقصد آیتم در منوی Status Bar مرورگر نمایش داده می شود . با کلیک بر روی هر گزینه به صفحه مقصد آن منتقل خواهید شد .

مرحله سوم - ساخت یک کنترل Menu متصل به یک فایل نقشه سایت ( Site Map ) :

در بخش قبل ، یک کنترل Menu ساده را ایجاد و آیتم های آن را به صورت دستی در هنگام Design صفحه تعیین کردیم . در این بخش قصد داریم تا به جای تعیین آیتم های کنترل Menu از قبل ، آن را به یک فایل نقشه سایت به عنوان یک XmlDataSource متصل کنیم . این کار به کنترل این امکان را می دهد که ساختار و آیتم های خود را از یک فایل مجزا XML در هنگام اجرای صفحه دریافت نماید . شما می توانید هر زمان که بخواهید فایل XML مورد استفاده را بدون نیاز یه کار با کنترل Menu ، آپدیت و به روز رسانی نمایید . سپس این تغییرات به صورت اتوماتیک در کنترل Menu اعمال می شود .
برای انجام این کار مراحل زیر را به ترتیب انجام دهید . در این مثال از یک کنترل Menu دوم استفاده می کنیم :

  1.  مجدد از منوی ToolBox و قسمت Navigation ، یک کنترل دیگر Menu را انتخاب کرده و بر روی صفحه قرار دهید .
  2.  اکنون ما به یک فایل نقشه سایت ( site map )  نیاز داریم . برای ایجاد این فایل مراحل زیر را انجام دهید :
    •  در منوی Solution Explorer ، بر روی نام وب سایت کلیک راست کرده و گزینه Add New Item را انتخاب کنید .
    •  از پنجره باز شده ، یک فایل Site Map را انتخاب کرده و بر روی گزینه Add کلیک نمایید .
  3. 3) کد XML زیر را در فایل Site Map ایجاد شده قرار دهید . مطابق تصویر زیر :
    کد <siteMap>
         <siteMapNode title="Home" description="Home" url="default.aspx" >
              <siteMapNode title="Products"    description="Our products"          url="Products.aspx">
                   <siteMapNode title="Hardware"   description="Hardware choices"  url="Hardware.aspx" />
                   <siteMapNode title="Software"    description="Software choices"   url="Software.aspx" />
              </siteMapNode>
              <siteMapNode title="Services" description="Services we offer" url="Services.aspx">
                   <siteMapNode title="Training" description="Training classes" url="Training.aspx" />
                   <siteMapNode title="Consulting" description="Consulting services" url="Consulting.aspx" />
                   <siteMapNode title="Support" description="Support plans" url="Support.aspx" />
              </siteMapNode>
         </siteMapNode>
    </siteMap>

    کد XML فوق ساختار و آیتم های کنترل Menu را تعین می کند . تگ های SiteMap ode درون تگ <siteMapNode> اول ، بصورت عنصر فرزند یا زیر منو ، منوی اصلی نمایش داده می شوند .
  4. 4) فایل Site Map را ذخیره نمایید .

اتصال کنترل Menu به فایل Site Map :

اکنون نوبت آن است که یک کنترل داده وب مسیریاب مثل SiteMapPath را بر روی صفحه قرار داده و آن را به فایل Site Map متصل کنید . سپس کنترل Menu خود را نیز برای دریافت اطلاعات به کنترل سرور داده مسیریاب متصل نمایید .
برای این منظور مراحل زیر را انجام دهید :

  1. صفحه اصلی مورد نظر خود را باز کرده و به حالت Design بروید .
  2.  بر روی گزینه Smart tag کنترل Menu کلیک نمایید تا پنجره Menu Tasks باز شود .
  3.  از منوی باز شده ، کنترل کرکره ای Choose Data Source را انتخاب کرده و گزینه New Data Source  را انتخاب نمایید .
  4.  پنجره Data Source Configuration Wizard ، باز می شود . گزینه Site Map را انتخاب کرده و یک ID در قسمت Specify an ID for the data source ، برای آن تعیین کرده و Ok نمایید .

پس از انجام مراحل فوق ، کنترل Menu به فایل (site map) متصل شده است . برای تست صفحه با زدن کلیدهای Ctrl + F5 آن را اجرا نمایید . صفحه باز شده و منو بر روی آن قابل مشاهده است . با حرکت موس بر روی منو آیتم های آن را مشاهده کرده و کلیک نمایید .

نظیم درجات نمایش منو های استاتیک و داینامیک :

همانطور که گفتیم ، کنترل Menu دارای دو حالت برای نمایش منوها و زیرمنوهای خود است ( استاتیک و داینامیک) .
در نمایش استاتیک ، تمام منو ها و زیرمنوهای کنترل بصورت باز هستند و کل کنترل قابل مشاهده است . کاربر می تواند بر روی هر کدام از منو ها نیز کلیک نماید .
اما در حالت داینامیک ، فقط منوها یا زیرمنوهایی که طراح تعیین کرده در ابتدا نمایش داده می شوند و بقیه مخفی هستند . زیرمنوهای مخفی در هنگامی که کاربر اشاره گر موس را بر روی منوی Parent آن ببرد ، نمایش داده می شود .
کنترل Menu ای که در مثال قبل ساختیم ، بجز سر منوهای اصلی آن ، بقیه منوهایش داینامیک و مخفی هستند . بوسیله کنترل Menu شما این توانایی را دارید که تعیین نمایید چه درجه ای از منوها و زیرمنوها ، استاتیک بوده و یا داینامیک باشند . بوسیله مراحل زیر این قابلیت را برای کنترل منوی خود تنظیم می کنیم :

  1.  بر روی کنترل Menu در صفحه کلیک کرده و به منوی Properties آن بروید .
  2. مقدار خاصیت StaticDisplayLevels ، آن را به 2 تغییر دهید .
    در این حالت 2 درجه از منوهای کنترل ( سرمنوها و یک مرحله زیرمنوهای آنها ) بصورت استاتیک و بقیه درجات منوها ، مخفی بوده و به صورت دینامیک باز می شوند .
  3.  با اجرای صفحه ، تفاوت این حالت را در عمل مشاهده کنید .

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


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

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

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

نام :               
آدرس Email :  

نظر شما :  

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