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 để

Di chuyển giữa các trang trong website

Quản lý tất cả các link 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<?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>

Site Maps Trong một file .sitemap chỉ có môt

phần tử <siteMap > Sử dụng tập tin site map:

<siteMapNode title="Home" description="Home" url="Default.aspx“>

Ví d : ụ tạo tập tin web.sitemap

<siteMap> <siteMapNode title="Home" description="Home" url=“home.aspx" /><siteMapNode title="Products" description="Our products" url=“Products.aspx">

<siteMapNode title="Hardware" description="Hardware we offer" url=“Hardware.aspx" />

<siteMapNode title="Software" description="Software for sale" url=“Software.aspx" /></siteMapNode> <siteMapNode title="Services" description="Services we offer" url=“Services.aspx">

<siteMapNode title="Training" description="Training" url=“Training.aspx" /> <siteMapNode title="Consulting" description="Consulting"

url=“Consulting.aspx" /><siteMapNode title="Support" description="Support"

url=“Support.aspx" /> </siteMapNode> </siteMapNode> </siteMap>

Ví dụ(tt) Site map được tạo có dạng: Lưu tập tin Web.sitemap Tạo các trang Navigate

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

T o Navigation Menu s d ng ạ ử ụ TreeView Control Cách tạo TreView:

Mở trang Home.aspx 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

SiteMapPath control cho phép thực thi việc chuyển trang một cách tự động

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 SiteMapPath, nhấn enter

để tạo một dòng mới

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 thứ bậc được tạo trong tập tin Web.sitemap

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

Thuộc tính: PathSeparatorTemplate: tạo ký

hiệu phân cách giữa các link Cú pháp:

<asp:SiteMapPath ID="SiteMapPath1" runat="server"> <PathSeparatorTemplate>|</PathSeparatorTemplate></asp:SiteMapPath>

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 web.sitemap Trong nhóm Navigation chọn Menu

thả vào trang Trên Menu Tasks menu, trong hộp

Choose 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 wizard, chọn Site Map

Trong khung specify ID for the data source: 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 chỉ đặt tại một vị trí

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 Đưa các Navigation control vào trang

master 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 control that works much like an ASP.NET Web page

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.

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" %> <html> <body> <form runat="server"> <uc:Spinner id="Spinner1"

runat="server" MinValue="1" MaxValue="10" /> </form> </body>

Add a user control<My:UserInfoBoxControl runat="server"

ID="MyUserInfoBoxControl" />

Thêm thông tin vào user control <My:UserInfoBoxControl runat="server"

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

<My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" />

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

<asp:PlaceHolder runat="server" ID="phUserInfoBox" />

In the CodeBehind of the page, we add the control like this;

phUserInfoBox.Controls.Add(LoadControl("~/UserInfoBoxControl.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 class UserInfoBoxControl userInfoBoxControl =

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

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