Asp.Net MVC 视图(概述) - Part.1

原文链接:http://www.asp.net/learn/mvc/tutorial-04-cs.aspx

这篇教程的目的是为你提供一个对ASP.NET MVC视图、视图数据和HTML Helpers的简短介绍。读完本文之后,你应该能够理解如何创建新的视图、将数据从控制器传递给视图,并且使用HTML Helper在视图中生成内容。

1. 理解视图

ASP.NET MVC与ASP.NET或者动态服务器页(ASP)不同,它并没有任何直接对应于一个页面的东西。在ASP.NET MVC应用程序中,磁盘上并没有一个页面来对应你在浏览器地址栏中输入的URL路径。在ASP.NET MVC应用程序中,最接近页面的东西是称为视图(View)的东西。

在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

你可以通过在浏览器中输入这个地址,来调用第二个动作,Details()动作:

/Home/Details

Index()动作返回一个视图。你所创建的大多数动作都将返回一个视图,然而,动作可以返回任何类型的动作结果。例如,Details()动作返回了一个RedirectToActionResult,它可以将即将到达的请求重定向到Index()动作。

Index()动作包含了下面一行代码:

return View();

这行的代码返回了一个视图,该视图在服务器上的路径必须和下面的路径一样:

\Views\Home\Index.aspx

视图的路径由控制器和控制器动作的名称推断得出。

如果你愿意,可以显式地指明视图。下面一行代码返回了一个视图,名为“Fred”:

return View("Fred");

当执行这行代码时,将会从下面的路径返回一个视图:

\Views\Home\Fred.aspx

2.创建一个视图

你可以在解决方案浏览器中的文件夹上点击右键,并且选择菜单项“Add(添加)”、“New Item(新建项)”(如图1)。选择“MVC View Page”模板将标准视图添加到你的项目中。

图1 - 添加一个新的视图到项目中

应该意识到你不能像ASP.NET或者ASP应用程序中那样,随意向项目中添加视图。你必须将视图添加到文件夹中,并且该文件夹的名称与控制器的名称相同(不含Controller后缀)。举个例子,如果你想创建一个新的、叫做Index的视图,该视图可以由名为ProductController的控制器返回,那么你必须添加这个视图到项目的如下文件夹中:

\Views\Product\Index.aspx

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

3.向视图中添加内容

一个视图是一个标准的、可以包含脚本的(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页面的body中含有下面的脚本:

<% 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#来编写你的控制器和视图。

4.使用HTML Helpers来生成视图内容

为了使向视图中添加内容更加容易一些,你可以利用叫做HTML Helper的东西。HTML Helper是一个生成字符串的方法。你可以使用HTML Helpers来生成标准的HTML元素,例如文本框、链接、下拉框和列表框。

举个例子,代码清单4中的视图利用了两个HTML Helpers,TextBox()和Password(),用于生成一个登录窗体(见图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 Helpers方法都在视图的Html属性上调用。举个例子,你可以通过调用Html.TextBox()方法来呈现(render)一个文本框。

注意,当你在调用HTML Helper时,必须使用脚本分隔符<%=和%>。HTML Helper仅仅是返回一个字符串。你需要调用Response.Write()来将字符串呈现到浏览器中。

使用HTML Helper方法是可选的。它们通过减少你编写的HTML和Script数量来使开发更为简单。代码清单5中的视图呈现了与代码清单4中完全相同的窗体,但是没有使用HTML Helpers。

代码清单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 Helpers。据个例子,你可以创建一个GridView() Helper方法,它自动地在一个HTML表格中显示一系列的数据库记录。我们将在创建自定义HTML Helpers这篇教程中探讨这一话题。

5. 使用ViewData属性将数据传递给视图

你可以使用视图的另一个属性,ViewData属性,将数据从控制器传递给视图。例如,代码清单6中的控制器向ViewData添加了一条消息。

代码清单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()方法向ViewData集合中添加了一个名为message的项,其值为“Hello World!”。当视图由Details()方法返回时,ViewData将会自动传递给视图。

代码清单7中的视图从ViewData中获取了消息,并且将消息呈现到了浏览器中。

代码清单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() Helper方法。Html.Encode() HTML Helper方法将例如“<”和“>”这样的特殊字符编码为在web页面中能够安全显示的字符。无论何时呈现用户提交到网站的内容时,你都应该对内容进行编码,以避免JavaScript注入攻击。

(因为我们自己在ProductController中创建了消息,所以并不是真的需要对消息进行编码。然而,当在视图中显示获取自ViewData中的内容时,总是调用Html.Encode()是一个很好的习惯。)

在代码清单7中,我们利用了ViewData来将一个简单的字符串消息从控制器传递到了视图。你也可以使用ViewData将其他类型的数据从控制器传递到视图,例如一个数据库记录集合。举个例子,如果你想要在视图中显示Products数据库表的内容,那么你可以将数据库记录的集合保存在ViewData中进行传递。

你也可以从控制器向视图传递强类型View Data。我们将在教程“理解强类型View Data和视图”中探讨这个话题。

6. 总结

这篇教程提供了对ASP.NET MVC视图、视图数据(View Data)和HTML Helpers的一个简短的介绍。在第一部分,你学习了如何向项目中添加新的视图。你学习了必须将视图添加到正确的文件夹中,以使它能够被特定的控制器调用。接下来,我们讨论了HTML Helpers这一主题。你学习了HTML Helpers是如何轻松地生成标准的HTML内容的。最后,你学习了如何利用ViewData将数据从控制器传递给视图 。