【ASP.NET Step by Step】之三 Master Pages and Site Navigation

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

    新建的页面：
    Default.aspx

1<%@ 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控件中：

1<div id="navigation">
2    <asp:Menu ID="Menu1" runat="server"
3      DataSourceID="SiteMapDataSource1">
4    </asp:Menu>
5
6    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
7</div>

 

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

 1<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
 8            <asp:Repeater runat="server"
 9             DataSource="<%# ((SiteMapNode)
10             Container.DataItem).ChildNodes %>">
11                <HeaderTemplate>
12                    <ul>
13                </HeaderTemplate>
14
15                <ItemTemplate>
16                    <li>
17                        <asp:HyperLink runat="server"
18                         NavigateUrl="<%# Eval("Url") %>">
19                         <%# Eval("Title") %></asp:HyperLink>
20                    </li>
21                </ItemTemplate>
22
23                <FooterTemplate>
24                    </ul>
25                </FooterTemplate>
26            </asp:Repeater>
27        </li>
28    </ItemTemplate>
29</asp:Repeater>

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

 1<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
19<li>
20    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
21    
22</li>
23
24<li>
25    <a href="/Code/CustomFormatting/Default.aspx">
26      Customized Formatting</a>
27    
28</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;
}
显示结果是这样的：

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

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