Chapter 4 (navigater)

Navigation
Controls
CHAPTER 4
Hor Sonoeun ASP.NET(Navigation) 1

 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

Navigating Site
Showing the path and
current page
Linking to any page on
the website

SiteMapPath Control
 The SiteMapPath គឺជា navigation ម្ូយត្របេទ
ដ លទញយក្ពរ៌មានអំពី Web Pages តម្រយៈ
site map.
 ពរ៌មានអំពី Web pages ទំងបនាោះមាន ូចជាៈ
◦ URL
◦ Title
◦ Description

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 ូចខាងបត្កាម្:

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>
Root Element
Child Elements

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>
</siteMap>

SiteMapPath Projects
 បនោះជា xml file ម្ួយដ លរបងកើរ SiteMapPath មាន ១១
Pages
The SiteMapPath
shown

Linking Page with SiteMapPath
 ជាទូបៅ SiteMapPath ត្រូវបានបងកើរប ើងប ើម្បី
រងាា ញទីតំងរចចុរបននររស់ Page ដ លអនក្ក្ំពុង
បរើក្រុបណាណ ោះ។ ប ើម្បី Link pages បគត្រូវរដនថម្
◦ Links controls រឺ
◦ TreeView រឺ
◦ Menu

SiteMapPath with HyperLink

SiteMapPath with HyperLink
Showing the path and
current page
Linking to any page on
the website

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.

TreeView Control
Root Node
Parent/Child Nodes
Leaf nodes

SiteMapPath DataSource for TreeView
 TreeView អាចទញយក្ទិននន័យពី SiteMapPath ប ើម្បី
របងកើរ Link បោយបត្រើ TreeView control ូចខាងបត្កាម្៖
 ទញយក្ TreeView control ពី Navigation Tab ម្ក្ោក្់បលើ Form
 បៅបលើ TreeView បយើងត្រូវក្ំណរ់បត្រើសបរើស DataSource បោយបត្រើ
ប្ម ោះររស់ SiteMapPath ូចខាងបត្កាម្៖

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

XML File

XML DataSource for TreeView (cont.)
 ប ើម្បីទញយក្ទិននន័យពី XML file ប ើម្បីរបងកើរ Link បោយ
បត្រើ TreeView control ូចខាងបត្កាម្៖
 ទញយក្ TreeView control ពី Navigation Tab ម្ក្ោក្់បលើ Form
 បៅបលើ TreeView បយើងត្រូវ
ក្ំណរ់បត្រើសបរើស DataSource
បោយការបត្រើប្ម ោះររស់
XML file
 បត្រើសបរើសយក្
<New DataSource…> ត្រសិន
បរើគ្នម ន xml file ដ លអនក្ត្រូវការ

 បយើងផ្លា ំង window ម្ួយ ូចខាងបត្កាម្
បត្រើសបរើសយក្ XML File
ោក្់ប្ម ោះឲ្យ XML File

 បយើងផ្លា ំង window ម្ួយ ូចខាងបត្កាម្
ចុច Browse ប ើម្បីបត្រើសបរើស xml file

 បយើងផ្លា ំង windows ូចខាងបត្កាម្
ចុច Browse ប ើម្បីបត្រើសបរើស xml file
ចុច OK ប ើម្បីត្រ រ់បៅកាន់ Form
xml file ដ លបានបត្រើសបរើស

 ក្ូ រនាា រ់ពីក្ំណរ់ XML DataSource ឲ្យ TreeView

លំហាត់អនុវតតន៏
1. ចូររំបពញរដនថម្ node ឲ្យ xml File ខាងបលើ
សត្មារ់ Pages ទំងអស់បៅក្នុង Web Site។

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។

លំហាត់អនុវតតន៏
1. ចូរបត្រើត្បាស់ SiteMapPath ខាងបលើប ើម្បីរបងកើរ
navigation បោយបត្រើ Menu។
2. ចូរបត្រើត្បាស់ xml fileខាងបលើប ើម្បីរបងកើរ
navigation បោយបត្រើ Menu។

End
CHAPTER 5

សំនួរ
1. បរើ SiteMapPath សតល់ត្របយារន៏អវី ល់ Website?
2. បរើ SiteMapPath អាចLink ពី ម្ួយបៅ ម្ួយបសេង
បទៀរបោយរបរៀរណា?
3. បរើបៅបលើ Website ម្ួយអាចមាន SiteMapPath
បលើសពីម្ួយបានបទ? ចូររក្ឧទហរណ៏ រញ្ញា ក្់?
4. បរើបៅបលើ Website ម្ួយដ លមាន SiteMapPath
ម្ួយអាចមាន HyperLink សង TreeView សង និង
Menu សង បៅបលើ Pages បសេងគ្នន បានដ ររឺបទ?
ចូររញ្ញា ក្់?

Chapter 4 (navigater)

More Related Content

Similar to Chapter 4 (navigater)

More from let's go to study

Chapter 4 (navigater)