ASP.NET 2.0 - การนำทาง (Navigation)

ASP.NET 2.0 มีควบคุมนำทางที่มีในลักษณะเดี่ยวขาด

การนำทางเว็บไซต์

การบำรุงรักษาเมนูนำทางของเว็บไซต์ใหญ่เป็นสิ่งที่ยากและใช้เวลามาก

ใน ASP.NET 2.0 สามารถจัดเก็บเมนูไว้ในไฟล์ ซึ่งง่ายต่อการบำรุงรักษา โดยทั่วไปนามไฟล์ดังนี้ web.sitemapและถูกจัดเก็บอยู่ในไดเรกทอรีรากของเว็บไซต์

นอกจากนี้ ASP.NET 2.0 มีควบคุมนำทางที่ใหม่สามชนิด

  • Dynamic menus
  • TreeViews
  • เส้นทาง Site Map

ไฟล์ Sitemap

บทความนี้ใช้ไฟล์ sitemap ด้านล่าง (สำหรับ Site Map)

<?xml version="1.0" encoding="ISO-8859-1" ?>
<siteMap>
  <siteMapNode title="Home" url="/aspnet/w3home.aspx">
  <siteMapNode title="Services" url="/aspnet/w3services.aspx">
    <siteMapNode title="Training" url="/aspnet/w3training.aspx"/>
    <siteMapNode title="Support" url="/aspnet/w3support.aspx"/>
  </siteMapNode>
  </siteMapNode>
</siteMap>

กฎที่ใช้สร้างไฟล์ sitemap:

  • ไฟล์ XML ต้องมีเครื่องหมาย <siteMap> ที่ล้อมรอบเนื้อหา
  • ตามแบบ <siteMap> สามารถมีตัวลูก <siteMapNode> แค่ตัวเดียว (หน้า "home")
  • แต่ละ <siteMapNode> สามารถมีหลายตัวลูก (เว็บหน้า)
  • แต่ละ <siteMapNode> มีคุณสมบัติที่ใช้กำหนดชื่อหน้าและ URL

หมายเหตุ：ไฟล์ sitemap ต้องถูกจัดเก็บในไดเรกทอรีรากของเว็บไซต์ และค่า URL ต้องเป็นอัตราส่วนต่อไดเรกทอรีรากนี้

Dynamic Menu

ควบคุม <asp:Menu> สามารถแสดงแบบเมนูนำทางเว็บไซต์มาตรฐานของสถานี

ตัวอย่างรหัสโค้ด:

<asp:SiteMapDataSource id="nav1" runat="server" />
<form runat="server">
<asp:Menu runat="server" DataSourceId="nav1" />
</form>

ในตัวอย่างที่กล่าวข้างต้น <asp:Menu> เครื่องมือเป็นช่องว่างที่ใช้ในการสร้างเมนูเนเวอร์แบบบนเซิร์ฟเวอร์

รายละเอียดของเครื่องมือมีแหล่งข้อมูล รายละเอียด DataSourceIdเพื่อกำหนดid="nav1" เชื่อมโยงมันไปยัง เครื่องมือ <asp:SiteMapDataSource>.

เครื่องมือ <asp:SiteMapDataSource>จะเชื่อมโยงไปยังแบบแบ่งแยก sitemap โดยเริ่มต้นweb.sitemap)。

คลิกที่นี่เพื่อดู DEMO ของ Menu.

TreeView

เครื่องมือ <asp:TreeView> สามารถแสดงเมนูนำทางหลายระดับ

เมนูนี้มีลักษณะเหมือนต้นไม้ที่มีกิ่งไม้ และสามารถเปิดหรือปิดด้วยสัญลักษณ์ + หรือ -

ตัวอย่างรหัสโค้ด:

<asp:SiteMapDataSource id="nav1" runat="server" />
<form runat="server">
<asp:TreeView runat="server" DataSourceId="nav1" />
</form>

ในตัวอย่างที่เชื่อมโยงข้างต้น เครื่องมือ <asp:TreeView>เป็นช่องว่างที่ใช้ในการสร้างเมนูเนเวอร์แบบบนเซิร์ฟเวอร์

รายละเอียดของเครื่องมือมีแหล่งข้อมูล รายละเอียด DataSourceIdเพื่อกำหนดid="nav1" เชื่อมโยงมันไปยัง เครื่องมือ <asp:SiteMapDataSource>.

เครื่องมือ <asp:SiteMapDataSource>จะเชื่อมโยงไปยังแบบแบ่งแยก sitemap โดยเริ่มต้นweb.sitemap)。

คลิกที่นี่เพื่อดู DEMO ของ TreeView.

SiteMapPath

SiteMapPath โหมดสามารถแสดงแสงนำทางไปยังหน้าปัจจุบัน (เนื่องทางการนำทาง) โดยแสดงเป็นลิงก์ที่สามารถคลิกได้ที่บนหน้าเดิม

ต่างจาก TreeView และ Menu โหมด SiteMapPath โหมดไม่ใช้ SiteMapDataSource SiteMapPath โหมดการใช้งานแบบระบุในแบบแบ่งแยก web.sitemap โดยเริ่มต้น

คำเตือน:ถ้า SiteMapPath ไม่ได้แสดงให้เห็นอย่างถูกต้อง น่าจะเป็นเพราะมีข้อผิดพลาด URL ในแบบแบ่งแยก web.sitemap

ตัวอย่างรหัสโค้ด:

<form runat="server">
<asp:SiteMapPath runat="server" />
</form>

ในตัวอย่างที่เชื่อมโยงข้างต้น เครื่องมือ <asp:SiteMapPath>เป็นช่องว่างที่ใช้ในการสร้างเมนูเนเวอร์แบบบนเซิร์ฟเวอร์

คลิกที่นี่เพื่อดู DEMO ของ SiteMapPath.