ASP.NET 2.0数据教程：创建母版页-asp.net mvc 母版页

通常，用户友好的个性化站点都有着一致的，站点统一的页面布局和导航体系。asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具，它们是母版页和站点导航。母版页允许开发者创建统一的站点模板和指定的可编辑区域。这样，aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了，所有在母版页中定义的其他标记将出现在所有使用了该母版页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局，因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。

站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者，这意味着我们的站点地图将定义在一个xml格式的文件中。

为说明这些观念并且使我们的教程的示例站点可用性更佳，让我们通过本次课程定义一个站点统一的页面布局，实现一个站点地图，并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。

图1：本课程的最终成果

步骤1：创建母版页

第一步是为我们的站点创建母版页。到目前为止我们的站点只有一个类型化的DataSet（Northwind.xsd,位于App_Code文件夹），业务逻辑层类库（ProductsBLL.cs,CategoriesBLL.cs等等，这些都在App_Code文件夹里），数据库（NORTHWIND.MDF,位于App_Data文件夹），配置文件（web.config）,和一个CSS文件（Style.css）。

我整理这些页面和文件以说明前面两次课程中介绍的数据访问层和业务逻辑层将会在以后课程的更多细节中重用这些示例。

图2：我们项目中的文件

要创建母版页，用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母版类型并且命名为Site.master

图3：添加一个母版页到站点中

在母版页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件，你还可以手动的在代码视图中添加标记。在我们的母版页中使用了定义在外部文件Style.css中的层叠样式表来定义位置和风格。也许你不知道下面这些标记怎样显示，样式表规则定义了导航用的< div>标签中的内容绝对定位在页面的左边并且宽度固定为200像素。

< %@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" 
 %>  
   
 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   
 < html xmlns="http://www.w3.org/1999/xhtml" >  
 < head runat="server">  
     < title>Working with Data Tutorials< /title>  
     < link href="Styles.css" rel="stylesheet" type="text/css" />  
 < /head>  
< body>  
    < div id="wrapper">  
 
        < form id="form1" runat="server">  
 
            < div id="header">  
                < span class="title">Working with Data Tutorials< /span>  
                < span class="breadcrumb">  
                 TODO: Breadcrumb will go here< /span>  
            < /div>  
 
            < div id="content">  
                < asp:contentplaceholder id="MainContent" 
                 runat="server">  
                  < !-- Page-specific content will go here -->  
                < /asp:contentplaceholder>  
            < /div>  
 
            < div id="navigation">  
                TODO: Menu will go here  
            < /div>  
        < /form>  
    < /div>  
< /body>  
< /html>

一个母版页定义了固定的布局和可以被那些使用了母版页的aspx页面填充的可编辑区域

这个可编辑区域是通过ContentPlaceHolder控件显示，位于< div>标记中。我们的母版页中只有一个ContentPlaceHolder(MainContent),但是母版页中是可以包含多个ContentPlaceHolder控件的。

输入上面的标记，切换到设计视图观察母版页的布局。所有的使用了这个母版页的aspx页面都会有这样统一的布局，而MainContent区域是留给aspx页面展现自己才华的地方。

图4：在设计视图中显示的母版页

【编辑推荐】