CH

NG IX:

ƯƠ SITE NAVIGATION &  USER CONTROL

Lý thuyết : 3 tiết Thực hành 12 tiết

Ớ

Ệ

Gi

I THI U

 Site Navigation đ ữ ấ ả

ượ ử ụ ể c s  d ng đ

t c  các link

 Di chuy n gi a các trang trong website ể  Qu n lý t ả  Hi n th  các link trong danh sách ho c  ể

ặ ị

ỗ menu trên m i trang

 Mô t ố

ủ ư ộ ệ  b  c c c a web site nh  m t h

ả ố ụ ứ ậ th ng th  b c

Ớ

Ệ

Gi

I THI U

VÍ D :Ụ

Site Maps

ầ ướ ệ

ụ ộ ớ ệ ố  B c đ u tiên khi làm vi c v i h  th ng  navigation trong ASP.NET 2.0 là xây  d ng m t site map cho  ng d ng

ự ộ ả ấ ộ ứ  M t site map là m t mô t ủ  XML c a c u

trúc website

Site Maps

 T o site maps:

ạ

ả

 Trong solution explorer, click ph i trên  tên website ch n Add new Item, ch n  site map

ọ ọ

 T p tin site map có ph n m  r ng là

ở ộ ậ ầ

Web.sitemap

 C u trúc c a t p tin site map nh  sau:

ủ ậ ư ấ

Site Maps

xmlns="http://schemas.microsoft.com/AspNet/Site Map-File-1.0" >

Site Maps

 Trong m t file .sitemap ch  có môt ph n

ầ ộ ỉ

t

ử   ử ụ ậ  S  d ng t p tin site map:

url=“Software.aspx" />

url=“Training.aspx" />

url=“Consulting.aspx" />

url=“Support.aspx" />

Ví dụ: t o t p tin

Ví d (tt)ụ

ượ ạ c t o có d ng:

 Home.aspx  Products.aspx  Hardware.aspx  Software.aspx  Training.aspx…

ạ  Site map đ ư ậ   L u t p tin Web.sitemap ạ  T o các trang Navigate

Tạo Navigation Menu sử dụng TreeView Control

ạ  Cách t o TreView:

Home.aspx

 M  trang  ở  Trong nhóm Data ch n ọ SiteMapDataSource

ả

th  vào trang,

ID= SiteMapDataSource1

ấ

 SiteMapDataSource control l y thông tin cho

ừ ậ

nó t

t p tin

Web.sitemap

ả

 Trong nhóm Navigation ch n ọ TreeView th  vào

trang.

Tạo Navigation Menu sử dụng TreeView Control

 Trong TreeView tasks, khung Choose

Data Source, ch n ọ SiteMapDataSource1.

Tạo Navigation Menu sử dụng TreeView Control

 Thu c tính c a treeview:  ShowCheckBoxes  ShowLines

ộ ủ

Hiển thị Navigation History sử dụng SiteMapPath Control

ệ ể vi c chuy n trang m t cách t

ự ự ộ  đ ng ỗ

ứ ậ ể ị ủ

 SiteMapPath  control  cho  phép  th c  thi  ộ ể  Có  th   add  Navigation  cho  m i  trang  đ   ị hi n th  v  trí c a trang trong cây th  b c  hi n hành

ể ệ

Hiển thị Navigation History sử dụng SiteMapPath Control

 Cách t oạ : ở ộ

 M  m t trong các trang có trong t p tin

ậ

web.sitemap

 Trong nhóm Navigation ch n ọ SiteMapPath th  vào trang

ả

 Đ t tr  trên  ặ ỏ ớ ộ ạ t o m t dòng m i

ấ ể SiteMapPath, nh n enter đ

Hiển thị Navigation History sử dụng SiteMapPath Control

ể ệ ị  SiteMapPath hi n th  v  trí c a trang hi n

ủ ấ hành trong c u trúc th  b c.

 M c đ nh SiteMapPath hi n th   c u trúc

ị ấ

ượ ạ ị ứ ậ ể ậ c t o trong t p tin Web.sitemap ị ặ ứ ậ th  b c đ

Hiển thị Navigation History sử dụng SiteMapPath Control

ộ  Thu c tính:

 PathSeparatorTemplate: t o ký hi u

ệ ạ

 Cú pháp:

|

ữ phân cách gi a các link

Tạo Navigation Menu sử dụng Menu Control

 Cách t o:ạ ở ộ

 M  m t trong các trang có trong t p tin

ậ

 Trong nhóm Navigation ch n ọ Menu th  ả

web.sitemap

 Trên Menu Tasks menu, trong h p ộ Choose

vào trang

Data Source, click NewDataSource.

Tạo Navigation Menu sử dụng Menu Control

Tạo Navigation Menu sử dụng Menu Control

 Trong c a s  Data Source Configuration

ử ổ

 Trong khung specify ID for the data source:

wizard, ch n  ọ Site Map

ậ

nh p tên datasource:  SiteMapDataSource1, click OK.

Kết hợp Site Navigation và Master pages

 K t h p site navigation v i master pages ta  ộ ố ụ ể ạ có th  t o m t b  c c mà các navigation  ộ ị ỉ ặ ạ i m t v  trí ch  đ t t ệ ự  Cách th c hi n:

ế ợ ớ

Kết hợp Site Navigation và Master pages

ạ

 T o trang Master page

ả

 Trong Solution Explorer, click ph i trên tên

Web site, ch n ọ Add New Item.

ế ộ

ế ế

 Ch n ọ Master Page, Add.  Chuy n sang ch  đ  design, thi

t k  trang

ể master page

Navigation control vào trang master

ư  Đ a các  page

Kết hợp Site Navigation và Master pages

siteMapPath

TreeView

Kết hợp Site Navigation và Master pages

ộ

ạ

ế

ạ

ạ

ọ

ử

ổ

 T o các trang n i dung:  Cách 1: n u trang n i dung t o sau trang  ộ Master thì khi t o, ta ch n trang master  trong c a s  Add new Item

ế

ạ

ướ

 Cách 2: n u trang n i dung t o tr

c trang

ộ ộ

master thì thêm thu c tính

<%@ Page Language="C#"

MasterPageFile="~/Navigation.master“ %>

ASP.NET User Controls

  user control is a kind of composite

 you can add existing Web server controls  and markup to a user control, and define  properties and methods for the control.  You can then embed them in ASP.NET  Web pages, where they act as a unit.

control that works much like an ASP.NET  Web page

User Controls­Khai báo

 <%@ Register TagPrefix="My"

TagName="UserInfoBoxControl"  Src="~/UserInfoBoxControl.ascx" %>

To include a user control in a Web Forms page

Example <%@ Page Language="C#" %>  <%@ Register TagPrefix="uc" TagName="Spinner"

Src="~/Controls/Spinner.ascx" %>

    

runat="server" MinValue="1" MaxValue="10" />  

Add a user control

ID="MyUserInfoBoxControl" />

 Thêm thông tin vào user control 

ID="MyUserInfoBoxControl" UserName="John Doe"  UserAge="45" UserCountry="Australia" />

ấ ữ ệ

ủ

Truy xu t d  li u c a user  control

 protected void Page_Load(object sender, EventArgs e)  { // These values can come from anywhere, but right  now, we just hardcode them  MyUserInfoBoxControl.UserName = "Jane Doe";  MyUserInfoBoxControl.UserAge = 33;  MyUserInfoBoxControl.UserCountry = "Germany"; }

Loading dynamically

 In the CodeBehind of the page, we add the

control like this;

phUserInfoBox.Controls.Add(LoadControl("~/UserInfoBoxC

ontrol.ascx"));

 We use the LoadControl method to instantiate the

UserControl by specifying the path.. On the page, add  the following declaration in the top:

<%@ Reference Control="~/UserInfoBoxControl.ascx" %>

Loading dynamically

 We can access the UserInfoBoxControl

UserInfoBoxControl userInfoBoxControl =

(UserInfoBoxControl)LoadControl("~/UserInfoBoxContr ol.ascx");

userInfoBoxControl.UserName = "John Doe";

userInfoBoxControl.UserAge = 78;  userInfoBoxControl.UserCountry = "Spain";  phUserInfoBox.Controls.Add(userInfoBoxControl);

class