ASP.NET MVC 4 - Razor 中的布局和区域
4.72/5 (17投票s)
布局用于 Web 应用程序所有页面的统一外观和感觉。
引言
假设您正在开发一个 ASP.NET Web 应用程序，并且希望在 Web 应用程序的所有页面中保持一致的外观和感觉。这时您有两个选择，第一个是在每个页面上设计页眉、正文和页脚部分。在这种方法中，您需要在每个页面上编写更多代码，因此 ASP.NET 2.0 引入了“母版页”，当使用 .aspx 页面或模板时，母版页可以帮助实现这一点。这是您的第二个选择。Razor 也支持这个概念，并提供了一个名为“布局”的功能，允许您定义一个通用的站点模板，然后在 Web 应用程序的所有视图/页面中继承其外观和感觉。
创建 MVC 应用程序
我将使用 Visual Studio 2012 创建一个 MVC 应用程序。所以，让我们一步一步地看看如何创建 MVC 应用程序。
步骤 1：转到“文件”->“新建”->“项目...”。
步骤 2：从列表中选择“ASP.NET MVC 4 Web Application”，然后将应用程序命名为“LayoutMvcApplication”，并在位置输入框中设置您想要创建应用程序的路径。
步骤 3：现在从下拉列表中选择“Empty”项目模板，并将“Razor”选为视图引擎。
为应用程序创建布局
布局用于为 Web 应用程序的所有页面提供一致的外观和感觉，因此我们为 Web 应用程序创建布局。让我们看看具体步骤。
步骤 1：在 Web 应用程序的根目录下创建一个“Content”文件夹。
步骤 2：在 Content 文件夹下创建一个样式表“Site.css”。该 CSS 文件包含一致的 Web 应用程序页面设计所需的所有 CSS 类。
步骤 3：在“View”文件夹下创建一个“Shared”文件夹。
步骤 4：在“Shared”文件夹下创建一个“_Layout.cshtml”文件。“_Layout.cshtml”文件代表应用程序中每个页面的布局。在解决方案资源管理器中右键单击 Shared 文件夹，然后转到“添加”项并单击“视图”。
现在视图已创建。在“_Layout.cshtml”文件中编写以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Code Express</title>
<link href="~/favicon.ico"
rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet"
href="@Url.Content("~/Content/Site.css")" />
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
@Html.ActionLink("Code Express",
"Index", "Home")
</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home",
"Index", "Home")</li>
<li>@Html.ActionLink("About",
"About", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year – Code Express</p>
</div>
</div>
</footer>
</body>
</html>
在此布局中，我们使用了一个 HTML 助手方法和其他一些系统定义的方法，所以我们逐一查看这些方法。
Url.Content()：Content()方法是UrlHelper类的一个方法。它将虚拟（相对）路径转换为应用程序的绝对路径。它有一个 string 类型的参数，即内容的虚拟路径。它返回应用程序的绝对路径。如果指定的内容路径（方法的参数）不以波浪号 (~) 开头，则此方法将按原样返回contentPath。Url.Content()可确保所有链接都能正常工作，无论站点是在虚拟目录中还是在网站根目录中。Html.ActionLink()：在 MVC 中渲染 HTML 链接的最简单方法是使用HTML.ActionLink()助手。使用 MVC 时，Html.ActionLink()不会链接到视图。它会创建一个指向控制器操作的链接。ActionLink()是HtmlHelper类的扩展方法。它返回一个包含指定操作的虚拟路径的锚元素（ 元素）。当您使用ActionLink()方法时，需要传递三个 string 参数。这些参数是linkText（锚元素的内部文本）、actionName（操作的名称）和controllerName（控制器的名称）。RenderSection()：RenderSection()是WebPageBase类的一个方法。Scott 曾写道，传递给“RenderSection()”助手方法的第一个参数指定了要在布局模板中的该位置呈现的区域的名称。第二个参数是可选的，它允许我们定义要呈现的区域是必需的还是可选的。如果一个区域是“必需的”，那么如果该区域未在基于布局文件的视图模板中实现，Razor 将在运行时抛出错误（这可以更轻松地查找内容错误）。它会返回要呈现的 HTML 内容。RenderBody()：在布局页面中，渲染内容页面中不在命名区域内的部分。它返回要呈现的 HTML 内容。RenderBody是必需的，因为它负责渲染每个视图。
_ViewStart 文件
Views 文件夹中的“_ViewStart”文件包含以下内容
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
在 MVC 应用程序中创建控制器
您需要创建一个控制器，其中包含一个操作方法以在用户界面上呈现视图。我将创建一个 HomeController 控制器，其中包含两个操作方法：一个名为 Index，另一个名为 About。这两个操作方法在请求类型为 GET 时执行，并在浏览器上呈现视图。因此，请使用以下步骤
步骤 1：在解决方案资源管理器中右键单击 Controllers 文件夹，然后转到“添加”并单击“Controller”。
步骤 2：将 Controller 名称输入字段命名为 HomeController，并从 Template 下拉列表中选择“Empty MVC controller”。然后，单击“Add”。
现在您需要在“HomeController.cs”文件中编写以下代码
using System.Web.Mvc;
namespace LayoutMvcApplication.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Index()
{
return View();
}
}
}
在 MVC 应用程序中创建视图
您需要创建两个视图（Index 和 About），它们通过“_ViewStart”视图继承“_Layout”视图，因此您需要使用以下步骤。
步骤 1：在“HomeController.cs”文件中的 Index() 操作方法上右键单击，然后单击“Add View”。
步骤 2：保持“Add New”屏幕不变，然后单击“Add”。
现在您应该在 Web 应用程序的 index 视图中编写以下代码
@{
ViewBag.Title = "Index";
}
@section featured
{
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
</hgroup>
<p>
It is featured section. That is named section in
Layout template that defined by RenderSection
</p>
</div>
</section>
}
<p> It is body of Index view that renders in BodyRender.</p>
您可以对 About 视图遵循相同的步骤进行创建。
您可以为 About 视图获得相同的设计。您可以从附件中下载源代码。