视图
《asp.net mvc3 高级编程》第三章 视图
一、视图的作用
视图的职责是向用户提供界面。从ASP.NET MVC3开始，视图数据也可以通过ViewBag属性访问。例如：ViewBag.Message 就等于ViewData["Message"]。
下面来快速浏览一个视图的例子。如下代码片段所示：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div>
@ViewBag.Message
</div>
</body>
</html>
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <title>Sample</title> 10 </head> 11 <body> 12 <div> 13 @ViewBag.Message 14 </div> 15 </body> 16 </html>
这是一个极其简单的视图，实现了通过@ViewBag.Message表达式来显示控制器设置的消息。这里需要注意的重要一点事，视图不想ASP.NET Web Forms和PHP一样，它本身不会被直接访问，浏览器不能指向一个视图并渲染它。而是通过控制器来渲染。通过下面控制器来渲染上面的视图，控制器将ViewBag.Message属性的值设置成一个字符串，然后返回一个名为Sample的视图。如下代码片段所示：
public class HomeController : Controller
{
public ActionResult Sample()
{
ViewBag.Message = "Hello world.";
return View("Sample");
}
}
1 public class HomeController : Controller 2 { 3 public ActionResult Sample() 4 { 5 ViewBag.Message = "Hello world."; 6 return View("Sample"); 7 } 8 }
二、指定视图
按照约定，每个控制器在Views目录下都有一个对应的文件夹，其名称与控制器一样，只是没有Controller后缀名而已。例如：控制器HomeController在Views目录下应该对应有个名为Home的文件夹。
1.返回默认视图
在每一个控制器的View文件夹中，每一个操作方法都有一个名称相同的视图文件与之相对应。这就提供了视图与操作方法关联的基础。例如下面代码片段所示：
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "欢迎使用 ASP.NET MVC!";
return View();
}
}
1 public class HomeController : Controller 2 { 3 public ActionResult Index() 4 { 5 ViewBag.Message = "欢迎使用 ASP.NET MVC!"; 6 7 return View(); 8 } 9 }
当不指定返回视图名称时（return View();)，操作方法返回的ViewResult对象将按照约定来确定视图。它首先在目录/Views/ControllerName下查找控制器名称（不带Controller后缀）相同的视图。通过这种方法选择的视图便是/Views/Home/Index.cshtml。
2.返回不同的视图
如果想让Index操作方法渲染一个不同的视图，可以向其提供一个不同的视图名称，例如下面代码片段所示：
1 public ActionResult Index() 2 { 3 ViewBag.Message = "欢迎使用 ASP.NET MVC!"; 4 5 return View("NotIndex"); 6 }
1 public ActionResult Index() 2 { 3 ViewBag.Message = "欢迎使用 ASP.NET MVC!"; 4 5 return View("NotIndex"); 6 }
3.返回完全不同目录结构中的视图
在一些情形下，甚至需要制定完全位于不同目录结构中的视图。这样可以使用带有~符号的语法来提供视图的完整路径，但是为了在查找视图时避开视图引擎的内部查找机制，在使用这种语法时，必须提供视图的文件扩展名。例如下面代码片段所示：
1 public ActionResult Index() 2 { 3 ViewBag.Message = " 欢迎使用 ASP.NET MVC! " ; 4 return View( " ~/Views/Example/Index.cshtml " ); 5 }
1 public ActionResult Index() 2 { 3 ViewBag.Message = "欢迎使用 ASP.NET MVC!"; 4 return View("~/Views/Example/Index.cshtml"); 5 }
三、强类型视图
public ActionResult List()
{
var albums = new List<Album>();
for (int i = 0; i < 10; i++)
{
albums.Add(new Album { Title = "Title" + i });
}
ViewBag.Albums = albums;
return View();
}
1 public ActionResult List() 2 { 3 var albums = new List<Album>(); 4 for (int i = 0; i < 10; i++) 5 { 6 albums.Add(new Album { Title = "Title" + i }); 7 } 8 ViewBag.Albums = albums; 9 return View(); 10 }
1 <ul> 2 @foreach (dynamic a in ViewBag.Albums) { 3 <li>@a.Title</li> 4 } 5 </ul>
1 <ul> 2 @foreach (dynamic a in ViewBag.Albums) { 3 <li>@a.Title</li> 4 } 5 </ul>
四、Razor视图引擎
Razor中的核心转换字符是@。这个单一字符用做标记-代码的转换字符，有时也反过来用作代码-标记的转换符。这里一共有两种基本类型的转换：代码表达式和代码块。求出表达式的值，然后将值写入响应中。以下是Razor语法示例：
1.隐式代码表达式
Razor： <span>@model.Message</span>
WebForms: <span><%:model.Message%></span>
Razor中隐式代码表达式总是采用HTML编码方式。
2.显示代码表达式
Razor：<span>ISBN@(isbn)</span>
WebForms: <span>ISBN<%: isbn %></span>
3.无编码代码表达式
在一些情况下，需要明确地渲染一些不应该采用HTML编码的内容，这时候可以采用Html.Raw方法来保证这些内容不被编码。
Razor：<span>@Html.Raw(model.Message)</span>
Web Forms：<span><%:Html.Raw(model.Message)%></span>
或
<span><%=model.Message %></span>
4.代码块
Razor: @{
int x=123;
string y="because";
}
Web Forms：<%
int x=123;
string y="bacause";
%>
5.文本和标记相结合
Razor：@foreach(var item in items){
<span>[email protected].<.span>
}
Web Forms：<% foreache(var item in items){%>
<span>Item<%:item.Name%>.</span>
<%}%>
6.混合代码和纯文本
Razor：@if(showMessage){
<text>This is plain text</text>
}
@if(showMessage){
@:This is plain text.
}
Web Forms:<% if(showMessage){%>
This is plain text.
<%}%>
Razor可以采用两种不同的方式来实现代码和纯文本的混合。第一种方式是使用<text>标签，这样只是把标签内容写入到响应中，而标签本身则不写入。
7.转义代码分隔符
可以用“@@”来编码“@”以达到显示“@”的目的。
Razor：My Twitter Handle is @hacked
或
My Twitter Handle is @@haacked
Web Forms：<%expression%> marks a code nugget.
8.服务器端的注释
Razor：@*
This is a multiline server side comment.
@if(showMessage){
<h1>@ViewBag.Message</h1>
}
All of this is commented out.
*@
Web Forms: <%--
This is a multiline server side comment.
<%if(showMessage){%>
<h1>@<%:ViewBag.Message%></h1>
<% }%>
All of this is commented out.
--%>
9.调用泛型方法
Razor:@(Html.SomeMethod<AType>())
Web Forms:<%:Html.SomeMethod<AType>()%>
五、布局
Razor布局和Web Forms中的母版页作用是相同的，但是前者提供了更加简洁的语法和更大的灵活性。下面演示了一个非常简单的布局：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h1>@ViewBag.Title</h1>
<div>
@RenderBody()
</div>
</body>
</html>
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>@ViewBag.Title</title> 6 </head> 7 <body> 8 <h1>@ViewBag.Title</h1> 9 <div> 10 @RenderBody() 11 </div> 12 </body> 13 </html>
看起来与普通的视图没有什么差别，但是视图布局中有个@RenderBody调用，这是一个占位符，用来标记使用这个布局的视图主要内容的位置。下面代码引用了该视图来渲染：
@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
ViewBag.Title = "主页";
}
<h2>@ViewBag.Message</h2>
<p>
This is the main content!
</p>
1 @{ 2 Layout = "~/Views/Shared/SiteLayout.cshtml"; 3 ViewBag.Title = "主页"; 4 } 5 6 <h2>@ViewBag.Message</h2> 7 <p> 8 This is the main content! 9 </p>
布局可能有多个节，可以在上面模板的基础上添加一个页脚节：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h1>@ViewBag.Title</h1>
<div>
@RenderBody()
</div>
<footer>@RenderSection("Footer")</footer>
</body>
</html>
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>@ViewBag.Title</title> 6 </head> 7 <body> 8 <h1>@ViewBag.Title</h1> 9 <div> 10 @RenderBody() 11 </div> 12 <footer>@RenderSection("Footer")</footer> 13 </body> 14 </html>
@{
Layout = "~/Views/Shared/SiteLayout.cshtml";
ViewBag.Title = "主页";
}
<h2>@ViewBag.Message</h2>
<p>
This is the main content!
</p>
@section Footer{
This is the <strong>footer</strong>.
}
1 @{ 2 Layout = "~/Views/Shared/SiteLayout.cshtml"; 3 ViewBag.Title = "主页"; 4 } 5 6 <h2>@ViewBag.Message</h2> 7 <p> 8 This is the main content! 9 </p> 10 11 @section Footer{ 12 This is the <strong>footer</strong>. 13 }
注意：默认在不加@section为布局定义中一个节指定内容时会报错，所以，必须为每个节都提供内容，但是，RenderSection方法有个重载版本，允许指定不需要的节。可以给required参数传递一个false值来标记Footer节是可选的：
<footer>@RenderSection("Footer",false)</footer>
也可以：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<h1>@ViewBag.Title</h1>
<div>
@RenderBody()
</div>
<footer>@if (IsSectionDefined("Footer")) {
RenderSection("Footer");
} else {
<span>This is the default footer.</span>
}
</footer>
</body>
</html>
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>@ViewBag.Title</title> 6 </head> 7 <body> 8 <h1>@ViewBag.Title</h1> 9 <div> 10 @RenderBody() 11 </div> 12 <footer>@if (IsSectionDefined("Footer")) { 13 RenderSection("Footer"); 14 } else { 15 <span>This is the default footer.</span> 16 } 17 </footer> 18 </body> 19 </html>
六、ViewStart
加入每个视图都使用Layout属性来指定他的布局，如果多个视图使用同一个布局，就会产生冗余，并且很难维护。_ViewStart.cshtml页面可以用来消除这种冗余。他的代码先于同目录下任何视图代码的执行。也可以递归地应用到子目录下的任何视图。当创建默认的mvc3的项目时，会在Views目录下自动添加了一个_ViewStart.cshtml文件，他制定了一个默认布局。
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
因为这个代码优先任何视图运行，所以一个视图可以重写Layout属性的默认值，从而选择一个不同的布局。
7、指定部分视图
除了返回视图之外，操作方法也通过PartialView方法以PartialViewResult的形式返回分部视图，代码如下：
public class HomeController : Controller
{
public ActionResult Message() {
ViewBag.Message = "this is a partial view";
return PartialView();
}
}
1 public class HomeController : Controller 2 { 3 public ActionResult Message() { 4 ViewBag.Message = "this is a partial view"; 5 return PartialView(); 6 } 7 }
使用Jquery将一个分部视图加载到一个使用了AJAX调用的当前视图中：
<div id="result"></div>
<script type="text/javascript">
$(function () {
$('#result').load('/home/message');
});
</script>
1 <div id="result"></div> 2 3 <script type="text/javascript"> 4 $(function () { 5 $('#result').load('/home/message'); 6 }); 7 </script>