母版页
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<style>
ul {
background-image: url('../../img/7b50273d71752d27eb3d3653cefec9c2.jpg');
background-repeat:no-repeat;
height:50px;
}
ul li {
float:left;
line-height:50px;
list-style:none;
padding-left:10px;
padding-right:10px;
margin-left:10px;
margin-right:10px;
}
a {
color:#ff0000
}
</style>
</head>
<body>
<div>
<ul>
<li><a>首页</a>|</li>
<li><a href="/Home/Index">登录</a>|</li>
<li><a href="/Home/Index1">注册</a>|</li>
<li><a>末页</a></li>
</ul>
</div>
@RenderBody()
@*@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)*@
</body>
</html>
创建母版页
第一个步骤是为该网站创建母版页。此时,我们的网站仅包含以下内容:Typed DataSet( Northwind.xsd ,位于 App_Code 文件夹中)、 BLL 类( App_Code 文件夹中的 ProductsBLL.cs 、 CategoriesBLL.cs 等)、数据库( NORTHWND.MDF ,位于 App_Data 文件夹中)、配置文件 (Web.config) 和一个 CSS 样式表文件 (Styles.css) 。我从前两篇教程中删除了使用 DAL 和 BLL 演示的页面和文件,因为我们还会在后面的教程中再次详细介绍这些示例。
图2 :此项目中的文件
要创建母版页,在Solution Explorer 中右键单击该项目的名称,选择 Add New Item 。然后,从模板列表中选择 Master Page 类型,将其命名为 Site.master 。
图3 :为网站添加一个新母版页
在此母版页中定义站点级页面布局。可以使用Design 视图添加所需的布局或 Web 控件,或者在Source 视图中手动添加标记。在我的母版页中,我利用级联样式表 进行定位,并使用了在外部文件 Style.css 中定义的带有 CSS 设置的样式。通过定义 CSS 规则,导航 <div> 的内容按以下方式完全定位:在左侧显示,固定宽度为 200 像素。
Site.master
复制代码
<%@ 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 >
<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>
母版页定义的内容包括固定的页面布局,以及使用该母版页的 ASP.NET 页面的可编辑的区域。你可以通过 ContentPlaceHolder 控件指出这些内容可编辑的区域,并在 <div> 内容中查看。我们的母版页只有一个 ContentPlaceHolder (MainContent) ,但在通常情况下,母版页可以有许多 ContentPlaceHolders 。
使用前面输入的标记,切换到显示母版页布局的 Design 视图。使用此母版页的所有 ASP.NET 页面都将显示如下的统一布局,而指定的MainContent区域则是每个页面不同的区域。
图4 :通过 Design 视图查看的母版页