在本章中，我们将介绍如何创建具有一致布局的网站.您可能每天都会看到许多网站具有一致的外观和感觉，例如 :
每个页面都有相同的标题
每个页面都有相同的页脚
每个页面都有相同的样式和布局
为了提高效率并为您的网站创建网页，您可以创建可重复使用的内容块，如页眉和页脚对于您的网站，您可以为所有页面创建一致的布局.
ASP.NET允许您创建带有内容块的单独文件，可以包含文本，标记和代码，就像常规网页一样.
然后，您可以在要显示信息的网站上的其他页面中插入内容块.
这样您就不必复制和粘贴每页都有相同的内容.
创建常见的conte这样也可以更容易地更新您的网站.
如果您需要更改内容，您只需更新单个文件，更改即可然后在任何地方都反映出内容已被插入.
让我们看一个简单的例子，我们将创建一个引用两个的页面内容块和减号;页眉和页脚位于单独的文件中.您可以在网站的任何页面中使用这些相同的内容块.
右键单击项目，在根目录中创建一个新的 index.cshtml 文件.选择一个新文件.
选择CSHTML文件在"名称"字段中键入并输入 index.cshtml ，然后单击"确定"并在index.cshtml文件中替换以下代码
@{ }
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>My Website</title>
</head>
<body>
<h1>This is Index Page Content</h1>
<p>This is the content of the main page in our website.</p>
</body>
</html>现在让我们运行应用程序并指定以下url http://localhost:46023/index 然后您将看到以下内容输出.
现在，我们需要在网站中添加页眉和页脚，因此在根文件夹中，通过右键单击项目并选择"新建文件夹"创建文件夹，然后将其命名为"共享".通常的做法是在名为Shared的文件夹中存储在Web页面之间共享的文件.您也可以参考以下屏幕截图.
右键单击Shared文件夹并选择New File.
选择CSHTML文件类型并在Name字段中输入 _Header.cshtm ，然后单击OK.
前导下划线(_)字符是重大.如果页面名称以下划线开头，则ASP.NET不会直接将该页面发送到浏览器.此约定允许您定义站点所需的页面，但同时用户不能直接请求它们.
替换_Header.cshtm中的代码，如图所示在以下程序中.
<div class = "header"> This is header text from _Header.cshtml file </div>
同样，在Shared文件夹中添加另一个文件_footer.cshtml并替换代码，如以下程序所示.
<div class = "footer"> © 2016 XYZ Pvt. Ltd. All rights reserved. </div>
正如您所看到的，我们已经添加了页眉和页脚，现在我们需要通过调用从Index.cshtml页面显示这些内容. RenderPage 方法如以下程序所示.
@{ }
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title>My Website</title>
</head>
<body>
@RenderPage("/Shared/_Header.cshtml")
<h1>This is Index Page Content</h1>
<p>This is the content of the main page in our website.</p>
@RenderPage("/Shared/_Footer.cshtml")
</body>
</html>您可以通过调用RenderPage方法将内容块插入到网页中，并将其传递给要在其中插入其内容的文件的名称点.在上面的代码中，您可以看到我们已将_Header.cshtml和_Footer.cshtml文件的内容插入到Index.cshtml文件中.
现在让我们再次运行应用程序并指定关注url : http://localhost:46023/index 然后你会看到以下输出.
同样，您可以通过调用RenderPage方法在网站的所有页面上添加页眉和页脚，并将其传递给文件名.
为网站创建一致外观的更结构化方法是使用布局页面.布局页面定义了网页的结构，但不包含任何实际内容.
布局页面是就像任何HTML页面一样，除了它包含对RenderBody方法的调用.
RenderBody方法在布局页面中的位置决定了来自哪里的信息将包含内容页面.
创建布局页面后，您可以创建包含内容的网页，然后将其轻松链接到布局页面.
当显示这些页面时，它们将根据布局页面进行格式化.
布局页面作为一种模板，用于在其他页面中定义的内容.
让我们在根目录中添加一个布局页面右键单击并选择一个新文件的网站.
单击"确定"继续并执行请使用以下代码:
@{ }
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Structured Content </title>
<link href = "@Href("/Styles/Site.css")" rel = "stylesheet" type = "text/css" />
</head>
<body>
@RenderPage("/Shared/_Header.cshtml")
<div id = "main">@RenderBody()</div>
@RenderPage("/Shared/_Footer.cshtml")
</body>
</html>您可以在布局页面中使用RenderPage方法插入内容块，就像我们在上面的代码中用于页眉和页脚一样.布局页面只能包含一次RenderBody方法调用.
在上面的代码中，您可以看到我们添加了对 Site.css 文件的引用，但是我们还没有创建这个文件，因此我们需要在根文件夹中添加一个新文件夹，并将其命名为Styles.
在Styles文件夹中，创建一个名为Site.css的文件
在Site.css文件中添加以下样式定义 :
h1 {
border-bottom: 3px solid #2f84d6;
font: 3em/2em Georgia, serif;
color: #911a42;
}
ul {
list-style-type: none;
}
body {
margin: auto;
padding: 1em;
background-color: #d9dbdb;
font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
color: #100478;
}
#list {
margin: 1em 0 7em -3em;
padding: 1em 0 0 0;
background-color: #ffffff;
color: #996600;
width: 25%;
float: left;
}
#header, #footer {
margin: 0;
padding: 0;
color: #996600;
}现在让我们使用 MyLayoutPage.cshtml 名称在项目中添加另一个cshtml文件，并添加以下代码.
@{
Layout = "~/_Layout.cshtml";
}
<h1> H1 Heading from the Layout page </h1>
<p> This is the Main Body part from the Layout page</p>要从任何页面使用新布局，您只需在任何页面的顶部添加以下行，如以下程序所示.
@{
Layout = "~/_Layout.cshtml";
}现在让我们再次运行应用程序并指定以下URL http://localhost:46023/MyLayoutPage 然后你会看到以下输出.
