《asp.net mvc3 高级编程》第三章 视图

一、视图的作用

视图的职责是向用户提供界面。从ASP.NET MVC3开始，视图数据也可以通过ViewBag属性访问。例如：ViewBag.Message 就等于ViewData["Message"]。

下面来快速浏览一个视图的例子。如下代码片段所示：

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

这是一个极其简单的视图，实现了通过@ViewBag.Message表达式来显示控制器设置的消息。这里需要注意的重要一点事，视图不想ASP.NET Web Forms和PHP一样，它本身不会被直接访问，浏览器不能指向一个视图并渲染它。而是通过控制器来渲染。通过下面控制器来渲染上面的视图，控制器将ViewBag.Message属性的值设置成一个字符串，然后返回一个名为Sample的视图。如下代码片段所示：

1  public class HomeController : Controller
2     {
3         public ActionResult Sample()
4         {
5             ViewBag.Message = "Hello world.";
6             return View("Sample");
7         }
8     }
View Code

二、指定视图

按照约定，每个控制器在Views目录下都有一个对应的文件夹，其名称与控制器一样，只是没有Controller后缀名而已。例如：控制器HomeController在Views目录下应该对应有个名为Home的文件夹。

1.返回默认视图

在每一个控制器的View文件夹中，每一个操作方法都有一个名称相同的视图文件与之相对应。这就提供了视图与操作方法关联的基础。例如下面代码片段所示：

1 public class HomeController : Controller
2     {
3         public ActionResult Index()
4         {
5             ViewBag.Message = "欢迎使用 ASP.NET MVC!";
6 
7             return View();
8         }
9     }
View Code

当不指定返回视图名称时（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         }
View Code

3.返回完全不同目录结构中的视图

在一些情形下，甚至需要制定完全位于不同目录结构中的视图。这样可以使用带有~符号的语法来提供视图的完整路径，但是为了在查找视图时避开视图引擎的内部查找机制，在使用这种语法时，必须提供视图的文件扩展名。例如下面代码片段所示：

1  public ActionResult Index()
2         {
3             ViewBag.Message = "欢迎使用 ASP.NET MVC!";
4             return View("~/Views/Example/Index.cshtml");
5         }
View Code

三、强类型视图

 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         }
View Code 
1 <ul>
2     @foreach (dynamic a in ViewBag.Albums) { 
3         <li>@a.Title</li>
4     }
5 </ul>
View Code

四、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>Item@item.Name.<.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 &#64;hacked

           或

           My Twitter Handle is @@haacked

Web Forms：&lt;%expression%&gt; 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中的母版页作用是相同的，但是前者提供了更加简洁的语法和更大的灵活性。下面演示了一个非常简单的布局：

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

看起来与普通的视图没有什么差别，但是视图布局中有个@RenderBody调用，这是一个占位符，用来标记使用这个布局的视图主要内容的位置。下面代码引用了该视图来渲染：

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

布局可能有多个节，可以在上面模板的基础上添加一个页脚节：

 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>
View Code 
 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     }
View Code

注意：默认在不加@section为布局定义中一个节指定内容时会报错，所以，必须为每个节都提供内容，但是，RenderSection方法有个重载版本，允许指定不需要的节。可以给required参数传递一个false值来标记Footer节是可选的：

<footer>@RenderSection("Footer",false)</footer>

也可以：

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

六、ViewStart

加入每个视图都使用Layout属性来指定他的布局，如果多个视图使用同一个布局，就会产生冗余，并且很难维护。_ViewStart.cshtml页面可以用来消除这种冗余。他的代码先于同目录下任何视图代码的执行。也可以递归地应用到子目录下的任何视图。当创建默认的mvc3的项目时，会在Views目录下自动添加了一个_ViewStart.cshtml文件，他制定了一个默认布局。

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

因为这个代码优先任何视图运行，所以一个视图可以重写Layout属性的默认值，从而选择一个不同的布局。

7、指定部分视图

除了返回视图之外，操作方法也通过PartialView方法以PartialViewResult的形式返回分部视图，代码如下：

  

1     public class HomeController : Controller
2     {
3         public ActionResult Message() {
4             ViewBag.Message = "this is a partial view";
5             return PartialView();
6         }
7     }
View Code

使用Jquery将一个分部视图加载到一个使用了AJAX调用的当前视图中：

1 <div id="result"></div>
2 
3 <script type="text/javascript">
4     $(function () {
5         $('#result').load('/home/message');
6     });
7 </script>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liangdaye/p/3362477.html