Chapter 4 (navigater)
- 1. Navigation Controls CHAPTER 4 Hor Sonoeun ASP.NET(Navigation) 1
- 2. Navigation Controls ត្រូវបានបត្រើត្បាស់ក្នុង Web Application ប ើម្បីអនុញ្ញា រឲ្យ users ងាយស្សួសក្នុងការផ្លា ស់រតូរពី Web page ម្ួយបៅ Web page ម្ួយ។ Navigation Controls រងាា ញ address ររស់ Web page ជា Menus និង Hyperlinks. Navigation Control នីម្ួយៗ មានលក្ខណៈទូបៅដ លអាចឲ្យ អនក្ ឹងអំពី: រចនាសម្ព័នឋររស់ Web applicationម្ូយ ថាបរើ Web pages ទំង អស់ររស់ Web application មានទំនាក្់ទំនងគ្នន ូចបម្តច ការរំបរៀរ Web pages ត្រក្របោយ Dynamic ទីតំងរចចុរបនន រឺ Web page ណាដ លអនក្ក្ំពុងសថិរបៅ បៅក្នុង website INTRODUCTION Hor Sonoeun ASP.NET(Navigation) 2
- 3. Navigating Site Hor Sonoeun ASP.NET(Navigation) 3 Showing the path and current page Linking to any page on the website
- 4. SiteMapPath Control The SiteMapPath គឺជា navigation ម្ូយត្របេទ ដ លទញយក្ពរ៌មានអំពី Web Pages តម្រយៈ site map. ពរ៌មានអំពី Web pages ទំងបនាោះមាន ូចជាៈ ◦ URL ◦ Title ◦ Description Hor Sonoeun ASP.NET(Navigation) 4
- 5. SiteMapPath Control Creating a SiteMapPath The SiteMapPath គឺជា xml file ដ លមាន extension .sitemap. ូបចនោះប ើម្បីរបងកើរ SiteMapPath, រំរូងអនក្ត្រូវ របងកើរ xml file ររស់ site map ម្ួយ ូចខាងបត្កាម្: ◦ Go to New => File => Site Map រនាា រ់ម្ក្អនក្នឹងប ើញ xml page ដ លមាន extension .sitemap ូចខាងបត្កាម្: Hor Sonoeun ASP.NET(Navigation) 5
- 6. SiteMapPath Control Creating a SiteMapPath (Cont.) រនាា រ់ម្ក្ត្រូវក្ំនរ់ Properties ឲ្យ Element នីម្ួយៗ ូចជា ◦ Title :ជាពរ៌មានអំពីទីតំងររស់ Web page ◦ url : ជាប្ម ោះ Web Page ដ លត្រូវ link បៅ ◦ Description : ជាឃ្លា ររិយាយបសេងៗ ររស់ Web page ដ លត្រូវ Link បៅ <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url= " " title= " " description= " " > <siteMapNode url= " " title= " " description= " " /> <siteMapNode url= " " title= " " description= " " /> </siteMapNode> </siteMap> Hor Sonoeun ASP.NET(Navigation) 6 Root Element Child Elements
- 7. SiteMapPath Control Creating a SiteMapPath (Cont.) ឧទហរណ៏ ខាងបលើបយើងប្វើការក្ំណរ់ ◦ SiteMapParent ជា Root Element ររស់ Web Site. ◦ SiteMapChild1, SiteMapChild2 និង SiteMapChild3 ជា child elements. រនាា រ់ម្ក្ Save the file។ <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="SiteMapParent.aspx" title="HomePage" description="Parent"> <siteMapNode url="SiteMapChild1.aspx" title="Page1" description="Child1" /> <siteMapNode url="SiteMapChild2.aspx" title="Page2" description="Child2" /> <siteMapNode url="SiteMapChild3.aspx" title="Page3" description="Child3" /> </siteMapNode> </siteMap> Hor Sonoeun ASP.NET(Navigation) 7
- 8. SiteMapPath Projects បនោះជា xml file ម្ួយដ លរបងកើរ SiteMapPath មាន ១១ Pages Hor Sonoeun ASP.NET(Navigation) 8 The SiteMapPath shown
- 9. Linking Page with SiteMapPath ជាទូបៅ SiteMapPath ត្រូវបានបងកើរប ើងប ើម្បី រងាា ញទីតំងរចចុរបននររស់ Page ដ លអនក្ក្ំពុង បរើក្រុបណាណ ោះ។ ប ើម្បី Link pages បគត្រូវរដនថម្ ◦ Links controls រឺ ◦ TreeView រឺ ◦ Menu Hor Sonoeun ASP.NET(Navigation) 9
- 10. SiteMapPath with HyperLink Hor Sonoeun ASP.NET(Navigation) 10
- 11. SiteMapPath with HyperLink Hor Sonoeun ASP.NET(Navigation) 11 Showing the path and current page Linking to any page on the website
- 12. TreeView Control The TreeView គឺជា Navigation control ម្ួយដ លក្បគបត្រើ បៅក្នុង Web Application ប ើម្បីរងាា ញទីតំងររស់ Web page ជាលក្ខណៈ Tree Structure. បៅក្នុង ASP.NET Application បគបត្រើ TreeView ប ើម្បីរងាា ញ ទិននន័យ ដ លទញបចញពី xml file រឺ Database និងបរៀរ ទិននន័យទំងបនាោះតម្លំោរ់លំបោយននត្របេទ nodes ទំងរីត្របេទ ◦ Root : គឺជា Top-level node បៅក្នុង tree view ◦ Parent : គឺជា sub nodes Eលមាន child nodes បៅក្នុង tree view ◦ Child : គឺជា sub nodes ដ លមាន Parent nodes បៅក្នុង tree view Note: “Leaf” : គឺជា nodes ដ លគ្នម ន child node. Hor Sonoeun ASP.NET(Navigation) 12
- 13. TreeView Control Hor Sonoeun ASP.NET(Navigation) 13 Root Node Parent/Child Nodes Leaf nodes
- 14. SiteMapPath DataSource for TreeView TreeView អាចទញយក្ទិននន័យពី SiteMapPath ប ើម្បី របងកើរ Link បោយបត្រើ TreeView control ូចខាងបត្កាម្៖ ទញយក្ TreeView control ពី Navigation Tab ម្ក្ោក្់បលើ Form បៅបលើ TreeView បយើងត្រូវក្ំណរ់បត្រើសបរើស DataSource បោយបត្រើ ប្ម ោះររស់ SiteMapPath ូចខាងបត្កាម្៖ Hor Sonoeun ASP.NET(Navigation) 14
- 15. XML DataSource for TreeView បត្ៅពីការបត្រើ SiteMapPath ជា Datasource ររស់ TreeView បយើងអាចបត្រើ xml file ជា Datasource ររស់ TreeView បាន ដ រ។ ប ើម្បីបត្រើ xml file ជា Datasource ររស់ TreeView បគត្រូវ របងកើរ xml file ជាម្ុន Go to New => File => xml ក្នុង xml file បគត្រូវរបងកើរ tag បោយការោក្់ប្ម ោះ tag ខ្ាួន ឯង ដ លមាន Open និង Closed tags ូចក្នុង HTML ដ រ។ ខាងបត្កាម្គឺជាឧទហរណ៏ ដ ល xml សាុក្ពរ៌មានអំពី Web pages Hor Sonoeun ASP.NET(Navigation) 15
- 16. XML File Hor Sonoeun ASP.NET(Navigation) 16
- 17. XML DataSource for TreeView (cont.) ប ើម្បីទញយក្ទិននន័យពី XML file ប ើម្បីរបងកើរ Link បោយ បត្រើ TreeView control ូចខាងបត្កាម្៖ ទញយក្ TreeView control ពី Navigation Tab ម្ក្ោក្់បលើ Form បៅបលើ TreeView បយើងត្រូវ ក្ំណរ់បត្រើសបរើស DataSource បោយការបត្រើប្ម ោះររស់ XML file បត្រើសបរើសយក្ <New DataSource…> ត្រសិន បរើគ្នម ន xml file ដ លអនក្ត្រូវការ Hor Sonoeun ASP.NET(Navigation) 17
- 18. XML DataSource for TreeView (cont.) បយើងផ្លា ំង window ម្ួយ ូចខាងបត្កាម្ Hor Sonoeun ASP.NET(Navigation) 18 បត្រើសបរើសយក្ XML File ោក្់ប្ម ោះឲ្យ XML File
- 19. XML DataSource for TreeView (cont.) បយើងផ្លា ំង window ម្ួយ ូចខាងបត្កាម្ Hor Sonoeun ASP.NET(Navigation) 19 ចុច Browse ប ើម្បីបត្រើសបរើស xml file
- 20. XML DataSource for TreeView (cont.) បយើងផ្លា ំង windows ូចខាងបត្កាម្ Hor Sonoeun ASP.NET(Navigation) 20 ចុច Browse ប ើម្បីបត្រើសបរើស xml file ចុច OK ប ើម្បីត្រ រ់បៅកាន់ Form xml file ដ លបានបត្រើសបរើស
- 21. XML DataSource for TreeView (cont.) ក្ូ រនាា រ់ពីក្ំណរ់ XML DataSource ឲ្យ TreeView Hor Sonoeun ASP.NET(Navigation) 21
- 22. លំហាត់អនុវតតន៏ 1. ចូររំបពញរដនថម្ node ឲ្យ xml File ខាងបលើ សត្មារ់ Pages ទំងអស់បៅក្នុង Web Site។ Hor Sonoeun ASP.NET(Navigation) 22
- 23. Menu Control The Menu control គឺជា Navigator ម្ួយត្របេទ សត្មារ់ប្វើ ការរងាា ញ data items ររស់ Web Application។ Data items ទំងបនោះត្រូវទញបចញពី XML file, Database រឺ sitemap file. Orientation: Menu control អាចរងាា ញ data items ជា ◦ Horizontal Orientation ◦ Vertical Orientation Category: Menu control អាចរងាា ញ data items ជា ◦ Static Menu: Data items ទំងអស់ត្រូវបានរងាា ញបៅបលើ Web page. ◦ Dynamic Menu: វាត្រូវបានរបងកើរបៅបពល User បរើក្ Web page ម្ួយ។ វារងាា ញជាលក្ខណៈ sub menu។ Hor Sonoeun ASP.NET(Navigation) 23
- 24. លំហាត់អនុវតតន៏ 1. ចូរបត្រើត្បាស់ SiteMapPath ខាងបលើប ើម្បីរបងកើរ navigation បោយបត្រើ Menu។ 2. ចូរបត្រើត្បាស់ xml fileខាងបលើប ើម្បីរបងកើរ navigation បោយបត្រើ Menu។ Hor Sonoeun ASP.NET(Navigation) 24
- 25. End CHAPTER 5 Hor Sonoeun ASP.NET(Navigation) 25
- 26. សំនួរ 1. បរើ SiteMapPath សតល់ត្របយារន៏អវី ល់ Website? 2. បរើ SiteMapPath អាចLink ពី ម្ួយបៅ ម្ួយបសេង បទៀរបោយរបរៀរណា? 3. បរើបៅបលើ Website ម្ួយអាចមាន SiteMapPath បលើសពីម្ួយបានបទ? ចូររក្ឧទហរណ៏ រញ្ញា ក្់? 4. បរើបៅបលើ Website ម្ួយដ លមាន SiteMapPath ម្ួយអាចមាន HyperLink សង TreeView សង និង Menu សង បៅបលើ Pages បសេងគ្នន បានដ ររឺបទ? ចូររញ្ញា ក្់? Hor Sonoeun ASP.NET(Navigation) 26