1. บทนำ
เว็บไซต์ใดๆ ที่ประกอบด้วยหลายหน้าจำเป็นต้องมีอินเทอร์เฟซผู้ใช้การนำทางบางประเภท ซึ่งสร้างขึ้นในสองขั้นตอน ขั้นแรก จะต้องกำหนดโครงสร้างเชิงตรรกะของไซต์ จากนั้น องค์ประกอบอินเทอร์เฟซผู้ใช้จะถูกเพิ่มเพื่อให้ผู้ใช้สามารถเลื่อนไปมาระหว่างส่วนต่างๆ ของโครงสร้างไซต์ได้ ก่อน ASP.NET 2.0 นักพัฒนาจำเป็นต้องแก้ไขปัญหาทั้งสองนี้ด้วยตนเอง อย่างไรก็ตาม ในเวอร์ชัน 2.0 นั้น ASP.NET มีวิธีง่ายๆ ในการกำหนดโครงสร้างของไซต์และมีการควบคุมเว็บจำนวนหนึ่ง ซึ่งได้รับการออกแบบมาโดยเฉพาะเพื่อแสดงอินเทอร์เฟซผู้ใช้การนำทางไซต์
ในบทความก่อนหน้านี้ เราได้วิเคราะห์วิธีการสร้างไฟล์แผนผังเว็บไซต์ XML ของ Web.sitemap ผ่านการควบคุมเว็บการนำทาง และวิธีการแสดงข้อมูลการนำทางเว็บไซต์ ซึ่งรวมถึง:
·SiteMapPath ซึ่งแสดง breadcrumb (Home > Electronics > XBOX)
· TreeView ซึ่ง แสดงแผนภูมิที่แสดงแนวตั้งแบบยุบได้ ซึ่งใช้เพื่อแสดงลำดับชั้นของแผนผังเว็บไซต์ทั้งหมด
ซึ่งแสดงเมนูที่จัดแนวในแนวนอนหรือแนวตั้ง
เท่านั้น บทความก่อนหน้านี้มีเฉพาะฟังก์ชันและความสามารถสำหรับไฟล์แผนผังเว็บไซต์และการควบคุมเว็บการนำทางเท่านั้น . ในส่วนนี้ เราจะให้ความสนใจกับการควบคุมข้อมูลแผนที่เว็บไซต์โดยทางโปรแกรม และตรวจสอบการควบคุมเว็บการนำทาง SiteMapPath โดยละเอียด
2. แผนผังเว็บไซต์
ตัวอย่างในบทความนี้ใช้แผนผังเว็บไซต์ที่สร้างไว้ในส่วนที่หนึ่ง คุณสามารถดูไวยากรณ์ของไฟล์ XML แผนผังเว็บไซต์ได้ในส่วนที่ 1 หรือดาวน์โหลดได้ที่ส่วนท้ายของบทความนี้ การแสดงโครงสร้างเว็บไซต์ที่ใช้ในตัวอย่างเหล่านี้ในรูปแบบกราฟิกแสดงไว้ด้านล่าง:
3. แผนผังเว็บไซต์ที่ควบคุมโดยทางโปรแกรม
แผนผังเว็บไซต์คือชุดของโหนดแผนผังเว็บไซต์ที่เกี่ยวข้อง โดยทั่วไป แต่ละโหนดแผนผังไซต์จะมีชื่อเรื่อง URL และคำอธิบาย รูปภาพที่แสดงด้านบนเป็นตัวอย่างของแผนผังไซต์ โดยแต่ละสี่เหลี่ยมผืนผ้าแสดงถึงโหนดแผนผังไซต์ ASP.NET ไม่ต้องการรูปแบบเฉพาะสำหรับการระบุแผนผังไซต์ แม้ว่าจะมีตัวเลือกเริ่มต้นสำหรับการใช้ไฟล์รูปแบบ XML ก็ตาม (ดูส่วนที่ 1 สำหรับรายละเอียดเกี่ยวกับไฟล์ XML)
ASP.NET มีคลาสที่เรียกว่า SiteMap ซึ่งให้การเข้าถึงแผนผังเว็บไซต์แบบอ่านอย่างเดียวโดยทางโปรแกรม คลาสนี้ถูกใช้ภายในโดยตัวควบคุมสองตัว ซึ่งเราจะวิเคราะห์ในภายหลังในบทความนี้:
SiteMapPath - สร้าง breadcrumb ตามตำแหน่งของหน้าที่เยี่ยมชมและโครงสร้างไซต์ โดยเฉพาะอย่างยิ่ง SiteMapPath เริ่มต้นที่โหนดที่ส่งคืนโดยคุณสมบัติ SiteMap.CurrentNode และสำรวจลำดับชั้นไปยังรูท
· SiteMapDataSource - การควบคุมนี้สร้างแหล่งข้อมูลแบบลำดับชั้น - โดยแมปโครงสร้างของแผนผังเว็บไซต์ เพื่อแสดงข้อมูลแผนผังเว็บไซต์ในตัวควบคุมเว็บอื่น เช่น TreeView หรือเมนู ตัวควบคุมเว็บจะไม่สอบถามแผนผังเว็บไซต์โดยตรง แต่จะผูกเข้ากับตัวควบคุม SiteMapDataSource ซึ่งมีหน้าที่ในการอ่านโครงสร้างแผนผังเว็บไซต์
คลาส SiteMap มีคุณสมบัติสองประการ: RootNode และ CurrentNode คุณสมบัติทั้งสองส่งคืนอินสแตนซ์ SiteMapNode คลาส SiteMapNode แสดงถึงโหนดที่กำหนดไว้ในแผนผังเว็บไซต์และมีคุณสมบัติที่อธิบายโหนด - ชื่อ, Url และคำอธิบาย รวมถึงคุณสมบัติที่ควบคุมลำดับชั้นโดยทางโปรแกรม - ParentNode, ChildNodes, NextSibling, PreviousSibling และอื่นๆ
คุณสามารถใช้คลาส SiteMap ในหน้า ASP.NET ของคุณเอง ตัวอย่างเช่น เราสามารถแสดงลิงก์ ถัดไป ก่อนหน้า และ ขึ้น บนทุกหน้า เพียงแค่เพิ่มตัวควบคุมไฮเปอร์ลิงก์สามตัวที่หน้าหลักของไซต์ พร้อมการเขียนโปรแกรมเล็กน้อยเพื่อตรวจสอบว่า CurrentNode มี NextSibling, PreviousSibling หรือ ParentNode หรือไม่ โดยเฉพาะอย่างยิ่ง คุณจะเพิ่มมาร์กอัปต่อไปนี้ลงในหน้าหลักของคุณ:
[<asp:HyperLink ID="lnkPrev" runat="server">Prev</asp:HyperLink>] |
[<asp:HyperLink ID="lnkUp" runat="server">ขึ้น</asp:HyperLink>] |
[<asp:HyperLink ID="lnkNext" runat="server">ถัดไป</asp:HyperLink>]
ตัวจัดการเหตุการณ์ Page_Load ของหน้าหลักมีลักษณะดังนี้:
ถ้า SiteMap.CurrentNode IsNot Nothing แล้ว
'ตั้งค่าลิงก์ถัดไป/ก่อนหน้า/ขึ้นหาก SiteMap.CurrentNode.PreviousSibling ไม่ใช่อะไรเลย
lnkPrev.NavigateUrl = SiteMap.CurrentNode.PreviousSibling.Url
lnkPrev.Text = "< ก่อนหน้า (" & SiteMap.CurrentNode.PreviousSibling.Title & ")"
อื่น
lnkPrev.NavigateUrl = String.Empty
lnkPrev.Text = "< ก่อนหน้า"
สิ้นสุดถ้า
ถ้า SiteMap.CurrentNode.ParentNode ไม่ใช่อะไรเลย
lnkUp.NavigateUrl = SiteMap.CurrentNode.ParentNode.Url
lnkUp.Text = "ขึ้น (" & SiteMap.CurrentNode.ParentNode.Title & ")"
อื่น
lnkUp.NavigateUrl = String.Empty
lnkUp.Text = "ขึ้น"
สิ้นสุดถ้า
ถ้า SiteMap.CurrentNode.NextSibling ไม่ใช่อะไรเลย
lnkNext.NavigateUrl = SiteMap.CurrentNode.NextSibling.Url
lnkNext.Text = "(" & SiteMap.CurrentNode.NextSibling.Title & ") ถัดไป >"
อื่น
lnkNext.NavigateUrl = String.Empty
lnkNext.Text = "ถัดไป >"
สิ้นสุดถ้า
สิ้นสุด หาก
จะเพิ่มไฮเปอร์ลิงก์สามรายการ ถัดไป ขึ้น และก่อนหน้า ให้กับทุกหน้าที่สืบทอดมาจากหน้าหลัก โปรดดูภาพรวมด้านล่าง
4. ใช้ตัวควบคุม SiteMapPath เพื่อแสดง breadcrumbs
ตัวควบคุม SiteMapPath แสดง breadcrumb - ใช้เพื่อแสดงให้ผู้ใช้เห็นว่าพวกเขาอยู่ที่ไหนในโครงสร้างไซต์ ผลลัพธ์ของการควบคุม SiteMapPath ถูกกำหนดโดยปัจจัยสามประการต่อไปนี้:
· โครงสร้างของเว็บไซต์ตามที่กำหนดโดยแผนผังเว็บไซต์
· เพจที่กำลังเยี่ยมชม และ
· ค่าคุณสมบัติของการควบคุม SiteMapPath
เมื่อเพจมี มีการเข้าถึงการควบคุม SiteMapPath การควบคุม SiteMapPath พยายามที่จะแปลง URL ของเพจที่แมปเป็นค่า url ของโหนดแผนผังไซต์ที่กำหนดไว้ในแผนผังไซต์ หากพบรายการที่ตรงกัน ตัวควบคุมจะสำรวจโครงสร้างจนถึงรากและสร้างเอาต์พุตต่อไปนี้: RootNode>ParentNode>...>ParentNode>CurrentNode CurrentNode ที่นี่คือชื่อเรื่องของโหนดแผนผังเว็บไซต์ - ใช้เพื่อแมป URL ของคำขอหน้าปัจจุบัน RootNode และ ParentNodes จะถูกสร้างขึ้นเป็นไฮเปอร์ลิงก์หากโหนดแผนผังเว็บไซต์มีค่า URL ที่กำหนดไว้ในแผนผังเว็บไซต์ ตัวควบคุม SiteMapPath ในหน้า "History Books" (Books/History.aspx) จะสร้าง Home>Books>History และยังสร้าง Home และ Books ในรูปแบบของไฮเปอร์ลิงก์ โดยชี้กลับไปที่ Default.aspx และ Books/Default.aspx ตามลำดับ . เมื่อเข้าถึง Books/Default.aspx SiteMapPath จะสร้าง Home>Books
เพื่อให้ชัดเจนยิ่งขึ้น ผลลัพธ์ของ SiteMapPath ขึ้นอยู่กับทั้งแผนผังไซต์และหน้าที่เข้าชม ผลลัพธ์ของ SiteMapPath สามารถปรับแต่งได้ผ่านคุณสมบัติของการควบคุมนี้ มีคุณสมบัติบางอย่างในรูปแบบการควบคุมเว็บมาตรฐาน - BackColor, Font, ForeColor และอื่นๆ - และมีการตั้งค่าบางอย่างเฉพาะสำหรับ SiteMapPath รวมถึง:
u PathDirection - สามารถใช้ค่าใดค่าหนึ่งจากสองค่า RootToCurrent (ค่าเริ่มต้น) หรือ CurrentToRoot เมื่อค่าเป็น RootToCurrent breadcrumb บนหน้า "History Books" จะถูกสร้างขึ้นเป็น Home>Books>History เมื่อค่าเป็น CurrentToRoot ผลลัพธ์จะเป็น History>Books>Home
·PathSeparator - ระบุสตริงที่ใช้ในการแยกแต่ละโหนดใน breadcrumb; ค่าเริ่มต้นคือ >
·RenderCurrentNodeAsLink - คุณลักษณะบูลีน - ระบุว่าควรสร้าง CurrentNode เป็นลิงก์หรือไม่
·ParentLevelsDisplayed - ค่าจำนวนเต็ม - สามารถใช้เพื่อจำกัดความสูงของโครงสร้างต้นไม้ที่แสดงโดย breadcrumb ตามค่าเริ่มต้น ค่าของแอตทริบิวต์นี้คือ -1 ซึ่งหมายความว่าไม่มีขีดจำกัด การตั้งค่าเป็น 1 จะสร้าง breadcrumb Books>History ในหน้า "History Books" ไม่รวมรูทเนื่องจากตัวควบคุม SiteMapPath ลัดเลาะไปตามพาเรนต์เดียวเท่านั้น - จาก "ประวัติ" ไปจนถึง "หนังสือ"
· ShowToolTips - หากโหนดแผนผังเว็บไซต์มีค่าคำอธิบาย คำอธิบายจะแสดงเป็นข้อความคำแนะนำเครื่องมือสำหรับโหนด breadcrumb แต่ละโหนด หากคุณสมบัตินี้ตั้งค่าเป็น True (ค่าเริ่มต้น)
นอกจากนี้ยังมีคุณสมบัติสไตล์ที่สามารถใช้เพื่อตั้งค่า BackColor, Font, ForeColor ฯลฯ - สำหรับส่วนต่างๆ ของตัวควบคุม SiteMapPath คุณสามารถใช้คุณสมบัติ NodeStyle เพื่อปรับแต่งรูปลักษณ์ของโหนดใน breadcrumb ได้ คุณสามารถใช้ RootNodeStyle และ CurrentNodeStyle เพื่อปรับแต่งโหนดแรกและสุดท้ายใน breadcrumb เพิ่มเติมได้ โดยทั่วไป วิธีที่ง่ายที่สุดและสวยงามที่สุดในการจัดรูปแบบตัวควบคุม SiteMapPath คือการใช้วิซาร์ด "จัดรูปแบบอัตโนมัติ" ซึ่งสามารถใช้งานได้ผ่านแท็กที่ละเอียดอ่อนของตัวควบคุม
5. ปรับแต่งเอาต์พุตที่สร้างขึ้นด้วยเทมเพลต
SiteMapPath มีเทมเพลตสี่แบบ - อนุญาตให้ปรับแต่งเอาต์พุตที่สร้างขึ้นเพิ่มเติมได้ เทมเพลตช่วยให้คุณสามารถผสมมาร์กอัป HTML แบบคงที่ การควบคุมเว็บ และไวยากรณ์การเชื่อมโยงข้อมูล หากคุณเคยใช้ตัวควบคุม DataList หรือ Repeater มาก่อน แสดงว่าคุณคุ้นเคยกับเทมเพลตแล้ว เทมเพลตใน ASP.NET 2.0 โดยพื้นฐานแล้วจะเหมือนกับใน ASP.NET 1.x ยกเว้นว่า ASP.NET 2.0 จะแนะนำไวยากรณ์ใหม่ที่กระชับยิ่งขึ้นสำหรับนิพจน์การผูกข้อมูล ตัวอย่างเช่น ใน ASP.NET 1.x คุณต้องใช้ไวยากรณ์ <%# DataBinder.Eval(Container.DataItem, PropertyName) %> เพื่อรับค่าของคอลัมน์ ใน ASP.NET 2.0 ไวยากรณ์เก่านี้ยังคงสามารถใช้ได้ แต่คุณสามารถเลือกใช้เวอร์ชันที่สั้นกว่า <%# Eval(PropertyName) %> ได้
ตามค่าเริ่มต้น SiteMapPath จะสร้างรูทและโหนดพาเรนต์เป็นไฮเปอร์ลิงก์ปกติ ดังนั้นเมื่อผู้ใช้คลิกที่ลิงก์ พวกเขาสามารถย้ายกลับขึ้นไปบนแผนผังลำดับชั้นการควบคุมได้อย่างรวดเร็ว อย่างไรก็ตาม คุณอาจต้องการดำเนินการประมวลผลฝั่งเซิร์ฟเวอร์ก่อนที่จะส่งข้อมูลกลับไปยังผู้ใช้ - บางทีคุณอาจต้องการบันทึกตำแหน่งที่ผู้ใช้จะไปหรือบันทึกการเปลี่ยนแปลงใดๆ ที่พวกเขาทำในเพจโดยอัตโนมัติ ซึ่งสามารถทำได้โดยใช้เทมเพลตและสร้างโหนดเป็น LinkButton
ตัวอย่างเช่น หากคุณต้องการสร้างโหนดรูทของ SiteMapPath เป็น LinkButton เท่านั้น คุณสามารถใช้แท็กต่อไปนี้เพื่อเพิ่ม <RootNodeTemplate> ไปยังตัวควบคุม SiteMapPath:
<asp:SiteMapPath ID="SiteMapPath1" runat="server" >
＜เทมเพลตรูทโหนด>
<asp:LinkButton ID = "LinkButton1" runat = "เซิร์ฟเวอร์"
Text='＜%# Eval("title") %><'
CommandArgument='＜%# Eval("url") %>'
OnCommand="LinkButton1_Command">
</asp:LinkButton>
＜/RootNodeTemplate><
</asp:SiteMapPath>
แท็กนี้เพิ่มตัวควบคุม LinkButton ให้กับ SiteMapPath - คุณสมบัติข้อความถูกกำหนดให้กับคุณสมบัติ Title ของ SiteMapNode ที่เกี่ยวข้อง เมื่อคลิก LinkButton จะเกิดการ postback และเหตุการณ์ Command ของตัวควบคุมเริ่มทำงาน - ซึ่งจะเปิดใช้งานตัวจัดการเหตุการณ์ LinkButton1_Command คุณสมบัติ Url ของ SiteMapNode ถูกส่งผ่านไปยังตัวจัดการเหตุการณ์นี้ผ่านคุณสมบัติ CommandArgument ในตัวจัดการเหตุการณ์นี้ คุณสามารถดำเนินการประมวลผลฝั่งเซิร์ฟเวอร์ใดก็ได้ที่จำเป็น จากนั้นนำผู้ใช้ไปยังเพจที่พวกเขาร้องขอผ่าน Response.Redirect(e.CommandArgument)
