ASP.NET MVC 视图概述 (C#)

  • 项目

作者 ：Stephen Walther

什么是 ASP.NET MVC 视图，它与 HTML 页面有何不同？ 在本教程中，Stephen Walther 介绍了视图，并演示了如何在视图中利用视图数据和 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");
        }
    }
}

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

/Home/Index

通过在浏览器中键入此地址，可以调用第二个操作，即 Details () 操作：

/Home/Details

Index () 操作返回视图。 您创建的大多数操作将返回视图。 但是，操作可以返回其他类型的操作结果。 例如，Details () 操作返回将传入请求重定向到 Index () 操作的 RedirectToActionResult。

Index () 操作包含以下单行代码：

View () ;

此代码行返回的视图必须位于 Web 服务器上的以下路径：

\Views\Home\Index.aspx

视图的路径是从控制器的名称和控制器操作的名称推断出来的。

如果愿意，可以明确说明视图。 以下代码行返回名为 Fred 的视图：

查看 ( Fred ) ;

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

\Views\Home\Fred.aspx

注意

如果计划为 ASP.NET MVC 应用程序创建单元测试，最好明确视图名称。 这样，就可以创建单元测试来验证控制器操作是否返回了预期的视图。

向视图添加内容

视图是可以包含脚本的标准 (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 页面的正文包含以下脚本：

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

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

由于经常调用 Response.Write () ，因此 Microsoft 提供了用于调用 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 帮助程序（BeginForm () 、TextBox () 和 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>

“新建项目”对话框

图 01：标准登录表单 (单击以查看全尺寸图像)

所有 HTML 帮助程序方法均在视图的 Html 属性上调用。 例如，通过调用 Html.TextBox () 方法呈现 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 帮助程序。 例如，可以创建 GridView () 帮助程序方法，该方法自动在 HTML 表中显示一组数据库记录。 我们将在教程 创建自定义 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 属性表示名称和值对的集合。 在清单 6 中，Index () 方法将一个值为 Hello World！的视图数据收集添加到名为 message 的项。 当 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 内容。 最后，你了解了如何利用视图数据将数据从控制器传递到视图。

下一页