آموزش 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>
|
|
خروجی
|
|
توضیح کد :
در ابتدا یک کنترل <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>
|
|
خروجی
|
|
توضیح کد مثال :
همانند مثال قبل ، کنترل 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
حمایت نمایید :