添加视图 - 如何使用视图模板文件干净地封装生成 HTML 响应回客户端

项目
07/13/2023

这是一个初学者教程，介绍 ASP.NET MVC 的基础知识。你将创建一个从数据库读取和写入的简单 Web 应用程序。请访问 ASP.NET MVC 学习中心，查找其他 ASP.NET MVC 教程和示例。

在本部分中，我们将了解如何让 HelloWorldController 类使用 View 模板文件来干净地封装生成 HTML 响应回到客户端。

首先，我们将视图模板与 Index 方法配合使用。我们的方法称为 Index，它位于 HelloWorldController 中。目前，Index () 方法返回一个字符串，其中包含在 Controller 类中硬编码的消息。

public string Index()
{
    return "<html><body>This is my default action...</body></html>";
}

现在，让我们将 Index 方法更改为如下所示：

public ActionResult Index()
{
   return View(); 
}

现在，让我们向项目添加一个可用于 Index () 方法的视图模板。为此，请使用鼠标右键单击 Index 方法中间的某个位置，然后单击“添加视图...”。

这将打开“添加视图”对话框，该对话框为我们提供了一些选项，用于创建可由 Index 方法使用的视图模板。目前，请勿更改任何内容，只需单击“添加”按钮即可。

单击“添加”后，解决方案文件夹中将显示一个新文件夹和新文件，如下所示。现在，“视图”下有一个 HelloWorld 文件夹，在该文件夹中有一个 Index.aspx 文件。

新的索引文件也已打开并准备好进行编辑。在第一个 <h2 索引</h2>> 下添加一些文本，如“Hello World”。

<h2>Index</h2>
Hello world!

运行应用程序并在浏览器中再次访问 http://localhost:xx/HelloWorld 。此示例中控制器中的 Index 方法未执行任何工作，但调用了“return View () ”，表示我们希望使用视图模板文件将响应呈现回客户端。由于未显式指定要使用的视图模板文件的名称，ASP.NET MVC 默认使用 \Views\HelloWorld 文件夹中的 Index.aspx 视图文件。现在，我们可以看到在视图中硬编码的字符串。

看起来相当不错。但是，请注意，浏览器的标题显示“索引”，页面上的大标题显示“我的 MVC 应用程序”。让我们来更改这些。

更改视图和母版页

首先，让我们更改文本“我的 MVC 应用程序”。该文本是共享的，并显示在每页上。它实际上只出现在代码中的一个位置，即使它位于应用中的每个页面上。转到解决方案资源管理器中的 /Views/Shared 文件夹，然后打开 Site.Master 文件。此文件称为母版页，它是所有其他页面使用的共享“shell”。

请注意此文件中显示 ContentPlaceholder“MainContent”的一些文本。

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

该占位符是你创建的所有页面将在母版页中“包装”显示的位置。尝试更改标题，然后运行应用并访问多个页面。你会注意到，你的一个更改显示在多个页面上。

<div id="title">
    <h1>My MVC Movie Application</h1>
</div>

现在，每一页都将具有“我的 MVC 电影应用程序”的主标题（即 H1）。它处理所有页面共享的顶部的白色文本。

下面是 Site.Master 的完整内容，其中包含我们更改的标题：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Movie Application</h1>
            </div>
             
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>
           
            <div id="menucontainer">
           
                <ul id="menu">             
                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%: Html.ActionLink("About", "About", "Home")%></li>
                </ul>
           
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
</body>
</html>

现在，让我们更改“索引”页的标题。

打开 /HelloWorld/Index.aspx。有两个地方要改变。首先，浏览器标题中显示的标题，以及辅助标头（即 H2）。我将使它们各稍有不同，以便你可以看到哪个代码位更改了应用的哪一部分。

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Movie List
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>My Movie List</h2>
    Hello World!

</asp:Content>

运行应用并访问 /Movies。请注意，浏览器标题、主标题和辅助标题已更改。只需对视图进行少量更改即可轻松对应用进行重大更改。

不过，我们一点点“数据” (，在这种情况下，“Hello World！”消息) 是硬编码的。我们有 V (视图) ，并且有 C (控制器) ，但还没有 M (模型) 。我们稍后将演练如何创建数据库并从中检索模型数据。

传递 ViewModel

不过，在转到数据库并讨论模型之前，让我们先讨论一下“ViewModels”。这些对象表示视图模板将 HTML 响应呈现回客户端所需的内容。它们通常由 Controller 类创建并传递到视图模板，并且应仅包含视图模板所需的数据，而不应包含这些数据。

以前，对于 HelloWorld 示例，Welcome () 操作方法采用名称和 numTimes 参数，并将其输出到浏览器。与其让控制器继续直接呈现此响应，不如创建一个小类来保存该数据，然后将其传递给视图模板以使用它呈现回 HTML 响应。这样，控制器关注一件事，另一个视图模板 - 使我们能够在应用程序中保持干净的“关注点分离”。

返回到 HelloWorldController.cs 文件并添加新的“WelcomeViewModel”类，并在控制器内更改 Welcome 方法。下面是同一文件中具有新类的完整 HelloWorldController.cs。

using System.Web.Mvc;

namespace Movies.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            var viewModel = new WelcomeViewModel
            {
                Message = "Hello " + name,
                NumTimes = numTimes
            };

            return View(viewModel);
        }

        public class WelcomeViewModel
        {
            public string Message { get; set; }
            public int NumTimes { get; set; }
        }
    }
}

尽管它位于多行上，但 Welcome 方法实际上只有两个代码语句。第一个语句将两个参数打包到 ViewModel 对象中，第二个语句将生成的对象传递到 View。

现在我们需要一个欢迎视图模板！右键单击“欢迎”方法，然后选择“添加视图”。这一次，我们将检查“创建强类型视图”，并从下拉列表中选择 WelcomeViewModel 类。此新视图将仅知道 WelcomeViewModels，而不知道其他类型的对象。

注意：添加 WelcomeViewModel 后，需要编译一次才能显示在下拉列表中。

下面是“添加视图”对话框的外观。单击“添加”按钮。添加带圆圈的视图

在新的 Welcome.aspx 中的 <h2> 下添加此代码。我们将创建一个循环，并像用户所说的那样多次说 Hello！

<% for(int i=0;i<Model.NumTimes;i++) { %>
       <%h3><%: Model.Message %></h3>
<% } %>

另外，请注意，当你键入时，因为我们告诉了此视图有关 WelcomeViewModel (他们已婚，请记住？) 每次引用模型对象时，我们都会获得有用的 Intellisense，如以下屏幕截图所示：

运行应用程序并再次访问 http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 。现在，我们正在从 URL 获取数据，它会自动传递到控制器，控制器将数据打包到 ViewModel 中，并将该对象传递到我们的视图。 “视图”以 HTML 形式向用户显示数据。

嗯，这是模型的一种“M”，但不是数据库类型。我们来了解所学内容，创建一个 Movies 数据库。

添加视图 - 如何使用视图模板文件干净地封装生成 HTML 响应回客户端

更改视图和母版页

传递 ViewModel

反馈

反馈

其他资源