添加视图 (VB)

项目
11/08/2024

本教程将介绍如何使用 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 先决条件。

本主题随附了具有 VB.NET 源代码的 Visual Web 开发人员项目。下载 VB.NET 版本。如果需要 C#，请切换到本教程的 C# 版本。

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

首先，将视图模板与类中的HelloWorldController方法一起使用Index。目前，该方法 Index 返回一个字符串，其中包含在控制器类中硬编码的消息。 Index更改方法以返回对象View，如下所示：

Public Function Index() As ActionResult
            Return View()
        End Function

现在，让我们向项目添加一个视图模板，可以使用该方法 Index 调用该模板。为此，请在方法中 Index 右键单击，然后单击“ 添加视图”。

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

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

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

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

<b>Hello</b> World!

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

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

更改视图和布局页面

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

@RenderBody()请注意文件底部附近的代码行。 RenderBody 是一个占位符，其中你创建的所有页面显示在布局页中“包装”中。将 <h1> 标题从 “ 我的 MVC 应用程序”更改为“MVC 电影应用”。

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

运行应用程序并记下它现在显示“MVC 电影应用”。 单击“关于”链接，该页还显示“MVC 电影应用”。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData("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", "HelloWorld")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

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

@Code
    ViewData("Title") = "Movie List"
End Code

<h2>My Movie List</h2>

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

打开 MvcMovie\Views\HelloWorld\Index.vbhtml。有两个位置可以进行更改：首先，显示在浏览器标题中的文本，然后在辅助标头（ <h2> 元素）中。我们将使它们略有不同，以便你可以看到哪些代码更改了应用的哪一部分。

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

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

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

不过，在转到数据库并讨论模型之前，让我们先讨论如何将信息从控制器传递到视图。我们希望传递视图模板所需的内容，以便向客户端呈现 HTML 响应。这些对象通常由控制器类创建和传递给视图模板，并且它们应仅包含视图模板所需的数据，并且不再包含这些对象。

以前使用 HelloWorldController 类时， Welcome 操作方法采取了一个 name 参数和一个 numTimes 参数，然后将参数值输出到浏览器。我们来代替控制器继续直接呈现此响应，而是将这些数据放入视图的包中。控制器和视图可以使用对象 ViewBag 来保存该数据。这将自动传递到视图模板，并用于使用包的内容作为数据呈现 HTML 响应。这样，控制器就涉及到一件事，另一个视图模板-使我们能够在应用程序中保持干净的“关注点分离”。

或者，我们可以定义一个自定义类，然后自行创建该对象的实例，用数据填充该对象并将其传递给视图。这通常称为 ViewModel，因为它是视图的自定义模型。但是，对于少量数据，ViewBag 效果很好。

返回到 HelloWorldController.vb 文件更改 Welcome 控制器内的方法，将 Message 和 NumTimes 放入 ViewBag 中。 ViewBag 是一个动态对象。这意味着你可以把你想要的东西放入其中。 ViewBag 在将内容放入其中之前，没有定义的属性。

HelloWorldController.vb完成同一文件中的新类。

Namespace MvcMovie
    Public Class HelloWorldController
        Inherits System.Web.Mvc.Controller
        '
        ' GET: /HelloWorld

        Function Index() As ActionResult
            Return View()
        End Function

        Public Function Welcome(ByVal name As String, Optional ByVal numTimes As Integer = 1) As ActionResult
            ViewBag.Message = "Hello " & name
            ViewBag.NumTimes = numTimes
            Return View()
        End Function

    End Class
End Namespace

现在，ViewBag 包含将自动传递到视图的数据。同样，或者，如果喜欢，我们可以传入自己的对象，如下所示：

return View(myCustomObject)

现在我们需要一个 WelcomeView 模板！运行应用程序，以便编译新代码。关闭浏览器，右键单击方法内部 Welcome ，然后单击“ 添加视图”。

下面是 “添加视图 ”对话框的外观。

在新欢迎元素下<h2>添加以下代码。vbhtml 文件。我们将创建一个循环，并说“你好”多次，用户说我们应该！

@Code 
    For i As Integer = 0 To ViewBag.NumTimes
@<h3> @ViewBag.Message @i.ToString </h3>
     Next i
 End Code

运行应用程序并浏览到 http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

现在，数据从 URL 获取，并自动传递到控制器。控制器将数据打包到对象 Model 中，并将该对象传递给视图。视图比向用户显示 HTML 格式的数据。

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

通过

添加视图 (VB)

更改视图和布局页面

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

反馈

其他资源