آموزش ASP.Net به زبان ساده   >   آموزش مدل فرم های وب ASP.Net Web Forms
درس هجدهم : آموزش طراحی منو و سیستم های مسیریاب در ASP.Net

مقدمه :

طراحی منوهای ساده و کارآمد که دسترسی به تمامی صفحات و موضوعات سایت شما را فراهم نماید ، یک موضوع حیاتی است . کاربران بایستی در هر صفحه بتوانند به صفحات اصلی دیگر دسترسی داشته و بدانند در کجای سایت قرار دارند .
ASP.Net دارای کنترل های درون ساخته ای است که به وسیله آنها می توانید ، انواع منو ها را ایجاد نمایید . همچنین ASP.Net دارای یک امکان به نام نقشه وب سایت می باشد ، که به وسیله آن ، کلیه مسیرهای مورد نظر خود را درون یک فایل با پسوند sitemap. تعیین می کنید . فایل sitemap. ، حکم یک فایل داده ای از نوع XML را داراست که می توان سایر کنترل های منوی ASP.Net را به آن متصل نمود . در این حالت کنترل های منو اطلاعات فایل و مسیرها را از فایل sitemap. دریافت می کنند .  این فایل ، نقشه مکان صفحات و فایل های وب سایت شماست .
ASP.Net دارای 3 نوع کنترل برای ایجاد منوها و سیستم های مسیریاب به شرح زیر می باشد :

  • منوهای دینامیک ( کنترل Menu ) .
  • منوهای درختی ( کنترل TreeView ) .
  • منوهای مسیریاب ( کنترل SiteMapPath ) .

در ادامه به توضیح و آموزش کار با این کنترل ها خواهیم پرداخت .

مرحله اول - ایجاد فایل نقشه وب سایت ( sitemap ) :

گفتیم که در ASP.Net ، می توانید مسیرها و فایل های اصلی سایت را در یک فایل تقشه سایت با پسوند sitemap. تعیین نمایید . این فایل به زبان XML نوشته شده و می تواند به عنوان منبع داده ای برای تمامی کنترل های منوی ASP.Net به کار رود .
کد زیر ، کد یک فایل ساده نقشه سایت را نشان می دهد . به آن دقت نموده ، سپس توضیحات لازم را ارائه خواهیم کرد :

کد <?xml version="1.0" encoding="ISO-8859-1" ?>
  <siteMap>
      <siteMapNode title="Home" url="~/Default.aspx">
        
<siteMapNode title="Web Design" url="~/Web/Index.aspx">
              
<siteMapNode title="HTML" url="~/HTML/Index.aspx"/>
              <siteMapNode title="CSS" url="~/CSS/Index.aspx"/>

        </siteMapNode>

     </siteMapNode>

  </siteMap>

قوانین ایجاد و تعیین مسیرها در یک فایل sitmap همانند کد فوق ، به شرح زیر است :

  • تمامی مسیرها و تگ ها بایستی درون تگ اصلی <SiteMap> تعریف شوند .
  • این فایل ها به زبان XML نوشته می شوند .
  • تگ <SiteMap> ، فقط می تواند یک عنصر <SiteMapNode> را به عنوان فرزند داشته باشد که معمولا به صفحه اصلی یا Home اشاره می کند .
  • هر تگ <SiteMapNode> می تواند به تعداد دلخواه عنصر فرزند ( Child Nodes ) به صورت تگ درونی <SiteMapNode> داشته باشد .
  • درون هر تگ <SiteMapNode> ، عنوان لینک توسط خاصیت title و آدرس آن نیز توسط خاصیت url تعیین می شود .

نکته : فایل sitemap با نقشه فایل ، بایستی حتما در پوشه اصلی سایت ( root ) قرار بگیرد . همچنین هر سایت یک فایل نقشه می تواند داشته باشد .

آموزش طراحی منوهای دینامیک به وسیله کنترل Menu :

از کنترل <asp:Menu> ، می توان برای ایجاد منوهای استاندارد در ASP.Net استفاده نمود . این منوها معمولا به صورت Pop-Up بوده و آیتم های اصلی آن ثابت بوده و سپس با قرار گرفتن موس بر روی آیتم های اصلی ، زیر منوها باز می شوند .
شکل کلی ایجاد این منو با استفاده از کنترل Menu و یک فایل SiteMap به صورت زیر است :

کد <asp:SiteMapDataSource   id="nav1" runat="server" />

<form id="Form1" runat="server">
    
<asp:Menu ID="Menu1" runat="server"   DataSourceId="nav1" />
</form>
خروجی Skip Navigation Links

توضیح کد :

در ابتدا یک کنترل <asp:SiteMapDataSource> را ایجاد کرده و id آن را تعیین می کنیم . این کنترل یک کنترل سرور داده است که می تواند به فایل تقشه سایت ( SiteMap ) متصل شده ، اطلاعات آن را خوانده و سپس به کنترل منوی مورد نظر انتقال دهد .
سپس کنترل Menu را تعریف کرده و با قرار دادن مقدار خاصیت DataSourceId آن برابر با nav1 که id کنترل asp:SiteMapDataSource است ، آنها را به هم متصل کرده ایم . در این صورت این کنترل منو ، اطلاعات دریافتی از کنترل سرور داده خود را نمایش خواهد دارد .
نکته مهم : کنترل asp:SiteMapDataSource به صورت اتوماتیک به فایل نقشه سایت ( web.sitemap ) که در پوشه اصلی سایت ( root ) قرار دارد ، متصل می شود .

ایجاد منو با استفاده از کنترل TreeView :

کنترل <asp:TreeView> ، برای ایجاد یک منو با ساختار درختی استفاده می شود ، که آیتم های خود را با رعایت سلسله مراتب نمایش می دهد .
لینک هایی که در سطح پایین تر باشند ، به صورت پیش فرض نمایان بوده و با زدن آیکون های + یا - در کنترل ، می توان آنها را باز یا بسته نمود .
شکل کلی تعریف و ایجاد یک منو با کنترل TreeView به صورت زیر است :

کد <asp:SiteMapDataSource   id="nav1" runat="server" />

<form id="Form1" runat="server">
    
<asp:TreeView ID="Menu2" runat="server"   DataSourceId="nav1" />
</form>
خروجی Skip Navigation Links.

توضیح کد مثال :

همانند مثال قبل ، کنترل asp:SiteMapDataSource را به عنوان فایل داده ای استفاده کرده تا اطلاعات فایل نقشه سایت ( sitemap ) را خوانده و به کنترل asp:TreeView انتقال دهد .
همچنین توسط خاصیت DataSourceId ، کنترل asp:TreeView را به کنترل asp:SiteMapDataSource متصل کرده ایم .

آموزش ایجاد منو با استفاده از کنترل SiteMapPath :

کنترل SiteMapPath منوی خود را به صورت یک سری آیتم پشت سر هم که مسیر خاصی را نمایش می دهند ، نشان می دهد . به وسیله این نوع منوها ، می توانید در هر لحظه بدانید در کجای سایت قرار داشته و همچنین با کلیک بر روی آیتم های قبل از آدرس صفحه جاری ، به مسیر پیموده شده قیلی خود باز گردید .
برخلاف کنترل های Menu و TreeView ، کنترل SiteMapPath از کنترل asp:SiteMapDataSource به عنوان منبع داده ای استفاده نکرده و خود به صورت پیش فرض و اتوماتیک به فایل نقشه سایت متصل می شود .
کد تعریف این کنترل به صورت زیر است :

کد <form id="Form1" runat="server">
    <asp:SiteMapPath ID="Menu3" runat="server"  />
</form>


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


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

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

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