母版页

最新推荐文章于 2022-04-09 11:51:41 发布

GaraMaps

最新推荐文章于 2022-04-09 11:51:41 发布

阅读量678

点赞数

分类专栏：前台文章标签：母版页

前台专栏收录该内容

18 篇文章 0 订阅

订阅专栏

母版页

代码

<!DOCTYPE html>

<html>

<head>

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

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

<title>Working with Data Tutorials</title>

</head>

<body>

<span class="title">Working with Data Tutorials</span>

TODO: Breadcrumb will go here...</span>

</div>

<asp:contentplaceholder id="MainContent"

runat="server">

</asp:contentplaceholder>

</div>

TODO: Menu will go here...

</div>

</form>

</div>

</body>

</html>

母版页定义的内容包括固定的页面布局，以及使用该母版页的 ASP.NET 页面的可编辑的区域。你可以通过 ContentPlaceHolder 控件指出这些内容可编辑的区域，并在 <div> 内容中查看。我们的母版页只有一个 ContentPlaceHolder (MainContent) ，但在通常情况下，母版页可以有许多 ContentPlaceHolders 。

使用前面输入的标记，切换到显示母版页布局的 Design 视图。使用此母版页的所有 ASP.NET 页面都将显示如下的统一布局，而指定的MainContent区域则是每个页面不同的区域。

图4 ：通过 Design 视图查看的母版页

GaraMaps

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
母版页

母版页代码!DOCTYPE html>html>head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>@ViewBag.Titletitle> @Styles.Render("~/Content/css")
复制链接

扫一扫

专栏目录