[翻译:ASP.NET MVC 教程]ASP.NET MVC 视图概览

本教程介绍了ASP.NET MVC中的视图、视图数据和HTML辅助函数的基本概念,包括如何创建视图、将数据传递至视图及使用HTML辅助函数生成动态内容。

本教程的目的是向你提供ASP.NET MVC视图、视图数据以及HTML辅助函数的简要介绍。读完本教程后,你应当能理解怎样创建新的视图、将数据通过控制器传送至视图以及使用HTML辅助函数来生成在视图中的内容。

理解视图

不像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.Web.Mvc;
 
namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult Details()
        {
            return RedirectToAction("Index");
        }
    }
}

你可以请求第一个控制器动作Index(),通过在你的浏览器地址栏中键入如下的URL:

/Home/Index

你可以请求第二个控制器动作Index(),通过在你的浏览器地址栏中键入如下的URL:

/Home/Details

Index()动作返回一个视图。你所建立的多数动作都将返回一个视图。然而,一个动作能返回其余的动作结果类型。例如,Details()动作返回一个将进来的请求重新导向至Index()动作的RedirectToActionResult。

Index()动作包含下列单行代码:

View();

这行代码返回一个必须在你服务器上位于下列路径的视图:

\Views\Home\Index.aspx

指向该视图的路径可以从控制器名和控制器动作名上被推测出。

如果你愿意,你可以明确该视图。下列一行代码返回了一个名为“Fred”的视图:

View(“Fred”);

当该行代码被执行时,视图将沿下列路径被返回:

\Views\Home\Fred.aspx

clip_image001

为视图添加内容

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

例如,清单2中的视图显示了当前的日期和时间。

清单2——\Views\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!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 id="Head1" 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()方法经常被调用,微软为我们提供了调用Response.Write()方法的快捷方式。清单3中的视图使用分隔符<%=和%>作为快捷方式来调用Response.Write()方法。

清单3——Views\Home\Index2.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!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 id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>
    
        
    The current date and time is
    <%=DateTime.Now %>
 
    
    </div>
</body>
</html>

你可以使用任何.NET语言来生成视图中的动态内容。正常情况下,你将使用Visual Basic .NET抑或是C#来编写你的控制器和视图。

使用HTML辅助函数来生成视图内容

为了让添加内容至视图的过程变得简单,你可以利用被称之为HTML辅助函数的工具。一个HTML辅助函数,典型的说,就是一个生成字符串的方法。你可使用HTML辅助函数来生成标准HTML元素,例如文本框、超链接、下拉列表以及列表框。

例如,清单4中的视图利用了三个HTML辅助函数——the BeginForm(), the TextBox() and Password()辅助函数——来生成登录表单(见图1)。

清单4——\Views\Home\Login.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!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 id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
    
    <% using (Html.BeginForm())
       { %>
    
    
        <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" />        
    
    <% } %>
    
    </div>
</body>
</html>

clip_image003

图1:一个标准的登录表单

所有的HTML辅助函数方法都作为视图的HTML属性被调用。例如,你通过调用HTML.TextBox()方法来呈现一个文本框。

注意到当同时调用Html.TextBox()和Html.Password()辅助函数时,你使用了脚本分隔符<%=和%>。这些辅助函数简单地返回一个字符串。为了让该字符串呈现在浏览器上,你需要调用Response.Write()。

使用HTML辅助函数方法是可选的。通过减少HTML和你需要编写的脚本的数量,它们让我们的开发工作变得容易。清单5中的视图呈现了与清单4中完全一致的表单,该视图没有使用HTML辅助函数。

清单5——\Views\Home\Login.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 id="Head1" 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辅助函数。例如,你可以创建一个自动在HTML表格中显示数据库记录的GridView()函数方法。我们将在教程创建自定义HTML辅助函数中探讨这一话题。

使用视图数据将数据传送至视图

你使用视图数据将数据从控制器传送至视图。想象一下,视图数据就像你通过邮件发送的一个包裹。所有从控制器传送至视图的数据必须使用该包裹被发送。例如,清单6中的控制器将一条消息传送至视图数据。

清单6——ProductController.cs

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

控制器的ViewData属性代表了名值对(name and value pairs)的一个集合。在清单6中,Index()方法向视图数据集合中添加一项名为message和其值为“Hello World!”的条目。当该视图通过Index()方法被返回时,视图数据就被自动传送至视图了。

清单7的视图从视图数据中检索消息,然后将其呈现在浏览器中。

清单7——\Views\Product\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
 
<!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 id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>
    
    <%= Html.Encode(ViewData["message"]) %>
    
    </div>
</body>
</html>

注意到当呈现消息时,视图利用了HTML.Encode() HTML辅助函数。HTML.Encode() HTML辅助函数将特殊字符,例如<和>,编码成在网页中安全显示的字符。无论何时当你呈现用户提交至网站的内容,你应当对这些内容进行编码以防止JavaScript注入威胁。

(因为是我们自己在ProductController中创建了该消息,所以我们实际上并不需要对该消息进行编码。然而,当在视图中显示从视图数据中检索出的内容时,一直使用Html.Encode()方法是一种好的习惯。)

在清单7中,我们利用了视图数据将一条简单的字符消息从控制器传送至视图。你同样可以使用视图数据将其他数据类型,诸如数据记录集合,从控制器传送至视图。例如,如果你想要在视图中显示Products数据库表中的内容,那么你就将数据库记录集合传送至视图数据。

你也可以选择从控制器传送强类型的视图数据到视图。我们将在教程理解强类型的视图数据和视图中探讨这一话题。

小结
本教程向你提供了ASP.NET MVC视图、视图数据以及HTML辅助函数的一个简要介绍。在第一部分中,你了解到怎样向你的项目中添加新的视图。你了解到为了从特定的控制器调用视图必须将其添加至正确的文件夹中。接着,我们讨论了HTML辅助函数的话题。你了解到HTML辅助函数是怎样让你容易地生成标准HTML内容。最后,你了解到怎样利用视图数据将数据从控制器传送至视图。
作者:Kinglee
文章出处:Kinglee’s Blog ( http://www.cnblogs.com/Kinglee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。

转载于:https://www.cnblogs.com/Kinglee/archive/2009/08/23/1552515.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值