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 1

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" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode url="" title="" description="">

<siteMapNode url="" title="" description="" />

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

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

<siteMapNode url="" title="" description="" />

</siteMapNode>

</siteMap>

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

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

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

……………………….

</siteMap>

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

<siteMapNode title="RevoStock" description="Investment software for stock charting" url="~/product1.aspx" />

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

<siteMapNode title="Products" description="Learn about our products" url="~/products.aspx">

<siteMapNode title="RevoStock" description="Investment software for stock charting" url="~/product1.aspx" />

<siteMapNode title="RevoAnalyze" description="Investment software for yield analysis" url="~/product2.aspx" />

</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" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">

<siteMapNode title="Home" description="Home" url="~/default.aspx">

<siteMapNode title="InFormation" description="Learn about our company">

<siteMapNode title="About Us" description="How RevoTech was founded" url="~/aboutus.aspx" />

<siteMapNode title="Investing" description="Financial reports and investor analysis" url="~/financial.aspx" />

</siteMapNode>

<siteMapNode title="Products" description="Learn about our products" url="~/products.aspx">

<siteMapNode title="RevoStock" description="Investment software for stock charting" url="~/product1.aspx" />

<siteMapNode title="RevoAnalyze" description="Investment software for yield analysis" url="~/product2.aspx" />

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

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="Server">

<title>Navigation Test</title>

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<Form id="Form1" runat="Server">

<table>

<tr><td style="width: 228px;vertical-align: top;">

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

<PathSeparatorTemplate>

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

</PathSeparatorTemplate>

<RootNodeTemplate><b>Root</b>

</RootNodeTemplate>

<CurrentNodeTemplate>

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

%></i></small>

</CurrentNodeTemplate>

</asp:SiteMapPath><br />

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

<ParentNodeStyle Font-Bold="False" />

<HoverNodeStyle Font-Underline="True" ForeColor="Purple" />

<SelectedNodeStyle Font-Underline="True" />

<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="DarkBlue" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />

</asp:TreeView></td>

<td style="vertical-align: top; padding: 10px; width: 301px;" bgcolor="LightGoldenrodYellow">

<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">

<PathSeparatorTemplate>

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

</PathSeparatorTemplate>

<RootNodeTemplate><b>Root</b>

</RootNodeTemplate>

<CurrentNodeTemplate>

<%# Eval("title") %> <br /><small><i>&nbsp;<%# 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 2


Hình 3 88 Thay đổi định dạng của SiteMappath Chọn mục Auto Format chọn một 3

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.

<CurrentNodeTemplate>

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

%></i></small>

</CurrentNodeTemplate>

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

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

<RootNodeTemplate> <b>Root</b> </RootNodeTemplate>

PathSeparatorTemplate asp Image ID Image1 5

<PathSeparatorTemplate>

<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 6

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 7

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 8

Đầ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 9

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" >

<ParentNodeStyle Font-Bold="False" />

<HoverNodeStyle Font-Underline="True" ForeColor="Purple" />

<SelectedNodeStyle Font-Underline="True" />

<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ử 10

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

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ẻ 12

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ư 13

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

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

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

<Form id="Form1" runat="Server">

<table>

<tr><td style="width: 131px;vertical-align: top;">

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

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

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />

<DynamicMenuStyle BackColor="#F7F6F3" />

Xem toàn bộ nội dung bài viết ᛨ

..... Xem trang tiếp theo?
⇦ Trang trước - Trang tiếp theo ⇨

Ngày đăng: 16/07/2022