Tạo Trang Web.sitemap Với Mục Chọn Sitemap

- Site Maps

Thực hiện việc tạo một Website SimpleSiteMap:

Mở cửa số Add New Item để tạo trang Web.sitemap

Hình 3.87. Tạo trang Web.sitemap với mục chọn SiteMap

Nội dung trang Web.sitemap ban đầu như sau :

<?xml version="1.0" encoding="utf-8" ?>

Có thể bạn quan tâm!

Xem toàn bộ 285 trang tài liệu này.

</siteMapNode>

</siteMap>

Các nguyên tắc tạo trang SiteMap:

- Một trang SiteMap bắt đầu bằng thẻ <siteMap>

……………………….

</siteMap>

- Mỗi trang Web trong SiteMap được khai báo trong thẻ <siteMapNode>

- Một siteMapNode có thể chứa các siteMapNode khác.

</siteMapNode>

- Lập lại địa chỉ URL trong các siteMapNode là không cho phép. Thiết kế trang sitemap với nội dung sau :

<?xml version="1.0" encoding="utf-8" ?>

</siteMapNode>

</siteMapNode>

</siteMap>

Trang MasterPage.master có nội dung sau :

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Navigation Test</title>

</head>

<body>

<table>

<asp:SiteMapPath ID="SiteMapPath1" runat="Server" Width="264px" Font- Size="10pt">

<asp:Image ID="Image1" ImageUrl="~/arrowright.gif" runat="Server" />

</PathSeparatorTemplate>

</RootNodeTemplate>

<%# Eval("title") %> <br /><small><i> <%# Eval("description")

%></i></small>

</CurrentNodeTemplate>

</asp:SiteMapPath><br />

<asp:TreeView ID="TreeView1" runat="Server" DataSourceID="SiteMapDataSource1" ImageSet="Faq" NodeIndent="0" >

</asp:TreeView></td>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="Server" />

</td> </tr>

</table>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="Server" />

</Form>

</body>

</html>

Trang MasterPage

Điều khiển SitemapDataSource :

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="Server" />

Điều khiển SiteMapPath :

<asp:SiteMapPath ID="SiteMapPath1" runat="Server" Width="264px" Font- Size="10pt">

<asp:Image ID="Image1" ImageUrl="~/arrowright.gif" runat="Server" />

</PathSeparatorTemplate>

</RootNodeTemplate>

<%# Eval("title") %> <br /><small><i> <%# Eval("description")

%></i></small>

</CurrentNodeTemplate>

</asp:SiteMapPath>

Hình 3.88. Thay đổi định dạng của SiteMappath

Chọn mục Auto Format.., chọn một lựa chọn scheme thích hợp trong danh sách và click OK. Sau đó chọn mục Edit Templates để thiết kế nội dung cho SiteMapPath : có 4 thành phần thẻ bên trong gồm RootNodeTemplate, NodeTemplate, CurrentNodeTemplate và PathSeparatorTemplate.

Nhập nội dung thẻ Current NodeTemplate để hiển thị nội dung thẻ title và thẻ description. Trong đó <%# Eval("title") %> là một cách viết theo dạng kết nối dữ liệu đơn giản (simple data binding) dùng để lấy nội dung title.

<%# Eval("title") %> <br /><small><i> <%# Eval("description")

%></i></small>

</CurrentNodeTemplate>

Nhập nội dung thẻ RootNodeTemplate : Hiển thị chữ Root in đậm

<asp:Image ID="Image1" ImageUrl="~/arrowright.gif" runat="Server" />

</PathSeparatorTemplate>

Kết quả: khi chọn mục Investing , nội dung SiteMappath hiện ra như sau :

Hình 3.89. Nội dung SiteMapPath hiển thị theo Web.sitemap

Điều khiển TreeView :

Đầu tiên chọn thuộc tính DataSource của TreeView chỉ đến SiteMapDataSource1 , sau đó click vào mục Refresh Schema , nội dung TreeView sẽ được cập nhật theo

SiteMapDataSource1.Click vào mục Auto Format.. để định dạng hiển thị cho TreeView, click nút Apply để xác nhận việc thay đổi dạng hiển thị :

Hình 3.90. Định dạng hiển thị cho TreeView

Nội dụng TreeView sau khi cấu hình :

<asp:TreeView ID="TreeView1" runat="Server" DataSourceID="SiteMapDataSource1" ImageSet="Faq" NodeIndent="0" >

<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="DarkBlue" HorizontalPadding="5px"

NodeSpacing="0px" VerticalPadding="0px" />

</asp:TreeView>

Tạo một trang StyleSheet.css để định dạng hiển thị cho các thẻ HTML :

body {

font-family: Verdana; font-size: 83%;} div.Box {

padding: 5px; border-width: 2px; border-style: ridge;

background-color: Lime;

}

Các trang thành phần trong Web.sitemap, chỉ thiết kế với nội dung đơn giản minh hoạ cho bài tập và sẽ được gọi khi được lựa chọn trên TreeView theo sự điều hướng của Web.sitemap

Trang financial.aspx

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

CodeFile="financial.aspx.cs" Inherits="financial" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

Investing </asp:Content>

Kết quả chọn Investing trên TreeView sẽ gọi trang financial.aspx :

Hình 3.91. Chọn mục Investing trên TreeView

Tương tự với ví dụ trên được sử dụng Menu trên MasterPage có điều hướng theo Web.sitemap

Hình 3.92. Menu sử dụng theo điều hướng của Web.sitemap

Chọn Auto Format.. để định dạng hiển thị cho Menu, click nút OK để xác nhận việc thay đổi.

Hình 3.93 Định dạng hiển thị cho Menu

Trang MasterPage.master có chứa thẻ <asp:Menu..> được thiết kế theo hình dưới đây :

Hình 3.94. Menu theo điều hướng của Web.sitemap

Nội dung trang MasterPage.master như sau:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head runat="Server"> <title>Navigation Test</title>

</head>

<body>

<table>

<asp:Menu ID="Menu1" runat="Server" DataSourceID="SiteMapDataSource1" BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names= "Verdana" ForeColor="#7C6F57"

StaticDisplayLevels="2" StaticSubMenuIndent="10px">