了解视图、视图数据和 HTML Helper

本教程的目的是向读者简单介绍 ASP.NET MVC 视图、视图数据和 HTML Helper。在本教程的最后，您将了解如何创建新视图、如何将数据从控制器传递给视图，以及如何使用 HTML Helper 在视图中生成内容。

了解视图

不同于 ASP.NET 或 Active Server Pages，ASP.NET MVC 不包含任何与页面有直接关系的内容。在 ASP.NET MVC 应用程序中，磁盘上没有对应于在浏览器地址栏输入的 URL 中的路径的页面。在 ASP.NET MVC 应用程序中，最接近页面的内容称为视图。

在 ASP.NET MVC 应用程序中，进入的浏览器请求被映射为控制器操作。控制器操作可能返回一个视图。然而，控制器操作可能执行其他类型的操作，例如将用户重定向到另一个控制器操作。

程序清单 1 中包含一个简单的控制器，名称为 HomeController。HomeController 公开两个控制器操作，名称为 Index() 和 Details()。

程序清单 1 HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcApp.Controllers
{
     [HandleError]
     public class HomeController : Controller
     {
          public ActionResult Index()
          {
               return View();
          }
 
          public ActionResult Details()
          {
               return RedirectToAction("Index");
          }
     }
}

通过在浏览器地址栏中输入以下 URL，可以激活第一个操作，Index() 操作：

/Home/Index

通过在浏览器地址栏中输入以下 URL，可以激活第二个操作，Details() 操作：

/Home/Details

Index() 操作返回一个视图。创建的大多数操作都将返回视图。然而，操作也可以返回其他类型的操作结果。例如， Details() 操作返回 RedirectToActionResult，可以将进入的请求重定向到 Index() 操作。

Index() 操作包含下面一行代码：

return View();

这行代码返回一个位于 Web 服务器的以下路径的视图：

\Views\Home\Index.aspx

视图的路径指明控制器的名称和控制器操作的名称。

如果愿意，可以写明视图。下面一行代码返回名称为“Fred”的视图：

return View();

这行代码返回一个位于 Web 服务器的以下路径的视图：

\Views\Home\Index.aspx

视图的路径指明控制器的名称和控制器操作的名称。

如果愿意，可以写明视图。下面一行代码返回名称为“Fred”的视图：

return View(“Fred”);

执行此行代码时，视图从下面的路径返回：

\Views\Home\Fred.aspx

创建视图

右键单击 Solution Explorer 窗口中的某个文件夹，然后选择菜单选项 Add，New Item（如图 1 所示）创建视图。选择 MVC View Page 模板向项目添加标准视图。

图 1：向项目添加新视图（单击查看大图）

请注意，不能像在 ASP.NET 或 Active Server Pages 应用程序中添加页面一样在项目中随意添加视图。必须将视图添加到与控制器名称相同（不带 Controller 前缀）的文件夹中。例如，如果想创建名称为 Index 的新视图，并且它能够由名称为 ProductController 的控制器返回，则必须将视图添加到项目的以下文件夹中：

\Views\Product\Index.aspx

包含视图的文件夹的名称必须与返回视图的控制器的名称对应。

向视图添加内容

视图是可以包含脚本的标准 (X)HTML 文档。使用脚本向视图添加动态内容。

例如，程序清单 2 中的视图显示当前日期和时间。

程序清单 2 \Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApp.Views.Home.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
     <head runat="server">
          <title>Index</title>
     </head>
     <body>
          <div>
               The current date and time is:
               <% Response.Write(DateTime.Now);%>
          </div>
     </body>
</html>

请注意，程序清单 2 中的 HTML 页面的主体包含下面的脚本：

<% Response.Write(DateTime.Now);%>

使用脚本分隔符 <% 和 %> 标记脚本的开始和结束。此脚本是使用 C# 编写的。它通过调用 Response.Write() 方法将当前日期和时间显示到浏览器中。脚本分隔符 <% 和 %> 可以用于执行一条或多条语句。

因为经常调用 Response.Write()，所以 Microsoft 提供了调用 Response.Write() 方法的快捷方式。程序清单 3 中的视图使用分隔符 <%= 和 %> 作为调用 Response.Write() 的快捷方式。

程序清单 3 Views\Home\Index2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApp.Views.Home.Index2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
     <head runat="server">
          <title>Index2</title>
     </head>
     <body>
          <div>
               The current date and time is:
               <%=DateTime.Now%>
          </div>
     </body>
</html>

可以使用任何 .NET 语言生成视图中的动态内容。通常，使用 Visual Basic .NET 或 C# 编写控制器和视图。

使用 HTML Helper 生成视图内容

为了能够更加容易地向视图添加内容，需要使用 HTML Helper。HTML Helper 是一种生成字符串的方法。可以使用 HTML Helper 生成标准的 HTML 元素，如文本框、链接、下拉列表和列表框。

例如，程序清单 4 中的视图利用了两个 HTML Helper，TextBox() 和 Password() Helper，来生成登录表单（如图 2 所示）。

程序清单 4 \Views\Home\Index3.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApp.Views.Home.Index3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
     <head runat="server">
          <title>Login Form</title>
     </head>
     <body>
          <div>
               <form method="post" action="/Home/Login">
                    <label for="userName">User Name:</label>
                    <br />
                    <%=Html.TextBox("userName")%>
                    <br /><br />
                    <label for="password">Password:</label>
                    <br />
                    <%=Html.Password("password")%>
                    <br /><br />
                    <input type="submit" value="Log In" />
               </form>
          </div>
     </body>
</html>

图 2：标准登录表单（单击查看大图）

所有的 HTML Helper 方法都在视图的 HTML 属性中调用。例如，通过调用 Html.TextBox() 方法呈现 TextBox。

请注意，调用 HTML Helper 时必须使用分隔符 <%= 和 %>。HTML Helper 只是返回一个字符串。需要调用 Response.Write() 才能将内容呈现到浏览器中。

使用 HTML Helper 方法是可选的。通过减少需要编写的 HTML 和脚本量，HTML Helper 可以使工作变得更加轻松。程序清单 5 中的视图在不使用 HTML Helper 的情况下呈现与程序清单 4 相同的内容。

程序清单 5 \Views\Home\Index4.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
     <head runat="server">
          <title>Login Form without Help</title>
     </head>
     <body>
          <div>
               <form method="post" action="/Home/Login">
                    <label for="userName">User Name:</label>
                    <br />
                    <input name="userName" />
                    <br /><br />
                    <label for="password">Password:</label>
                    <br />
                    <input name="password" type="password" />
                    <br /><br />
                    <input type="submit" value="Log In" />
               </form>
          </div>
     </body>
</html>

也可以创建自己的 HTML Helper。例如，可以创建自动显示 HTML 表中的数据库记录集的 GridView() Helper 方法。我们在创建自定义 HTML Helper 教程中讨论了这一主题。

使用视图数据将数据传递给视图

使用视图的 ViewData 属性，可以将数据从控制器传递给视图。例如，程序清单 6 中的控制器将一则消息添加到视图数据。

程序清单 6 ProductController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcApp.Controllers
{
     public class ProductController : Controller
     {
          public ActionResult Details()
          {
               ViewData["message"] = "Hello World!";
               return View();
          }
     }
}

控制器 ViewData 属性表示成对名称和值的集合。在程序清单 6 中，Details() 方法将一项添加到名称为 message，值为“Hello World!”的视图数据集合中。当视图由 Details() 方法返回时，视图数据被自动传递到视图。

程序清单 7 中的视图从视图数据检索消息，并将消息呈现到浏览器。

程序清单 7 \Views\Product\Details.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Details.aspx.cs" Inherits="MvcApp.Views.Product.Details" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
     <head runat="server">
          <title>Product Details</title>
     </head>
     <body>
          <div>
               <%=Html.Encode(ViewData["message"])%>
          </div>
     </body>
</html>

请注意，视图在呈现消息时利用了 Html.Encode() HTML Helper 方法。Html.Encode() HTML Helper 将特殊字符如 < 和 > 编码为可以在 Web 页面安全显示的字符。每当呈现用户提交到网站的内容时，都应该编码内容以防止遭受 JavaScript 注入攻击。

（由于是我们自己在 ProductController 中创建了消息，因此实际上不需要编码消息。但是，在显示从视图中的视图数据检索到的内容时，始终调用 Html.Encode() 是一个很好的习惯。）

在程序清单 7 中，我们利用视图数据将简单的字符串消息从控制器传递到视图。也可以使用视图数据将其他类型的数据（如数据库记录的集合）从控制器传递到视图。例如，如果想在视图中显示 Products 数据库表的内容，则应该传递视图数据中的数据库记录集合。

还可以将强类型视图数据从控制器传递到视图。我们在 了解强类型视图数据和视图教程中探讨了这个主题。

总结

本教程简单介绍了 ASP.NET MVC 视图、视图数据和 HTML Helper。在第一部分中，我们学习了如何向项目添加新视图。了解了必须将视图添加到正确的文件夹，才能从特定的控制器调用它。接下来，我们讨论了 HTML Helper。学习了 HTML Helper 如何帮助您轻松地生成标准 HTML 内容。最后，我们学习了如何利用视图数据将数据从控制器传递到视图。

http://msdn.microsoft.com/zh-cn/dd320348