四、理解视图层,视图数据和HTML辅助
这篇文章简洁介绍了ASP.NET MVC视图、视图数据和HTML辅助。看完这篇文章我们会知道
如何创建视图
如何从控制层向视图层传输数据
如何使用HTML辅助生成视图界面
一、理解视图
与ASP.NET和ASP不同的是,ASP.NET MVC并不包含直接响影页面代码。在ASP.NET MVC应用程序中,浏览器地址栏中的URL地址并不与硬盘上的页面文件相对应。在ASP.NET MVC应用程序中向页面中传递的内容,我们称之为视图。
在ASP.NET MVC应用程序中,来自浏览器的请求被映射到控制器的动作上。控制器的动作返回一个视图,当然控制器也可以执行其它类型的动作,如动作重定向。
下面的代码包含了一个名子叫HoomeController的简单控制器,这个控制器有两个动作Index()和Details()。
Listing 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");
}
}
}
当我们在浏览器地址栏中输入/Home/Index后,会触发第一个动作Index()
当我们在浏览器地址栏中输入/Home/Details后,会触发第二个动作Details()
Index()动作使用return View();返回的是一个视图(在以后我们创建的大部分的动作会返回视图),它会把该视图发送到\Views\Home\Index.aspx页面上,视图的路径与控制器类名、动作名以及参数名一一对应。当然视图也可以显示命名,如:return View(“Fred”); 则返回一个视图,该视图的名子叫做Fred,它会把视图返回到\Views\Home\Fred.aspx页面上。
二、创建视图(原创:灰灰虫的家 http://hi.baidu.com/grayworm)
在解决方案管理器中右击Views文件夹,选择“Add”-“New Item”,在弹出的对话框中选择MVC View Page模板,点击“Add”添加到项目中
![](http://hiphotos.baidu.com/grayworm/pic/item/c1b9981bf3b3c0c9ac6e7568.jpg)
《图1》
需要注意的是,我们不能像添加ASP.NET页面那样向ASP.NET MVC程序中添加新页面。另外我们需要注意的是,我们页面的路径要与控制器相对应。比如,我们为ProductorController控制器创建一个新视图Index,那我们必须要把视图创建在\Views\Product\Index.aspx 路径中。
三、向视图中添加内容
视图是一个标准的HTML文档,它可以包含脚本,我们可以使用脚本来动态控制视图的输出。
例如:下面的代码显示当前的日期和时间
Listing 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>
注意到我们的代码中有下面一句:
<% Response.Write(DateTime.Now);%>
我们使用<%和%>来标识脚本文件的开始和结束,这里的脚本是用C#代码编写的,用Response.Write来在浏览器中显示当前的日期时间。<%和%>中间可以编写一条或多条语句。
由于在ASP.NET MVC中使用Response.Write()输出的情况比较多,所以微软提供了<%=和%>的简便形式来调用Response.Write()
Listing 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所支持的语言在视图中来动态控制显示内容。一般我们使用VB.NET或C#来控制
四、使用HTML辅助来动态生成视图内容(原创:灰灰虫的家 http://hi.baidu.com/grayworm)
除了可以使用脚本向视图中添加内容,我们还可以使用HTML辅助来实现。HTML辅助是动态生成字符串的一种方法。我们可以使用HTML辅助来动态生成HTML元素,如:文本框,超链接,列表和下拉列表等。
下面的代码是我们用HTML辅助创建的的用户名和密码文本框,生成登录页面。
Listing 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 />
<label for="password">Password:</label><br />
<%=Html.Password("password")%>
<br />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</html>
《图2》
在视图层的所有的HTML辅助都使用Html属性调用,比如要呈现文本框,就使用Html.TextBox()方法。
应当注意的是,我们都是使用<%=和%>来调用HTML辅助的,这是因为,HTML辅助简单生成一个字符串,所以我们需要调用Response.Write()来把字符串写在页面上。
使用HTML辅助方法是可选的,它可以有效地减少我们的HTML代码和脚本,下面的代码也是生成一个登录页面,但没有使用HTML辅助。
Listing 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辅助,比仿说我们要创建一个GridView()辅助用来生成数据库中的数据表格。这部分内容我们将在Creating Custom HTML Helpers文章中单独讲述。
五、使用ViewData向视图层传递数据(原创:灰灰虫的家 http://hi.baidu.com/grayworm)
我们可以使用视图的一个属性ViewData来从控制向视图传递数据,代码如下图所示
Listing 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属性是一个名-值对的集合,我们在Details方法中向ViewData集合中添加了一个名子为message,值为Hello World的对象。当Details()方法向视图返回View的时候,ViewData会自动被传送到视图层。
下面的代码是我们在视图层接收ViewData数据,并显示在页面上。
Listing 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>ProductDetails</title>
</head>
<body>
<div>
<%=Html.Encode(ViewData["message"])%>
</div>
</body>
</html>
在上面的代码中在显示ViewData数据的时候,我们使用了Html.Encode()这个HTML辅助。Html.Encode()会对HTML元素进行编码,把<和>转义成<和>以安全的形式显示在页面上。无论什么时候,当我们要在页面上显示数据的时候我们都要注意防止JavaScript注入攻击。虽我在这里我们从控制器输出的数据并没有JavaScript攻击,但我们要养成一种好的习惯,调用Html.Encode()来显示数据。
在上面的代码中在控制器中使用ViewData向视图层返回一个字符串的数据,当我们想从控制器返回其它类型的数据,如数据记录的集合,那我们需要使用ViewData传递实体类的集合。
我们还可以从控制器向视图返回强类型的ViewData,关于这方面的内容我们将在Understanding Strongly Typed View Data and Views文章中进行介绍。
总结(原创:灰灰虫的家 http://hi.baidu.com/grayworm)
这篇文章简单描述了ASP.NET MVC的视图、ViewData和HTML辅助。
在第一部分我们知道如何向项目中添加一个新的视图,在添加新视图的时候我们应当把视图放在正确的文件夹中,以便控制器动作的调用。
然后,我们又讨论了HTML辅助,HTML辅助可以帮助我们生成标准的HTML内容
最后,我们学习了如何使用ViewData从控制层向视图层传递数据。
(