步骤1:创建母板页
要创建一个母板页,用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master。添加一个母板页到站点中,在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件,你还可以手动的在代码视图中添加标记,然后调用外部的Css样式表进行定义。
母板页中可编辑区域是通过ContentPlaceHolder控件显示,一个母板页中是可以包含多个ContentPlaceHolder控件。
步骤2:给站点添加一个主页
在解决方案管理器中右键点击项目名称并且选择添加新建项目。从模板列表中选择Web Form选项并且命名为Default.aspx。并且,勾上“选择母板页”的复选框。
点击确定按钮后,选择一个母板页。
选择母板页后,新建的aspx会包含下面这些标记:

Default.aspx

<%...@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>


@Page里可以设定Title属性。
切换到设计视图我们会看到我们的页面将在浏览器中的显示效果。注意:在设计视图里,aspx页面的内容只有可编辑区域可以被修改,在母板页定义的非ContentPlaceHolder部分标记被显示成灰色。
第三步:添加站点地图

要创建站点地图,在解决方案管理器里右键点击项目名称,选择添加新项,然后选择站点地图类型。命名为Web.sitemap然后单击添加按钮。

站点地图文件是一个xml文件。注意:Visual Studio可以为站点地图结构提供智能感知。站点地图文件必须含有<siteMap>作为根节点,它必须至少含有一个<siteMapNode>子节点。这个<siteMapNode>元素又可以包含任意数量的<siteMapNode>子元素。

步骤4:利用站点地图显示菜单

 

为了获取站点地图中的数据,asp.net提供了SiteMapDataSource控件,它允许我们绑定一个Web控件来显示我们的站点地图。

TreeView和Menu这两个Web控件常常用来提供导航用户界面。要绑定站点地图中的数据到这两个控件,添加一个SiteMapDataSource控件到页面中,设置TreeView或者Menu控件的DataSourceID属性值为SiteMapDataSource控件的ID属性值就可以了。

为了生成优化的HTML,我们可以绑定SiteMapDataSource控件到Repeater控件。

两个repeater代码如下:


 

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
     <ItemTemplate>
         <li>
             <asp:HyperLink runat="server"
             NavigateUrl="<%# Eval("Url") %>">
             <%......# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server"
            DataSource="<%# ((SiteMapNode)
            Container.DataItem).ChildNodes %>">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server"
                         NavigateUrl="<%# Eval("Url") %>">
                         <%......# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
     </ItemTemplate>
 </asp:Repeater> 

可以用Css定义菜单样式。
最后关掉视图状态,设置Repeater控件的EnableViewState为false可以减少页面的视图状态。这样能精简很多代码。
步骤5:添加breadcrumb导航
添加一个breadcrumb导航在asp.net 2.0中是简单的,只要添加一个SiteMapPath控件到页面上就可以了;不需要更多的代码。
【总结】
初看.net的母板和原来Dreamweaver里的母板还是挺像的,但是老实说,Dw里的母板我从来没用过。.net的模板还是挺有用的。特别是在有大批代码的环境下,母板的合理应用能让视觉和条理上清晰很多,需要修改的时候也能减少很多工作。Web.sitemap能够整理站点页面布局和导航机制,方便网站导航上的调用。

 

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3