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

最新推荐文章于 2024-09-18 15:08:51 发布

我姓区不姓区

最新推荐文章于 2024-09-18 15:08:51 发布

阅读量2.8k

点赞数

分类专栏： ASP.NET MVC教程文章标签： asp.net mvc c# html action xhtml

ASP.NET MVC教程专栏收录该内容

14 篇文章 1 订阅

订阅专栏

此教程向你提供 ASP.NET MVC 视图简介, 视图数据, 和 HTML Helpers。教程最后，你应该会理解如何创建新视图，从控制器传递数据到视图，和使用 use HTML Helpers 在视图中生成内容。

理解视图

不像 ASP.NET 或者ASP, ASP.NET MVC 并不包括任何直接对应页面的东西。在 ASP.NET MVC 应用程序中，硬盘上并不存在与你输入浏览器地址栏中的URL对应的页面。在ASP.NET MVC应用程序中与页面最接近的东西是称为视图的东西。

ASP.NET MVC 应用程序, 传入的浏览器请求被映射到控制器 actions。控制器 action 可能返回一个视图。然而，控制器可能执行其他类型的action，比如将你重定向到另一个控制器 action。

代码1 包含一个简单的名为 HomeController的控制器。 HomeController 暴露了2个控制器 actions 名为 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来调用第一个action, Index() action：

/Home/Index

你可以在浏览器地址栏输入这个来调用第二个action, Details() action：

/Home/Details

Index() action 返回一个视图。大多数你创建的action都是返回视图的。然而，一个action可以返回其他类型的 action result。例如， Details() action 返回一个 RedirectToActionResult ，它将传入的请求重定向到 Index() action。

Index() action 只有简单的一行代码：

View();

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

/Views/Home/Index.aspx

该路径的视图由控制器名称和控制器action名称来推断。

如果你愿意，你可以显式指定视图名称。下面这行代码返回一个名为"Fred"的视图：

View(“Fred”);

当这行代码被执行时，视图从以下路径返回：

/Views/Home/Fred.aspx

如果你要为你的ASP.NET MVC程序创建单元测试那么显式指定视图名称是一个好主意。那样，你可以创建单元测试来验证预期的视图是否由一个控制器action返回。

向视图添加内容

视图是一个可以包含脚本的标准的 (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 Helpers 来生成视图内容

要更简单地为视图添加内容，可以利用称为 HTML Helper 的东西。 HTML Helper, 通常是一个生成字符串的方法。可以使用 HTML Helper 生成标准 HTML 元素诸如输入框，超链接，下拉框和列表框。

例如，代码4中的视图利用了3个 HTML Helper -- BeginForm(), TextBox() 和Password() helper -- 来生成一个登录表单 (见图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 Helper 方法都是由视图的Html属性来调用的。例如，调用Html.TextBox()方法呈现一个TextBox。

注意当调用 Html.TextBox() 和 Html.Password() helper时要使用脚本限定符 <%= 和 %> 。这些 helper 仅仅返回一个字符串。你需要调用 Response.Write() 以呈现字符串到浏览器。

使用 HTML Helper 方法是可选的。它们使你的生活更简单，因为减少了你需要写的HTML和脚本数量。代码5中的视图呈现了与代码4中一样的表单，但是没有使用 HTML Helper。

代码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 Helper。例如，你可以创建一个 GridView() helper 方法在一个HTML 表格里自动显示一组数据库记录。我将在教程《创建自定义 HTML Helpers》中探讨这个话题。

使用视图数据向视图传送数据

使用视图数据从控制器传送数据到视图。将视图数据想象成通过邮件发送的包。所有从控制器传送到视图的数据必须使用这个包来发送。例如，代码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() 方法向视图数据集合添加一个名为message的项，值为 “Hello World!”。当视图由Index()方法返回时，视图数据自动传送到视图中。

代码7中的视图从视图数据中取得message并将message呈现到浏览器。

代码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>

注意当呈现message时，视图利用了HTML Helper 方法。 Html.Encode() 将特殊字符例如 < 和 > 编码为可以在网页安全显示的字符。当你要呈现用户提交到网站的内容时，应该将内容进行编码以防止 JavaScript 注入攻击。

(由于我们自己在ProductController里创建了信息，我们不必对信息进行编码。然而，在从视图数据中取得显示内容时，经常调用Html.Encode()方法是一个好的习惯。)

在代码 7中, 我们利用了视图数据来从控制器传递一个简单的字符串信息到视图。你还可以使用视图数据来传送其他类型的数据，诸如一个从控制器到视图的数据库记录集合。例如，如果你要在视图中显示Products数据库表中的内容，那么你可以在视图数据中传递这个数据库记录集合。

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

总结

这篇教程提供了ASP.NET MVC 视图，视图数据和 HTML Helper的简介。在第一节，你学到了如何添加一个新的视图到你的工程中。你学到了必须在正确的文件夹下添加视图以从特定控制器中调用。接下来，我们讨论了HTML Helper的话题。你学到了HTML Helper如何让你简单地生成标准HTML内容。最后，你学到了如何利用视图数据来从控制器传递数据到视图中。