Navigation Controls Dr.sombut foithong Web Programming With C#.NET

Ways to Move Around Your Site การที่เราจะ move จาก page หนึ่งไปยังอีก page นั้นเราสามารถทำได้โดยการใช้ <a> element โดยกำหนด href attribute เพื่ออ้างถึง page ที่ต้องการอ้างถึง อีกแนวทางหนึ่งที่สามารถทำได้ในการสร้าง link ไปยัง page อื่นโดยการใช้ แท็ก HyperLink และใช้ NavigateUrl property ในการระบุ page ที่ต้องการ <a href=”Login.aspx”>You can log in here</a> <asp:HyperLink runat=”server” id=”LoginLink” NavigateUrl=”Login.aspx”> You can log in here</asp:HyperLink> Web Programming With C#.NET

Uniform Resource Locator (URL) URL ใช้อ้างถึง resource ที่อยู่ภายใน website หรือ ภายนอก href attribute: เป็นการสร้าง hyperlink <link> element: ใช้ link ไปยัง CSS file Src attribute: ระบุถึงภาพ หรือ java script url(): ค่าของ CSS property Web Programming With C#.NET

Relative URLs <img src=”../Images/Header.jpg” /> เพื่อที่จะ link จาก Login.aspx ใน root ไปยัง Default.aspx ใน Management folder เราสามารถทำได้โดยใช้ URL ต่อไปนี้: เพื่อที่จะอ้างถึง image Header.jpg จาก Default.aspx ใน Management folder เราสามารถทำได้โดยใช้ URL ต่อไปนี้: ../ บอกให้ทราบว่าขึ้นไปอีก 1 ระดับจะเป็น root แล้วย้อนกลับมายัง Images folder <a href=”Management/Default.aspx”>Management</a> <img src=”../Images/Header.jpg” /> Web Programming With C#.NET

Relative URLs เพื่อที่จะอ้างถึง image Header.jpg จาก Default.aspx ใน Review folder ที่อยู่ใน Management folder เราสามารถทำได้โดยใช้ URL ต่อไปนี้: <img src=”../../Images/Header.jpg” /> Web Programming With C#.NET

Root-Based Relative URLs จะเริ่มต้นด้วย / เพื่อบ่งชี้ถึง root ของ site ถ้าเราต้องการ link ไปยัง Management folder เราสามารถเขียนได้ดังนี้ / ที่เขียนนำหน้า Management folder เพื่อบอก ให้ทราบว่าให้ขึ้นไปยัง root ของ web site แล้วจาก root เดินไปยัง Default.aspx ในManagement folder <a href=”/Management/Default.aspx”>Management</a> Web Programming With C#.NET

The Navigation Controls ASP.NET 4 สนับสนุนการใช้งาน navigation tools 3 ตัวด้วยกัน: SiteMapPath, TreeView, and Menu. Web Programming With C#.NET

SiteMapPath: แสดงถึง path ใน page ปัจจุบัน ทำให้เราทราบว่าเราอยู่ในส่วนไหนของหน้า website TreeView: แสดงโครงสร้างภายใน website ซึ่งสามารถแสดงโหนดได้ทั้งแบบ แตก และแบบ รวบ Menu control: แสดงถึงรายการเมนู โดยเมื่อเราเลื่อนเม้าส์ไปที่เมนูไหน submenu นั้นก็จะแสดงออกมาให้เห็น Web Programming With C#.NET

Architecture of the Navigation Controls ASP.NETจะใช้ไฟล์ XML ในการอธิบายโครงสร้าง webpage ในรูปแบบlogical structure ไฟล์ XML นี้จะมีชื่อเรียกว่า Web.sitemap Web.sitemap จะถูกใช้งานโดย navigation controls ที่จะนำเสนอการเชื่อมโยงที่เกี่ยวข้อง Web.sitemap file สามารถนำไปใช้สร้าง menus หรือ tree view Web Programming With C#.NET

Web.sitemap File ในตัวอย่างนี้จะมี root node เพียง 1 โหนดเรียกว่า “Home” ซึ่งจะประกอบด้วย โหนดลูก 2 โหนดคือ “Reviews” และ“About” <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"> <siteMapNode url="~/" title="Home" description="Go to the homepage"> <siteMapNode url="~/Reviews" title="Reviews" description="Reviews published on this site" /> <siteMapNode url="~/About" title="About" description="About this site" /> </siteMapNode> </siteMap> Web Programming With C#.NET

Web.sitemap File แต่ละ siteMapNode สามารถมี child nodes ได้หลายโหนด แต่จะมี siteMapNode ได้ 1 โหนดภายใน siteMap siteMapNode elements มี 3 attributes set: url, title, and description url attribute: ระบุถึงตำแหน่งของ page ใน web site เราใช้ ~ เพื่ออ้างถึง application-root–based URLs title attribute: ใช้ใน navigation controls เพื่อแสดงชื่อของ page description attribute: ใช้เป็น tooltip สำหรับใช้ใน navigation elements Web Programming With C#.NET

เพื่อให้ file web. sitemap สามารถทำงานได้ ASP เพื่อให้ file web.sitemap สามารถทำงานได้ ASP.NET จะใช้งาน SiteMapDataSource control ในการกำหนดโครงสร้างของ page ต่างที่ได้มีการกำหนดไว้ใน web.sitemap ให้กับ controls ต่างๆ เช่น menu, TreeView, SiteMapPath Web Programming With C#.NET

การสร้าง web.sitemap Web Programming With C#.NET

Menu Control Web Programming With C#.NET

ขั้นตอนการสร้าง ในการสร้าง menu control จะต้องเชื่อมต่อกับ XML file โดยใช้ SiteMapDataSource Web Programming With C#.NET

Property ของ Menu control Description CssClass กำหนด Css class attribute ให้กับ control StaticEnableDefaultPopOutImage กำหนดค่าเป็น true/false จะใช้ image ในส่วนของ menu เพื่อบ่งบอกว่ามี submenu หรือไม่ DynamicEnableDefaultPopOutImage กำหนดค่าเป็น true/false จะใช้ image เพื่อบ่งบอกว่ามี submenu / menu หรือไม่ DisappearAfter กำหนดช่วงเวลาเป็นหน่วย millisecond ที่จะมองเห็น menu item หลังจากมีการเลื่อนเม้าส์ออก DataSourceID ระบุถึง ID ของ SiteMapDataSource ที่จะใช้ข้อมูลจากไฟล์ Web.sitemao MaximumDynamicDisplayLevels กำหนดระดับสูงสุดของ submenu ที่จะแสดงผล Web Programming With C#.NET

Property ของ Menu control Description Orientation จะแสดงผล submenu เป็น Horizontal / Vertical RenderingMode พิจารณาว่าตัว control จะแสดงในรูปแบบ table และ inline style หรือ unordered list และ CSS style IncludeStyleBlock ถ้ามีค่าเป็น false ASP.NET จะไม่มีการเพิ่ม embedded style sheet ในการกำหนด lay out ของ menu Web Programming With C#.NET

TreeView Control TreeView ใช้แสดงโครงสร้าง page ในลักษณะต้นไม้ คล้ายกับใน Windows Explorer รายการข้อมูลในต้นไม้สามารถที่แตกออกหรือยุบรวมได้ TreeView สามารถใช้ได้ทั้ง Web.sitemap และ ผูกโดยตรงกับ XML file Web Programming With C#.NET

ขั้นตอนการสร้าง TreeView Web Programming With C#.NET

กำหนด Css Class attribute ที่จะใช้งาน CollapseImageUrl Property Description CssClass กำหนด Css Class attribute ที่จะใช้งาน CollapseImageUrl ใช้รูปภาพเพื่อบ่งบอกถึงโครงสร้างที่แตกออก โดยแสดงเป็น icon - ExpandImageUrl ใช้รูปภาพเพื่อบ่งบอกถึงโครงสร้างที่ยุบรวม โดยแสดงเป็น icon + CollapseImageToolTip แสดง tooltip เมื่อ user เลื่อนเม้าส์ไปยังรายการที่แตกออก ExpandImageToolTip แสดง tooltip เมื่อ user เลื่อนเม้าส์ไปยังรายการที่ยุบรวม ShowExpandCollapse พิจารณาว่ารายการใน TreeView เป็นแบบแตกออก หรือ ยุบรวมอยู่ โดยการคลิกภาพที่อยู่หน้ารายการ ShowLines พิจารณาว่าจะแสดงเส้นที่เชื่อมถึงกันระหว่างรายการย่อย ExpandDepth กำหนดระดับสูงที่ของ TreeView ที่สามารถมองเห็นได้ Web Programming With C#.NET

SiteMapPath Control SiteMapPath control แสดงให้เราเห็นว่าตอนนี้เราอยู่ในส่วนไหนของโครงสร้าง page มันจะแสดงถึงลำดับของ link ที่เรามีการเลื่อนไปยัง page ต่างๆ Web Programming With C#.NET

การสร้าง SiteMapPath Web Programming With C#.NET

Property ของ SiteMapPath Description PathDirection เป็นการแสดงผลแบบ RootToCurrent หรือ CurrentToRoot PathSeparator กำหนดสัญลักษณ์ที่ใช้แสดงระหว่าง element ที่แตกต่างกันใน path ถ้าไม่กำหนดจะเป็น > RenderCurrentNodeAsLink ถ้ากำหนดค่าเป็น true จะทำให้แต่ละรายการที่แสดงใน path สามารถเป็น link ไปยัง page อื่นๆได้ ShowToolTips แสดง Tooltip เมื่อเลื่อนเม้าส์ไปยัง รายการต่างๆ Web Programming With C#.NET