【ASP.NET Step by Step】之三 Master Pages and Site Navigation-优快云博客

本文介绍了ASP.NET中站点搭建的基本步骤，包括模版页的使用、站点地图的配置方法及菜单展示，Repeater控件结合站点地图数据源实现动态导航栏，Breadcrumb导航的简单实现方式，以及ViewState的工作原理。

1. 模版页，添加一个Master Page，使整个站点有统一的显示风格。
    主页面：
    <div id="content">
              <asp:contentplaceholder id="MainContent" runat="server">
              <!-- Page-specific content will go here

-->
</asp:contentplaceholder>

  </div>

    新建的页面：
    Default.aspx

@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
2

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
3

Runat="Server">
4

</asp:Content>

2. 站点地图，是一个XML文件，每次添加删除了页面，要更改这个文件
可以用下面这些标记将站点地图绑定到Menu控件中：

<div id="navigation">
2

<asp:Menu ID="Menu1" runat="server"
3

DataSourceID="SiteMapDataSource1">
4

</asp:Menu>
5

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
7

</div>

3. Reapter控件的使用，当将SiteMapDataSource绑定到Repeater时，会自动遍历。
因为SiteMapDataSource控件的ShowStartingNode属性被设为false，所以从站点地图的第二级节点开始。
使用嵌套，第一层绑定站点第二级，第二层绑定站点第三极：

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
2

<ItemTemplate>
3

<li>
4

<asp:HyperLink runat="server"
5

NavigateUrl="<%# Eval("Url") %>">
6

# Eval("Title") %></asp:HyperLink>
7

<asp:Repeater runat="server"
9

DataSource="<%# ((SiteMapNode)
10

Container.DataItem).ChildNodes %>">
11

<HeaderTemplate>
12

<ul>
13

</HeaderTemplate>
14

<ItemTemplate>
16

<li>
17

<asp:HyperLink runat="server"
18

NavigateUrl="<%# Eval("Url") %>">
19

# Eval("Title") %></asp:HyperLink>
20

</li>
21

</ItemTemplate>
22

<FooterTemplate>
24

</ul>
25

</FooterTemplate>
26

</asp:Repeater>
27

</li>
28

</ItemTemplate>
29

</asp:Repeater>

这两个Repeater生成的HTML标记（为了节省篇幅一些标记被移除了）：

<li>
2

<a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
3

<ul>
4

<li>
5

<a href="/Code/BasicReporting/SimpleDisplay.aspx">
6

Simple Display</a>
7

</li>
8

<li>
9

<a href="/Code/BasicReporting/DeclarativeParams.aspx">
10

Declarative Parameters</a>
11

</li>
12

<li>
13

<a href="/Code/BasicReporting/ProgrammaticParams.aspx">
14

Setting Parameter Values</a>
15

</li>
16

</ul>
17

</li>
18

<li>
20

<a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
21

</li>
23

<li>
25

<a href="/Code/CustomFormatting/Default.aspx">
26

Customized Formatting</a>
27

</li>

4. 因为我们使用了这样的CSS

#navigation {
width: 200px;
top: 5em;
left: 1em;
width: 13em;
position:absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
显示结果是这样的：
A Menu Composed from Two Repeaters and Some CSS

5. 添加breadcrumb导航
breadcrumb导航在asp.net 2.0中是简单的－只要添加一个SiteMapPath控件到页面上就可以了；不需要更多的代码。

<span class="breadcrumb">
2

<asp:SiteMapPath ID="SiteMapPath1" runat="server">
3

</asp:SiteMapPath>
4

</span>

6. ViewState   当你点击返回上一级时，你在上一个页面填写的内容会不会还在。
    最终生成HTML时ViewState被系列化并保存在一个隐藏的表单域中。控件用ViewState来记忆它们在页面返回时被程序改变的状态，比如Web控件绑定的数据。如果视图状态允许信息可以在页面返回时保持，它会增大发送到客户端HTML代码的尺寸。
    可以将EnableViewState属性设为false在页面级或者控件级关闭视图状态。

7. Web User Control

转载于:https://www.cnblogs.com/DylanWind/archive/2008/12/01/1344787.html