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

Chapter 4 (navigater)

Embed Size (px)

Citation preview

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

Hor Sonoeun ASP.NET(Navigation) 2

Navigating Site

Hor Sonoeun ASP.NET(Navigation) 3

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

Hor Sonoeun ASP.NET(Navigation) 4

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

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

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

SiteMapPath Projects

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

Hor Sonoeun ASP.NET(Navigation) 8

The SiteMapPath shown

Linking Page with SiteMapPath

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

Hor Sonoeun ASP.NET(Navigation) 9

SiteMapPath with HyperLink

Hor Sonoeun ASP.NET(Navigation) 10

SiteMapPath with HyperLink

Hor Sonoeun ASP.NET(Navigation) 11

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.

Hor Sonoeun ASP.NET(Navigation) 12

TreeView Control

Hor Sonoeun ASP.NET(Navigation) 13

Root Node

Parent/Child Nodes

Leaf nodes

SiteMapPath DataSource for TreeView

TreeView អាចទញយក្ទិននន័យពី SiteMapPath ប ើម្បីរបងកើរ Link បោយបត្រើ TreeView control ូចខាងបត្កាម្៖ ទញយក្ TreeView control ពី Navigation Tab ម្ក្ោក់្បលើ Form

បៅបលើ TreeView បយើងត្រូវកំ្ណរ់បត្រើសបរ ើស DataSource បោយបត្រើប ម្ ោះររស់ SiteMapPath ូចខាងបត្កាម្៖

Hor Sonoeun ASP.NET(Navigation) 14

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

XML File

Hor Sonoeun ASP.NET(Navigation) 16

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

XML DataSource for TreeView (cont.)

បយើងផ្លា ំង window មួ្យ ូចខាងបត្កាម្

Hor Sonoeun ASP.NET(Navigation) 18

បត្រើសបរ ើសយក្ XML File

ោក់្ប ម្ ោះឲ្យ XML File

XML DataSource for TreeView (cont.)

បយើងផ្លា ំង window មួ្យ ូចខាងបត្កាម្

Hor Sonoeun ASP.NET(Navigation) 19

ចុច Browse ប ើម្បីបត្រើសបរ ើស xml file

XML DataSource for TreeView (cont.)

បយើងផ្លា ំង windows ូចខាងបត្កាម្

Hor Sonoeun ASP.NET(Navigation) 20

ចុច Browse ប ើម្បីបត្រើសបរ ើស xml file

ចុច OK ប ើម្បីត្រ រ់បៅកាន់ Form

xml file ដ លបានបត្រើសបរ ើស

XML DataSource for TreeView (cont.)

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

Hor Sonoeun ASP.NET(Navigation) 21

លំហាត់អនុវតតន ៏

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

Hor Sonoeun ASP.NET(Navigation) 22

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

លំហាត់អនុវតតន ៏

1. ចូរបត្រើត្បាស់ SiteMapPath ខាងបលើប ើម្បីរបងកើរ navigation បោយបត្រើ Menu។

2. ចូរបត្រើត្បាស់ xml fileខាងបលើប ើម្បីរបងកើរ navigation បោយបត្រើ Menu។

Hor Sonoeun ASP.NET(Navigation) 24

End

CHAPTER 5

Hor Sonoeun ASP.NET(Navigation) 25

សំនួរ

1. បរើ SiteMapPath សតល់ត្របយារន៏អវី ល់ Website? 2. បរើ SiteMapPath អាចLink ពី មួ្យបៅ មួ្យបសេងបទៀរបោយរបរៀរណា?

3. បរើបៅបលើ Website មួ្យអាចមាន SiteMapPath

បលើសពីមួ្យបានបទ? ចូររក្ឧទហរណ៏រញ្ញា ក់្? 4. បរើបៅបលើ Website មួ្យដ លមាន SiteMapPath

មួ្យអាចមាន HyperLink សង TreeView សង និង Menu សង បៅបលើ Pages បសេងគ្នន បានដ ររបឺទ? ចូររញ្ញា ក់្?

Hor Sonoeun ASP.NET(Navigation) 26