Asp.NetMVC视图(概述)-Part.1

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

来源：http://www.cnblogs.com/JimmyZhang/archive/2009/02/08/1371819.html 张子阳

原文链接：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 - ViewsHomeIndex.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">

<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 - ViewsHomeIndex2.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">

<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 - ViewsHomeIndex3.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">

<title>Login Form</title>

</head>

<body>

<div>

<label for="password">Password:</label>

<br />

<%=Html.Password("password")%>

</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 - ViewsHomeIndex4.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">

<title>Login Form without Help</title>

</head>

<body>

<div>

<br />

<label for="password">Password:</label>

<br />

</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 - ViewsProductDetails.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">

<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将数据从控制器传递给视图。