添加视图 (C#)

项目
11/08/2024

注意

此处提供了本教程的更新版本，它使用 ASP.NET MVC 5 和 Visual Studio 2013。它更安全，更易于遵循并演示更多功能。

本教程将介绍如何使用 Microsoft Visual Web Developer 2010 Express Service Pack 1 生成 ASP.NET MVC Web 应用程序的基本知识，这是 visual Studio 的免费 Microsoft版本。在开始之前，请确保已安装下面列出的先决条件。可以通过单击以下链接来安装所有这些组件： Web 平台安装程序。或者，可使用以下链接单独安装各个必备软件：

Visual Studio Web 开发人员 Express SP1 先决条件

ASP.NET MVC 3 工具更新

SQL Server Compact 4.0（运行时 + 工具支持）

如果使用 Visual Studio 2010 而不是 Visual Web Developer 2010，请单击以下链接安装必备组件： Visual Studio 2010 先决条件。

带有 C# 源代码的 Visual Web 开发人员项目随本主题一起提供。下载 C# 版本。如果更喜欢 Visual Basic，请切换到本教程的 Visual Basic 版本。

在本部分中，你将修改 HelloWorldController 类以使用视图模板文件来干净地封装生成客户端的 HTML 响应的过程。

你将使用 ASP.NET MVC 3 中引入的新 Razor 视图引擎创建视图模板文件。基于 Razor 的视图模板具有 .cshtml 文件扩展名，并提供使用 C# 创建 HTML 输出的优雅方法。 Razor 可最大程度地减少编写视图模板时所需的字符数和击键，并启用快速流畅的编码工作流。

首先使用视图模板和 Index 类中 HelloWorldController 的方法。当前，Index 方法返回带有在控制器类中硬编码的消息的字符串。 Index更改方法以返回对象View，如下所示：

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

此代码使用视图模板生成对浏览器的 HTML 响应。在项目中，添加可用于 Index 该方法的视图模板。为此，请在方法中 Index 右键单击，然后单击“ 添加视图”。

显示突出显示索引后括号的屏幕截图。在右键单击菜单中选择了“添加视图”。

此时会显示“ 添加视图 ”对话框。保留默认值，然后单击“ 添加 ”按钮：

显示“添加视图”对话框的屏幕截图。索引位于“视图名称”字段中。

将 创建 MvcMovie\Views\HelloWorld 文件夹和 MvcMovie\Views\HelloWorld\Index.cshtml 文件。可以在解决方案资源管理器中看到它们：

显示解决方案资源管理器窗口的屏幕截图。Hello World 子文件夹和索引点 c s h t m l 在 Views 文件夹下以红色圆圈。

下面显示了 创建的 Index.cshtml 文件：

在 <h2> 标记下添加一些 HTML。修改后的 MvcMovie\Views\HelloWorld\Index.cshtml 文件如下所示。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

运行应用程序并浏览到 HelloWorld 控制器（http://localhost:xxxx/HelloWorld）。 Index控制器中的方法没有执行太多工作;它只运行了语句，该语句return View()指定该方法应使用视图模板文件来呈现对浏览器的响应。由于未显式指定要使用的视图模板文件的名称，因此 ASP.NET MVC 默认使用 \Views\HelloWorld 文件夹中的 Index.cshtml 视图文件。下图显示了视图中硬编码的字符串。

显示“我的 M V C 应用程序”中的“索引”页的屏幕截图。

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

更改视图和布局页面

首先，想要更改页面顶部的“我的 MVC 应用程序”标题。该文本对于每个页面都是常见的。它实际上仅在项目中的一个位置实现，即使它出现在应用程序中的每一页上。转到解决方案资源管理器中的 /Views/Shared 文件夹，打开 _Layout.cshtml 文件。此文件称为 布局页 ，它是所有其他页面使用的共享“shell”。

布局模板使你能够在一个位置指定网站的 HTML 容器布局，然后将它应用到网站中的多个页面。 @RenderBody()请注意文件底部附近的行。 RenderBody 是一个占位符，在该占位符中，你创建的所有特定于视图的页面显示在布局页中“已包装”。将布局模板中的标题标题从“我的 MVC 应用程序”更改为“MVC 电影应用”。

<div id="title">
      <h1>MVC Movie App</h1>
  </div>

运行应用程序并注意到它现在显示“MVC 电影应用”。 单击“关于”链接，可以看到该页面如何显示“MVC 电影应用”。我们能够在布局模板中进行更改一次，并让网站上的所有页面反映新标题。

显示 M V C 电影应用中的“关于”页面的屏幕截图。

完整的 _Layout.cshtml 文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

现在，让我们更改索引页（视图）的标题。

打开 MvcMovie\Views\HelloWorld\Index.cshtml。有两个位置可以进行更改：首先，显示在浏览器标题中的文本，然后在辅助标头（ <h2> 元素）中。稍稍对它们进行一些更改，这样可以看出哪一段代码更改了应用的哪部分。

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

若要指示要显示的 HTML 标题，上述代码将设置Title对象的属性（该属性ViewBag位于 Index.cshtml 视图模板中）。如果回顾布局模板的源代码，你会注意到模板在元素中 <title> 将此值用作 HTML 部分的一部分 <head> 。使用此方法，可以在视图模板和布局文件之间轻松传递其他参数。

运行应用程序并浏览到 http://localhost:xx/HelloWorld。请注意，浏览器标题、主标题和辅助标题已更改。（如果在浏览器中看不到更改，则可能正在查看缓存的内容。在浏览器中按 Ctrl+F5 强制加载来自服务器的响应。

另请注意 Index.cshtml 视图模板中的内容如何与 _Layout.cshtml 视图模板合并，并将单个 HTML 响应发送到浏览器。凭借布局模板可以很容易地对应用程序中所有页面进行更改。

显示 M V C 电影应用中的“我的电影列表”的屏幕截图。

不过，我们的一点“数据”（在本例中为“你好从我们的视图模板！”消息）是硬编码的。 MVC 应用程序有一个“V”（视图），而你已有一个“C”（控制器），但还没有“M”（模型）。不久，我们将逐步讲解如何创建数据库并从中检索模型数据。

将数据从控制器传递给视图

不过，在转到数据库并讨论模型之前，让我们先讨论如何将信息从控制器传递到视图。控制器类是在响应传入 URL 请求时调用的。控制器类用于编写处理传入参数的代码、从数据库检索数据，并最终决定要发回浏览器的响应类型。然后，可以从控制器使用视图模板来生成 HTML 响应并设置浏览器的格式。

控制器负责提供所需的任何数据或对象，以便视图模板向浏览器呈现响应。视图模板不应执行业务逻辑或直接与数据库交互。相反，它只应与控制器提供给它的数据一起使用。维护此“关注点分离”有助于保持代码干净且更易于维护。

目前，Welcome类中的HelloWorldController操作方法采用一个namenumTimes参数，然后将值直接输出到浏览器。我们改为将控制器更改为使用视图模板，而不是让控制器将此响应呈现为字符串。视图模板将生成动态响应，这意味着你需要将适当的数据位从控制器传递给视图以生成响应。可以通过让控制器将视图模板所需的 ViewBag 动态数据放入视图模板随后可以访问的对象中来执行此操作。

返回到HelloWorldController.cs文件并更改Welcome向对象添加值Message的方法NumTimesViewBag。 ViewBag 是一个动态对象，这意味着你可以将其放入其中的任何对象：在 ViewBag 对象内放置内容之前，该对象没有定义的属性。完整的 HelloWorldController.cs 文件如下所示：

using System.Web;
using System.Web.Mvc;

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

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

现在，对象 ViewBag 包含将自动传递给视图的数据。

接下来，需要欢迎视图模板！在 “调试 ”菜单中，选择“ 生成 MvcMovie ”以确保编译项目。

然后在方法内 Welcome 右键单击，然后单击“ 添加视图”。下面是 “添加视图 ”对话框的外观：

显示“添加视图”对话框的屏幕截图。欢迎位于“视图名称”字段中。

单击“添加”，然后在新的 Welcome.cshtml 文件中的<h2>元素下添加以下代码。你将创建一个循环，该循环显示“Hello”的次数与用户应说的次数一样多。完整的 Welcome.cshtml 文件如下所示。

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul> 
   @for (int i=0; i < ViewBag.NumTimes; i++) { 
      <li>@ViewBag.Message</li> 
   } 
</ul>

运行应用程序并浏览到以下 URL：

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

现在，数据从 URL 获取，并自动传递到控制器。控制器将数据打包到对象 ViewBag 中，并将该对象传递给视图。然后，该视图会将数据显示为 HTML 给用户。

显示 M V C 电影应用中的“欢迎”页面的屏幕截图。

当然，这是模型的一种“M”类型，而不是数据库类。让我们用学到的内容来创建一个电影数据库。

通过

添加视图 (C#)

更改视图和布局页面

将数据从控制器传递给视图

反馈

其他资源