zoukankan      html  css  js  c++  java

  • 了解视图、视图数据和 HTML Helper

    了解视图、视图数据和 HTML Helper

    本教程的目的是向读者简单介绍 ASP.NET MVC 视图、视图数据和 HTML Helper。在本教程的最后，您将了解如何创建新视图、如何将数据从控制器传递给视图，以及如何使用 HTML Helper 在视图中生成内容。

    了解视图

    不同于 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

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    5. using System.Web.Mvc;
    6.  
    7. namespace MvcApp.Controllers
    8. {
    9.      [HandleError]
    10.      public class HomeController : Controller
    11.      {
    12.           public ActionResult Index()
    13.           {
    14.                return View();
    15.           }
    16.  
    17.           public ActionResult Details()
    18.           {
    19.                return RedirectToAction("Index");
    20.           }
    21.      }
    22. }

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

    /Home/Index

    通过在浏览器地址栏中输入以下 URL，可以激活第二个操作，Details() 操作：

    /Home/Details

    Index() 操作返回一个视图。创建的大多数操作都将返回视图。然而，操作也可以返回其他类型的操作结果。例如， Details() 操作返回 RedirectToActionResult，可以将进入的请求重定向到 Index() 操作。

    Index() 操作包含下面一行代码：

    return View();

    这行代码返回一个位于 Web 服务器的以下路径的视图：

    \Views\Home\Index.aspx

    视图的路径指明控制器的名称和控制器操作的名称。

    如果愿意，可以写明视图。下面一行代码返回名称为“Fred”的视图：

    1. return View();

    这行代码返回一个位于 Web 服务器的以下路径的视图：

    \Views\Home\Index.aspx

    视图的路径指明控制器的名称和控制器操作的名称。

    如果愿意，可以写明视图。下面一行代码返回名称为“Fred”的视图：

    1. return View(“Fred”);

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

    \Views\Home\Fred.aspx

    创建视图

    右键单击 Solution Explorer 窗口中的某个文件夹，然后选择菜单选项 Add，New Item（如图 1 所示）创建视图。选择 MVC View Page 模板向项目添加标准视图。

    图 1：向项目添加新视图（ 单击查看大图）

    请注意，不能像在 ASP.NET 或 Active Server Pages 应用程序中添加页面一样在项目中随意添加视图。必须将视图添加到与控制器名称相同（不带 Controller 前缀）的文件夹中。例如，如果想创建名称为 Index 的新视图，并且它能够由名称为 ProductController 的控制器返回，则必须将视图添加到项目的以下文件夹中：

    \Views\Product\Index.aspx

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

    向视图添加内容

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

    例如，程序清单 2 中的视图显示当前日期和时间。

    程序清单 2 \Views\Home\Index.aspx

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApp.Views.Home.Index" %>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" >
    4.      <head runat="server">
    5.           <title>Index</title>
    6.      </head>
    7.      <body>
    8.           <div>
    9.                The current date and time is:
    10.                <% Response.Write(DateTime.Now);%>
    11.           </div>
    12.      </body>
    13. </html>

    请注意，程序清单 2 中的 HTML 页面的主体包含下面的脚本：

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

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

    因为经常调用 Response.Write()，所以 Microsoft 提供了调用 Response.Write() 方法的快捷方式。程序清单 3 中的视图使用分隔符 <%= 和 %> 作为调用 Response.Write() 的快捷方式。

    程序清单 3 Views\Home\Index2.aspx

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApp.Views.Home.Index2" %>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" >
    4.      <head runat="server">
    5.           <title>Index2</title>
    6.      </head>
    7.      <body>
    8.           <div>
    9.                The current date and time is:
    10.                <%=DateTime.Now%>
    11.           </div>
    12.      </body>
    13. </html>

    可以使用任何 .NET 语言生成视图中的动态内容。通常，使用 Visual Basic .NET 或 C# 编写控制器和视图。

    使用 HTML Helper 生成视图内容

    为了能够更加容易地向视图添加内容，需要使用 HTML Helper。HTML Helper 是一种生成字符串的方法。可以使用 HTML Helper 生成标准的 HTML 元素，如文本框、链接、下拉列表和列表框。

    例如，程序清单 4 中的视图利用了两个 HTML Helper，TextBox() 和 Password() Helper，来生成登录表单（如图 2 所示）。

    程序清单 4 \Views\Home\Index3.aspx

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApp.Views.Home.Index3" %>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" >
    4.      <head runat="server">
    5.           <title>Login Form</title>
    6.      </head>
    7.      <body>
    8.           <div>
    9.                <form method="post" action="/Home/Login">
    10.                     <label for="userName">User Name:</label>
    11.                     <br />
    12.                     <%=Html.TextBox("userName")%>
    13.                     <br /><br />
    14.                     <label for="password">Password:</label>
    15.                     <br />
    16.                     <%=Html.Password("password")%>
    17.                     <br /><br />
    18.                     <input type="submit" value="Log In" />
    19.                </form>
    20.           </div>
    21.      </body>
    22. </html>

    图 2：标准登录表单（ 单击查看大图）

    所有的 HTML Helper 方法都在视图的 HTML 属性中调用。例如，通过调用 Html.TextBox() 方法呈现 TextBox。

    请注意，调用 HTML Helper 时必须使用分隔符 <%= 和 %>。HTML Helper 只是返回一个字符串。需要调用 Response.Write() 才能将内容呈现到浏览器中。

    使用 HTML Helper 方法是可选的。通过减少需要编写的 HTML 和脚本量，HTML Helper 可以使工作变得更加轻松。程序清单 5 中的视图在不使用 HTML Helper 的情况下呈现与程序清单 4 相同的内容。

    程序清单 5 \Views\Home\Index4.aspx

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" >
    4.      <head runat="server">
    5.           <title>Login Form without Help</title>
    6.      </head>
    7.      <body>
    8.           <div>
    9.                <form method="post" action="/Home/Login">
    10.                     <label for="userName">User Name:</label>
    11.                     <br />
    12.                     <input name="userName" />
    13.                     <br /><br />
    14.                     <label for="password">Password:</label>
    15.                     <br />
    16.                     <input name="password" type="password" />
    17.                     <br /><br />
    18.                     <input type="submit" value="Log In" />
    19.                </form>
    20.           </div>
    21.      </body>
    22. </html>

    也可以创建自己的 HTML Helper。例如，可以创建自动显示 HTML 表中的数据库记录集的 GridView() Helper 方法。我们在创建自定义 HTML Helper 教程中讨论了这一主题。

    使用视图数据将数据传递给视图

    使用视图的 ViewData 属性，可以将数据从控制器传递给视图。例如，程序清单 6 中的控制器将一则消息添加到视图数据。

    程序清单 6 ProductController.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Web;
    5. using System.Web.Mvc;
    6.  
    7. namespace MvcApp.Controllers
    8. {
    9.      public class ProductController : Controller
    10.      {
    11.           public ActionResult Details()
    12.           {
    13.                ViewData["message"] = "Hello World!";
    14.                return View();
    15.           }
    16.      }
    17. }

    控制器 ViewData 属性表示成对名称和值的集合。在程序清单 6 中，Details() 方法将一项添加到名称为 message，值为“Hello World!”的视图数据集合中。当视图由 Details() 方法返回时，视图数据被自动传递到视图。

    程序清单 7 中的视图从视图数据检索消息，并将消息呈现到浏览器。

    程序清单 7 \Views\Product\Details.aspx

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Details.aspx.cs" Inherits="MvcApp.Views.Product.Details" %>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" >
    4.      <head runat="server">
    5.           <title>Product Details</title>
    6.      </head>
    7.      <body>
    8.           <div>
    9.                <%=Html.Encode(ViewData["message"])%>
    10.           </div>
    11.      </body>
    12. </html>

    请注意，视图在呈现消息时利用了 Html.Encode() HTML Helper 方法。Html.Encode() HTML Helper 将特殊字符如 < 和 > 编码为可以在 Web 页面安全显示的字符。每当呈现用户提交到网站的内容时，都应该编码内容以防止遭受 JavaScript 注入攻击。

    （由于是我们自己在 ProductController 中创建了消息，因此实际上不需要编码消息。但是，在显示从视图中的视图数据检索到的内容时，始终调用 Html.Encode() 是一个很好的习惯。）

    在程序清单 7 中，我们利用视图数据将简单的字符串消息从控制器传递到视图。也可以使用视图数据将其他类型的数据（如数据库记录的集合）从控制器传递到视图。例如，如果想在视图中显示 Products 数据库表的内容，则应该传递视图数据中的数据库记录集合。

    还可以将强类型视图数据从控制器传递到视图。我们在 了解强类型视图数据和视图教程中探讨了这个主题。

    总结

    本教程简单介绍了 ASP.NET MVC 视图、视图数据和 HTML Helper。在第一部分中，我们学习了如何向项目添加新视图。了解了必须将视图添加到正确的文件夹，才能从特定的控制器调用它。接下来，我们讨论了 HTML Helper。学习了 HTML Helper 如何帮助您轻松地生成标准 HTML 内容。最后，我们学习了如何利用视图数据将数据从控制器传递到视图。

    http://msdn.microsoft.com/zh-cn/dd320348
  • 相关阅读:
    CF954I Yet Another String Matching Problem （ FFT ）
    P4173 残缺的字符串 (带通配符的FFT字符匹配）
    电灯泡（简单容斥）
    HDU 6143 Killer Names （容斥）
    bzoj 3597: [Scoi2014]方伯伯运椰子[分数规划]
    【COGS2652】秘术「天文密葬法」（长链剖分，分数规划）
    Longge's problem ( gcd的积性）
    Desert King POJ
    P3628 [APIO2010]特别行动队(斜率dp)
    树状数组
  • 原文地址：https://www.cnblogs.com/Sandheart/p/1942388.html
Copyright © 2011-2022 走看看