Web.sitemap File

Download Report

Transcript Web.sitemap File 

Navigation Controls
1
DR.SOMBUT FOITHONG
Web Programming With C#.NET
Ways to Move Around Your Site
2
 การที่เราจะ move จาก page หนึ่งไปยังอีก page นั้นเราสามารถทาได้โดยการ
ใช้ <a> element โดยกาหนด href attribute เพื่ออ้างถึง page ที่ต้องการอ้างถึง
<a href=”Login.aspx”>You can log in here</a>
 อีกแนวทางหนึ่งทีส
่ ามารถทาได้ในการสร้าง link ไปยัง page อื่นโดยการใช้
แท็ก HyperLink และใช้ NavigateUrl property ในการระบุ page ที่ต้องการ
<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)
3
 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
4
 เพื่อที่จะ link จาก Login.aspx ใน root ไปยัง Default.aspx ใน Management folder
เราสามารถทาได้โดยใช้ URL ต่อไปนี้:
<a href=”Management/Default.aspx”>Management</a>
 เพื่อที่จะอ้างถึง image Header.jpg จาก Default.aspx
ใน Management folder เราสามารถทาได้โดยใช้ URL
ต่อไปนี้:
<img src=”../Images/Header.jpg” />
 ../ บอกให้ทราบว่าขึ้นไปอีก 1 ระดับจะเป็น root แล้วย้อนกลับมายัง Images folder
Web Programming With C#.NET
Relative URLs
5
 เพื่อที่จะอ้างถึง image Header.jpg จาก Default.aspx
ใน Review folder ที่อยู่ใน Management folder
เราสามารถทาได้โดยใช้ URL ต่อไปนี้:
<img src=”../../Images/Header.jpg” />
Web Programming With C#.NET
Root-Based Relative URLs
6
 จะเริ่มต้นด้วย / เพื่อบ่งชี้ถึง root ของ site
 ถ้าเราต้องการ link ไปยัง Management folder เราสามารถเขียนได้ดังนี้
<a href=”/Management/Default.aspx”>Management</a>
 / ที่เขียนนาหน้า Management folder เพื่อบอก
ให้ทราบว่าให้ขึ้นไปยัง root ของ web site
แล้วจาก root เดินไปยัง Default.aspx
ในManagement folder
Web Programming With C#.NET
The Navigation Controls
7
 ASP.NET 4 สนับสนุนการใช้งาน navigation tools 3 ตัวด้วยกัน:
SiteMapPath, TreeView, and Menu.
Web Programming With C#.NET
8
 SiteMapPath: แสดงถึง path ใน page ปัจจุบัน ทาให้เราทราบ
ว่าเราอยู่ในส่วนไหนของหน้า website
 TreeView: แสดงโครงสร้างภายใน website ซึ่งสามารถแสดง
โหนดได้ทั้งแบบ แตก และแบบ รวบ
 Menu control: แสดงถึงรายการเมนู โดยเมื่อเราเลื่อนเม้าส์ไปที่เมนู
ไหน submenu นั้นก็จะแสดงออกมาให้เห็น
Web Programming With C#.NET
Architecture of the Navigation Controls
9
 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
10
<?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>
ในตัวอย่างนี้จะมี root node เพียง 1 โหนดเรียกว่า “Home” ซึ่งจะประกอบด้วย
โหนดลูก 2 โหนดคือ “Reviews” และ“About”
Web Programming With C#.NET
Web.sitemap File
11
 แต่ละ 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
12
 เพื่อให้ file web.sitemap สามารถทางานได้ ASP.NET จะใช้งาน
SiteMapDataSource control ในการกาหนดโครงสร้างของ
page ต่างที่ได้มีการกาหนดไว้ใน web.sitemap ให้กับ controls
ต่างๆ เช่น menu, TreeView, SiteMapPath
Web Programming With C#.NET
การสร้ าง web.sitemap
13
Web Programming With C#.NET
Menu Control
14
Web Programming With C#.NET
ขันตอนการสร้
้
าง
15
 ในการสร้าง menu control จะต้องเชื่อมต่อกับ XML file โดยใช้
SiteMapDataSource
Web Programming With C#.NET
Property ของ Menu control
16
Property
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
17
Property
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
18
 TreeView ใช้แสดงโครงสร้าง page ในลักษณะต้นไม้ คล้ายกับใน Windows
Explorer
 รายการข้อมูลในต้นไม้สามารถทีแ
่ ตกออกหรือยุบรวมได้
 TreeView สามารถใช้ได้ทง
ั้ Web.sitemap และ ผูกโดยตรงกับ XML file
Web Programming With C#.NET
ขันตอนการสร้
้
าง TreeView
19
Web Programming With C#.NET
20
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
21
 SiteMapPath control แสดงให้เราเห็นว่าตอนนีเ้ ราอยู่ในส่วนไหนของ
โครงสร้าง page
 มันจะแสดงถึงลาดับของ link ที่เรามีการเลื่อนไปยัง page ต่างๆ
Web Programming With C#.NET
การสร้ าง SiteMapPath
22
Web Programming With C#.NET
Property ของ SiteMapPath
23
Property
Description
PathDirection
เป็นการแสดงผลแบบ RootToCurrent หรือ
CurrentToRoot
PathSeparator
กาหนดสัญลักษณ์ที่ใช้แสดงระหว่าง element ที่แตกต่าง
กันใน path ถ้าไม่กาหนดจะเป็น >
RenderCurrentNodeAsLink
ถ้ากาหนดค่าเป็น true จะทาให้แต่ละรายการที่แสดงใน
path สามารถเป็น link ไปยัง page อื่นๆได้
ShowToolTips
แสดง Tooltip เมื่อเลื่อนเม้าส์ไปยัง รายการต่างๆ
Web Programming With C#.NET