1. 概述
本章内容包括：实现可在不同区域重用的片段、使用Razor模板设计和实现页面、设计可视结构的布局、基于模板页开发。
2. 主要内容
2.1 实现可在不同区域重用的片段
最简单的重用方式就是在设计视图中插入一个局部视图(partial view).
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
* 绑定到一个模板的局部试图，如果被放置到绑定了其他模板的视图中，会导致一些问题。
2.2 使用Razor模板设计和实现页面
Razor模板是使用Razor视图引擎的强大功能来创建、维护以及显示页面布局片段的一种方式。
使用@Html.EditorFor helper方法时可以使用EditorTemplate。
* @Html.EditorFor(model=>model.Article)
@model MyMVCApplication1.Article
@if (Model != null) {
@Html.TextBox("", Model.Title)
@Html.TextBox("", Model.Body)
}
else
{
@Html.TextBox("", string.Empty)
@Html.TextBox("",string.Empty)
}
2.3 设计可视结构的布局
一般来说，一个网页或者一个MVC程序页面都包含一个header区域、一个menu区域、一个内容区域、一个footer区域。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Application Title Name</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2013-09-04T16:31:24+02:00">
September 4th 2013</time> by
<a href="#">Writer</a> - <a href="#comments">6 comments</a>
</p>
</header>
<p>This is a sample text. This is a sample Text.</p>
</article>
</section>
<aside>
<h2>About section</h2>
<p>This is a sample text</p>
</aside>
<footer>
<p>Copyright information</p>
</footer>
</body>
</html>
2.4 基于模板页开发
MVC web程序的UI都是基于模板页布局的。也可以在代码中切换到其他模板页。
@if (ViewBag.Switch = "Layout1")
{
Layout = "~/Views/Shared/_plainLayout.cshtml";
}
else
{
Layout = "~/Views/Shared/_Layout.cshtml";
}
3. 总结
① 局部试图是在多页面间重用的一种方式。类似ASP.NET中的用户控件。局部试图一般放在 Views/Shared文件夹中。
② 使用Razor视图引擎可以创建可重用的模板。这些模板一般存放到~Views/Shared/EditorTemplates 或者~Views/ControllerName/EditorTemplates中。
通过 @Html.EditorFor 和 @Html.DisplayFor来调用。
③ 应当尽可能的重用视图。如果视图使用不同的模型和控制器，还需要自己实现验证操作。
④ 模板页可以通过代码来切换。