通过

ASP.NET MVC 4 基础知识

由 Web Camp 团队

下载 Web Camp 培训工具包

此动手实验室基于 MVC（模型视图控制器）音乐存储，这是一个教程应用程序，介绍和说明如何使用 ASP.NET MVC 和 Visual Studio。 在整个实验室中，你将了解简单性，但能够结合使用这些技术。 你将从一个简单的应用程序开始，并生成它，直到你拥有功能完备 ASP.NET MVC 4 Web 应用程序。

此实验室适用于 ASP.NET MVC 4。

如果要浏览本教程应用程序的 ASP.NET MVC 3 版本，可以在 MVC-Music-Store 中找到它。

此动手实验室假定开发人员在 Web 开发技术（如 HTML 和 JavaScript）方面具有经验。

注意

所有示例代码和代码片段都包含在 Web Camp 培训工具包中，可在 Microsoft-Web/WebCampTrainingKit 版本获取。 特定于此实验室的项目在 ASP.NET MVC 4 基础知识中提供。

音乐应用商店应用程序

将在整个实验室中构建的音乐商店 Web 应用程序包括三个主要部分：购物、结帐和管理。 访问者将能够按流派浏览专辑，将专辑添加到他们的购物车，查看他们的选择，最后继续结帐以登录并完成订单。 此外，商店管理员将能够管理可用的专辑及其主要属性。

音乐应用商店屏幕

音乐应用商店屏幕

ASP.NET MVC 4 Essentials

音乐应用商店应用程序将使用模型视图控制器（MVC）生成，这是将应用程序分为三个主要组件的体系结构模式：

  • 模型：模型对象是实现域逻辑的应用程序的各个部分。 通常，模型对象还会在数据库中检索和存储模型状态。
  • 视图： 视图是显示应用程序的用户界面（UI）的组件。 通常，此 UI 是从模型数据创建的。 例如，“相册”的编辑视图，该视图基于相册对象的当前状态显示文本框和下拉列表。
  • 控制器： 控制器是处理用户交互、操作模型并最终选择视图来呈现 UI 的组件。 在 MVC 应用程序中，视图仅显示信息；控制器处理并响应用户输入和交互。

MVC 模式有助于创建将应用程序的不同方面（输入逻辑、业务逻辑和 UI 逻辑）分开的应用程序，同时在这些元素之间提供松散耦合。 这种分离有助于在生成应用程序时管理复杂性，因为它允许你一次专注于实现的一个方面。 此外，MVC 模式使测试应用程序变得容易，还鼓励使用体验驱动开发（TDD）来创建应用程序。

ASP.NET MVC 框架提供了 ASP.NET Web 窗体模式的替代方法，用于创建基于 MVC 的 Web 应用程序 ASP.NET。 ASP.NET MVC 框架是一种轻型且高度可测试的演示框架，它（与基于 Web 表单的应用程序一样）与现有的 ASP.NET 功能（如母版页和基于成员身份的身份验证）集成，因此你可以获取核心 .NET 框架的所有功能。 如果已熟悉 ASP.NET Web 窗体，这非常有用，因为已使用的所有库也可用于 ASP.NET MVC 4。

此外，MVC 应用程序的三个主要组件之间的松散耦合也促进了并行开发。 例如，一个开发人员可以处理视图，第二个开发人员可以处理控制器逻辑，第三个开发人员可以专注于模型中的业务逻辑。

目标

在此动手实验室中，你将了解如何：

  • 根据音乐应用商店应用程序教程从头开始创建 ASP.NET MVC 应用程序
  • 添加控制器以处理网站主页的 URL 并浏览其主要功能
  • 添加视图以自定义显示的内容及其样式
  • 添加模型类以包含和管理数据和域逻辑
  • 使用视图模型模式将控制器操作中的信息传递到视图模板
  • 浏览适用于 Internet 应用程序的 ASP.NET MVC 4 新模板

先决条件

必须具有以下项才能完成此实验室：

安装

安装代码片段

为方便起见，你将在此实验室中管理的大部分代码都可用作 Visual Studio 代码片段。 若要安装代码片段，请运行 .\Source\Setup\CodeSnippets.vsi 文件。

如果你不熟悉 Visual Studio Code 代码片段，并且想要了解如何使用它们，则可以参考本文档“附录 C：使用代码片段” 中的附录。

练习

此动手实验室由以下练习组成：

  1. 练习 1：创建 MusicStore ASP.NET MVC Web 应用程序项目
  2. 练习 2：创建控制器
  3. 练习 3：将参数传递给控制器
  4. 练习 4：创建视图
  5. 练习 5：创建视图模型
  6. 练习 6：在视图中使用参数
  7. 练习 7：ASP.NET MVC 4 新模板周围一圈

注意

每个练习都附带一个 End 文件夹，其中包含在完成练习后应获取的结果解决方案。 如果需要完成练习的其他帮助，可以使用此解决方案作为指南。

估计完成本实验室的时间： 60 分钟。

练习 1：创建 MusicStore ASP.NET MVC Web 应用程序项目

在本练习中，你将了解如何在 Visual Studio 2012 Express for Web 及其主文件夹组织中创建 ASP.NET MVC 应用程序。 此外，你将了解如何添加新控制器，并使它在应用程序的主页中显示一个简单的字符串。

任务 1 - 创建 ASP.NET MVC Web 应用程序项目

  1. 在此任务中，你将使用 MVC Visual Studio 模板创建一个空 ASP.NET MVC 应用程序项目。 启动 VS Express for Web。

  2. 在“文件”菜单上，单击“新建项目”。

  3. 在“新建项目”对话框中，选择位于 Visual C#、Web 模板列表下的 ASP.NET MVC 4 Web 应用程序项目类型。

  4. 将 名称 更改为 MvcMusicStore。

  5. 在此练习的 Source 文件夹中设置解决方案在新的 Begin 文件夹中的位置，例如 [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin。 单击“确定”。

    “创建新项目”对话框

    “创建新项目”对话框

  6. 在 “新建 ASP.NET MVC 4 项目 ”对话框中，选择 “基本 ”模板并确保选择的 视图引擎 为 Razor。 单击“确定”。

    “新建 ASP.NET MVC 4 项目”对话框

    “新建 ASP.NET MVC 4 项目”对话框

任务 2 - 探索解决方案结构

ASP.NET MVC 框架包括一个 Visual Studio 项目模板，可帮助创建支持 MVC 模式的 Web 应用程序。 此模板使用所需的文件夹、项模板和配置文件条目创建新的 ASP.NET MVC Web 应用程序。

在此任务中，你将检查解决方案结构，以了解所涉及的元素及其关系。 以下文件夹包含在所有 ASP.NET MVC 应用程序中，因为默认情况下，ASP.NET MVC 框架使用“配置约定”方法，并根据文件夹命名约定做出一些默认假设。

  1. 创建项目后，请查看右侧解决方案资源管理器中创建的文件夹结构：

    解决方案资源管理器中的 ASP.NET MVC 文件夹结构

    解决方案资源管理器中的 ASP.NET MVC 文件夹结构

    1. 控制器。 此文件夹将包含控制器类。 在基于 MVC 的应用程序中，控制器负责处理最终用户交互、操作模型，并最终选择视图来呈现 UI。

      注意

      MVC 框架要求所有控制器的名称以“Controller”结尾，例如 HomeController、LoginController 或 ProductController。

    2. 模型。 此文件夹针对表示 MVC Web 应用程序的应用程序模型的类提供。 这通常包括用于定义对象的代码以及用于与数据存储交互的逻辑。 通常，实际模型对象将位于单独的类库中。 但是，创建新应用程序时，可以包含类，然后在开发周期的稍后点将它们移动到单独的类库中。

    3. 视图。 此文件夹是视图的建议位置，负责显示应用程序的用户界面的组件。 除了与呈现视图相关的任何其他文件外，视图还使用 .aspx、.ascx、.cshtml 和 .master 文件。 Views 文件夹包含每个控制器的文件夹;文件夹以控制器名称前缀命名。 例如，如果你有一个名为 HomeController 的控制器，则 Views 文件夹将包含名为 Home 的文件夹。 默认情况下，当 ASP.NET MVC 框架加载视图时，它会在 Views\controllerName 文件夹（Views[ControllerName][Action].aspx） 或 Razor Views 的视图名称（Views[ControllerName][Action].cshtml）中查找具有请求的视图名称的.aspx文件。

      注意

      除了前面列出的文件夹之外，MVC Web 应用程序还使用 Global.asax 文件设置全局 URL 路由默认值，并使用 Web.config 文件来配置应用程序。

任务 3 - 添加 HomeController

在不使用 MVC 框架的 ASP.NET 应用程序中，用户交互围绕页面进行组织，以及围绕从这些页面引发和处理事件。 相比之下，用户与 ASP.NET MVC 应用程序的交互围绕控制器及其操作方法进行组织。

另一方面，ASP.NET MVC 框架将 URL 映射到称为控制器的类。 控制器处理传入请求、处理用户输入和交互、执行适当的应用程序逻辑并确定要发回客户端的响应（显示 HTML、下载文件、重定向到其他 URL 等）。 在显示 HTML 的情况下，控制器类通常调用单独的视图组件来生成请求的 HTML 标记。 在 MVC 应用程序中，视图仅显示信息；控制器处理并响应用户输入和交互。

在此任务中，你将添加一个控制器类，该类将处理音乐应用商店网站的主页的 URL。

  1. 右键单击解决方案资源管理器中的“控制器”文件夹，选择“添加”，然后选择“控制器”命令：

    添加控制器命令

    添加控制器命令

  2. 此时会显示“ 添加控制器 ”对话框。 将控制器 命名为 HomeController ，然后按 Add。

    “添加控制器”对话框的屏幕截图，其中包含用于创建控制器的选项。

    “添加控制器”对话框

  3. 文件HomeController.cs在 Controllers 文件夹中创建。 若要让 HomeController 在其 Index 操作上返回字符串，请将 Index 方法替换为以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex1 HomeController 索引）

    public string Index()
{
    return "Hello from Home";
}

任务 4 - 运行应用程序

在此任务中，将在 Web 浏览器中试用应用程序。

  1. 按 F5 运行应用程序。 将编译项目，并启动本地 IIS Web 服务器。 本地 IIS Web 服务器将自动打开指向 Web 服务器的 URL 的 Web 浏览器。

    在 Web 浏览器中运行的应用程序

    在 Web 浏览器中运行的应用程序

    注意

    本地 IIS Web 服务器将在随机免费端口号上运行网站。 在上图中，站点正在运行 http://localhost:50103/，因此它使用的是端口 50103。 端口号可能会有所不同。

  2. 关闭浏览器。

练习 2：创建控制器

在本练习中，你将了解如何更新控制器以实现音乐应用商店应用程序的简单功能。 该控制器将定义用于处理以下每个特定请求的操作方法：

  • 音乐商店中音乐流派的列表页
  • 列出特定流派的所有音乐专辑的浏览页面
  • 显示有关特定音乐专辑的信息的详细信息页

对于本练习的范围，这些操作现在只会返回一个字符串。

任务 1 - 添加新 StoreController 类

在此任务中，你将添加新控制器。

  1. 如果尚未打开，请启动 VS Express for Web 2012。

  2. 在 “文件” 菜单中，选择“ 打开项目”。 在“打开项目”对话框中，浏览到 Source\Ex02-CreatingAController\Begin，选择 Begin.sln 并单击“ 打开”。 或者，你也可以继续使用在完成上一练习后获得的解决方案。

    1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

    2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

    3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

  3. 添加新控制器。 为此，请右键单击解决方案资源管理器中的 Controllers 文件夹，选择“添加”，然后选择“控制器”命令。 将 控制器名称 更改为 StoreController，然后单击“ 添加”。

    添加控制器对话框屏幕截图，其中包含用于输入控制器名称的栏和用于选择基架选项的选项。

    “添加控制器”对话框

任务 2 - 修改 StoreController 的操作

在此任务中，你将修改被调用 操作的控制器方法。 操作负责处理 URL 请求并确定应发回浏览器或调用 URL 的用户的内容。

  1. StoreController 类已具有 Index 方法。 稍后将在本实验室中使用它来实现列出音乐商店的所有流派的页面。 现在，只需将 Index 方法替换为以下返回字符串“Hello from Store.Index（）”的代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex2 StoreController 索引）

    public string Index()
{
  return "Hello from Store.Index()";
}

  2. 添加 “浏览 ”和 “详细信息” 方法。 为此，请将以下代码添加到 StoreController：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex2 StoreController BrowseAndDetails）

    // GET: /Store/Browse
public string Browse()
{
  return "Hello from Store.Browse()";
}

// GET: /Store/Details  
public string Details()
{
  return "Hello from Store.Details()";
}

任务 3 - 运行应用程序

在此任务中，将在 Web 浏览器中试用应用程序。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 更改 URL 以验证每个操作的实现。

    1. /Store。 你将看到“Hello from Store.Index（）”。

    2. /Store/Browse。 你将看到“Hello from Store.Browse（）”。

    3. /Store/Details。 你将看到“Hello from Store.Details（）”。

      浏览 StoreBrowse

      浏览 /Store/Browse

  3. 关闭浏览器。

练习 3：将参数传递给控制器

到目前为止，你一直在从控制器返回常量字符串。 在本练习中，你将了解如何使用 URL 和 querystring 将参数传递给控制器，然后使方法操作使用文本响应浏览器。

任务 1 - 将流派参数添加到 StoreController

在此任务中，将使用 querystring 将参数发送到 StoreController 中的 Browse 操作方法。

  1. 如果尚未打开，请启动 VS Express for Web。

  2. 在 “文件” 菜单中，选择“ 打开项目”。 在“打开项目”对话框中，浏览到 Source\Ex03-PassingParametersToAController\Begin，选择 Begin.sln 并单击“ 打开”。 或者，你也可以继续使用在完成上一练习后获得的解决方案。

    1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

    2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

    3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

  3. 打开 StoreController 类。 为此，请在解决方案资源管理器中展开“控制器”文件夹，然后双击StoreController.cs。

  4. 更改 Browse 方法，添加字符串参数以请求特定流派。 ASP.NET MVC 会在调用时自动将名为 流派 的任何查询字符串或表单 post 参数传递给此操作方法。 为此，请将 Browse 方法替换为以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex3 StoreController BrowseMethod）

    // GET: /Store/Browse?genre=Disco   
public string Browse(string genre)
{
  string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);

  return message;
}

注意

你正在使用 HttpUtility.HtmlEncode 实用工具方法阻止用户使用 /Store/Browse 等 链接将 Javascript 注入视图？Genre=<script>window.___location='http://hackersite.com'</script>。

有关进一步说明，请访问 此 msdn 文章。

任务 2 - 运行应用程序

在此任务中，你将在 Web 浏览器中试用应用程序并使用 流派 参数。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 将 URL 更改为 /Store/Browse？流派=Disco 验证操作是否接收流派参数。

    浏览 StoreBrowseGenre=Disco

    浏览 /Store/Browse？Genre=Disco

  3. 关闭浏览器。

任务 3 - 在 URL 中添加嵌入的 ID 参数

在此任务中，将使用 URL 将 ID 参数传递给 StoreController 的 Details 操作方法。 ASP.NET MVC 的默认路由约定是将操作方法名称后的 URL 段视为名为 Id 的参数。如果操作方法具有名为 Id 的参数，则 ASP.NET MVC 会自动将 URL 段作为参数传递给你。 在 URL Store/Details/5 中， ID 将被解释为 5。

  1. 更改 StoreController 的 Details 方法，添加名为 ID 的 int 参数。为此，请将 Details 方法替换为以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex3 StoreController DetailsMethod）

    // GET: /Store/Details/5    
public string Details(int id)
{
  string message = "Store.Details, ID = " + id;

  return message;
}

任务 4 - 运行应用程序

在此任务中，将在 Web 浏览器中试用应用程序并使用 Id 参数。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 将 URL 更改为 /Store/Details/5 ，以验证操作是否收到 ID 参数。

    浏览 StoreDetails5

    浏览 /Store/Details/5

练习 4：创建视图

到目前为止，你一直在从控制器操作返回字符串。 尽管这是了解控制器工作原理的一种有用方法，但它并不是生成真正的 Web 应用程序的方式。 视图是一种更好的组件，可用于使用模板文件将 HTML 生成回浏览器。

在本练习中，你将了解如何添加布局母版页来设置常见 HTML 内容的模板、用于增强网站的外观的 StyleSheet，最后添加一个视图模板，使 HomeController 能够返回 HTML。

任务 1 - 修改文件 _layout.cshtml

文件 ~/Views/Shared/_layout.cshtml 允许设置模板，以便在整个网站上使用通用 HTML。 在此任务中，你将添加一个布局母版页，其中包含指向主页和应用商店区域的链接的公共页眉。

  1. 如果尚未打开，请启动 VS Express for Web。

  2. 在 “文件” 菜单中，选择“ 打开项目”。 在“打开项目”对话框中，浏览到 Source\Ex04-CreatingAView\Begin，选择 Begin.sln 并单击“ 打开”。 或者，你也可以继续使用在完成上一练习后获得的解决方案。

    1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

    2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

    3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

  3. 文件 _layout.cshtml 包含网站上所有页面的 HTML 容器布局。 它包括 <HTML 响应的 html> 元素以及<头>和<正文>元素。 HTML 正文中的@RenderBody（） 标识视图模板将能够填充动态内容的区域。 (C#)

    <!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

  4. 添加一个公共标头，其中包含指向网站中所有页面的主页和应用商店区域的链接。 为此，请在正文>语句下面<添加以下代码。 (C#)

    <!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     @Styles.Render("~/Content/css")
     @Scripts.Render("~/bundles/modernizr")
</head>
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     @RenderBody()

     @Scripts.Render("~/bundles/jquery")
     @RenderSection("scripts", required: false)
</body>
</html>

  5. 包括一个 div 来呈现每个页面的正文部分。 将 @RenderBody（） 替换为以下突出显示的代码：（C#）

    ...
<body>
     <header>
          <div class="content-wrapper">
                <div class="float-left">
                     <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                </div>
                <div class="float-right">
                     <nav>
                          <ul id="menu">
                                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                <li>@Html.ActionLink("Store", "Index", "Store")</li>
                          </ul>
                     </nav>
                </div>
          </div>
     </header>
     <div id="body">
          @RenderSection("featured", required: false)
          <section class="content-wrapper main-content clear-fix">
                @RenderBody()
          </section>
     </div>
     ...
</body>
</html>

    注意

    你知道吗？ Visual Studio 2012 具有代码片段，可轻松地在 HTML、代码文件中添加常用代码等！ 键入 <div> 并按 Tab 两次以插入完整的 div 标记来试用它。

任务 2 - 添加 CSS 样式表

空项目模板包含一个非常简化的 CSS 文件，该文件只包含用于显示基本表单和验证消息的样式。 你将使用其他 CSS 和图像（可能由设计器提供）来增强网站的外观。

在此任务中，你将添加 CSS 样式表来定义网站的样式。

  1. CSS 文件和图像包含在本实验室的 Source\Assets\Content 文件夹中。 若要将其添加到应用程序，请将其内容从 Windows 资源管理器窗口拖到 Visual Studio Express for Web 中的解决方案资源管理器，如下所示：

    拖动样式内容

    拖动样式内容

  2. 将出现一个警告对话框，要求确认以替换 Site.css 文件和一些现有图像。 选中 “应用于所有项目 ”，然后单击“ 是”。

任务 3 - 添加视图模板

在此任务中，你将添加一个视图模板来生成 HTML 响应，该响应将使用本练习中添加的布局母版页和 CSS。

  1. 若要在浏览网站的主页时使用视图模板，首先需要指示而不是返回字符串， HomeController Index 方法将返回 视图。 打开 HomeController 类并更改其 Index 方法以返回 ActionResult，并让其返回 View（）。

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex4 HomeController 索引）

    public class HomeController : Controller
{
    //
    // GET: /Home/

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

  2. 现在，需要添加适当的视图模板。 为此，请在索引操作方法内右键单击并选择“添加视图”。 此时会显示“ 添加视图 ”对话框。

    从索引方法中添加 View

    从索引方法中添加 View

  3. 将显示 “添加视图 ”对话框以生成视图模板文件。 默认情况下，此对话框会预先填充视图模板的名称，使其与将使用该模板的操作方法匹配。 由于在 HomeController 的 Index 操作方法中使用了“添加视图”上下文菜单，因此“添加视图”对话框将“索引”作为默认视图名称。 单击“添加” 。

    “添加视图”对话框屏幕截图。此时会显示一个对话框，其中包含用于添加视图模板的特定选项。

    “添加视图”对话框

  4. Visual Studio 在 Views\Home 文件夹中生成 Index.cshtml 视图模板，然后打开它。

    已创建主页索引视图

    已创建主页索引视图

    注意

    Index.cshtml 文件的名称和位置相关，遵循默认 ASP.NET MVC 命名约定。

    文件夹 \Views*Home* 与控制器名称（主 控制器）匹配。 视图模板名称（索引）与将显示视图的控制器操作方法匹配。

    这样，ASP.NET MVC 就避免在使用此命名约定返回视图时显式指定视图模板的名称或位置。

  5. 生成的视图模板基于 前面定义的 _layout.cshtml 模板。 将 ViewBag.Title 属性更新为 Home，并将主内容更改为 “主页”，如以下代码所示：

    @{
    ViewBag.Title = "Home";
}

<h2>This is the Home Page</h2>

  6. 在解决方案资源管理器中选择 MvcMusicStore 项目，然后按 F5 运行应用程序。

任务 4：验证

若要验证是否已正确执行上一练习中的所有步骤，请继续执行如下操作：

在浏览器中打开应用程序后，应注意：

  1. HomeController 的 Index 操作方法找到并显示 \Views\Home\Index.cshtml 视图模板，即使代码称为 return View（），因为视图模板遵循标准命名约定。

  2. 主页显示 \Views\Home\Index.cshtml 视图模板中定义的欢迎消息。

  3. 主页使用 _layout.cshtml 模板，因此欢迎消息包含在标准网站 HTML 布局中。

    使用定义的 LayoutPage 和样式的主索引视图

    使用定义的 LayoutPage 和样式的主索引视图

练习 5：创建视图模型

到目前为止，你使视图显示硬编码的 HTML，但是，为了创建动态 Web 应用程序，视图模板应从控制器接收信息。 用于该目的的 一种常见技术是 ViewModel 模式，该模式允许控制器打包生成相应 HTML 响应所需的所有信息。

在本练习中，你将了解如何创建 ViewModel 类并添加所需的属性：应用商店中的流派数以及这些流派的列表。 你还将更新 StoreController 以使用创建的 ViewModel，最后，你将创建一个新的视图模板，该模板将在页面中显示提及的属性。

任务 1 - 创建 ViewModel 类

在此任务中，你将创建一个 ViewModel 类，该类将实现应用商店流派列表方案。

  1. 如果尚未打开，请启动 VS Express for Web。

  2. 在 “文件” 菜单中，选择“ 打开项目”。 在“打开项目”对话框中，浏览到 Source\Ex05-CreatingAViewModel\Begin，选择 Begin.sln 并单击“ 打开”。 或者，你也可以继续使用在完成上一练习后获得的解决方案。

    1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

    2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

    3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

  3. 创建一个 ViewModels 文件夹以保存 ViewModel。 为此，请右键单击顶级 MvcMusicStore 项目，选择“添加”，然后选择“新建文件夹”。

    添加新文件夹

    添加新文件夹

  4. 命名文件夹为ViewModels。

    解决方案资源管理器中的 ViewModels 文件夹

    解决方案资源管理器中的 ViewModels 文件夹

  5. 创建 ViewModel 类。 为此，请右键单击最近创建的 ViewModels 文件夹，选择“添加”，然后选择“新建项”。 在“代码”下，选择“类”项并将文件命名为StoreIndexViewModel.cs，然后单击“添加”。

    添加新类

    添加新类

    创建 StoreIndexViewModel 类

    创建 StoreIndexViewModel 类

任务 2 - 向 ViewModel 类添加属性

可通过两个参数从 StoreController 传递到视图模板，以便生成预期的 HTML 响应：应用商店中的流派数以及这些流派的列表。

在此任务中 ，将这 2 个属性添加到 StoreIndexViewModel 类： NumberOfGenres （整数）和 流派 （字符串列表）。

  1. 将 NumberOfGenres 和流派属性添加到 StoreIndexViewModel 类。 为此，请将以下 2 行添加到类定义：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex5 StoreIndexViewModel 属性）

    public class StoreIndexViewModel
{
    public int NumberOfGenres { get; set; }

    public List<string> Genres { get; set; }
}

注意

{ get; set; } 表示法利用 C# 的自动实现属性功能。 它提供属性的好处，而无需我们声明后盾字段。

任务 3 - 更新 StoreController 以使用 StoreIndexViewModel

StoreIndexViewModel 类封装从 StoreController 的 Index 方法传递到视图模板以生成响应所需的信息。

在此任务中 ，你将更新 StoreController 以使用 StoreIndexViewModel。

  1. 打开 StoreController 类。

    打开 StoreController 类

    打开 StoreController 类

  2. 若要使用 StoreController 中的 StoreIndexViewModel 类，请在 StoreController 代码顶部添加以下命名空间：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex5 StoreIndexViewModel using ViewModels）

    using MvcMusicStore.ViewModels;

  3. 更改 StoreController 的 Index 操作方法，以便创建并填充 StoreIndexViewModel 对象，然后将其传递到视图模板，以生成包含它的 HTML 响应。

    注意

    在实验室“ASP.NET MVC 模型和数据访问”中，你将编写用于从数据库检索存储流派列表的代码。 在以下代码中，你将创建一个 虚拟数据流派列表 ，用于填充 StoreIndexViewModel。

    创建和设置 StoreIndexViewModel 对象后，它将作为参数 传递给 View 方法。 这表示视图模板将使用该对象来生成 HTML 响应。

  4. 将 Index 方法替换为以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex5 StoreController 索引方法）

    public ActionResult Index()
{
    // Create a list of genres
    var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};

    // Create our view model
    var viewModel = new StoreIndexViewModel { 
        NumberOfGenres = genres.Count(),
        Genres = genres
    };

    return this.View(viewModel);
}

注意

如果不熟悉 C#，则可以假设使用 var 意味着 viewModel 变量已后期绑定。 不正确 - C# 编译器根据分配给变量的内容使用类型推理来确定 viewModel 的类型 为 StoreIndexViewModel。 此外，通过将本地 viewModel 变量编译为 StoreIndexViewModel 类型，可以获得编译时检查和 Visual Studio 代码编辑器支持。

任务 4 - 创建使用 StoreIndexViewModel 的视图模板

在此任务中，你将创建一个视图模板，该模板将使用从控制器传递的 StoreIndexViewModel 对象来显示流派列表。

  1. 在创建新的视图模板之前，让我们生成项目，以便 “添加视图”对话框 知道 StoreIndexViewModel 类。 通过选择“ 生成 ”菜单项，然后选择 “生成 MvcMusicStore”来生成项目。

    生成项目

    生成项目

  2. 创建新的视图模板。 为此，请在 Index 方法内右键单击并选择“添加视图”。

    添加视图

    添加视图

  3. 由于从 StoreController 调用了“添加视图”对话框，因此它将默认在 \Views\Store\Index.cshtml 文件中添加视图模板。 选中“创建强类型视图”复选框，然后选择 StoreIndexViewModel 作为 Model 类。 此外，请确保所选的视图引擎为 Razor。 单击“添加” 。

    “添加视图”对话框的屏幕截图，其中显示了可用选项以及用于创建强类型视图模型类的选项。

    “添加视图”对话框

    创建 并打开 \Views\Store\Index.cshtml 视图模板文件。 根据上一步中提供给 “添加视图 ”对话框的信息，视图模板需要 StoreIndexViewModel 实例作为用于生成 HTML 响应的数据。 你会注意到模板继承了 C# 中的一个 ViewPage<musicstore.viewmodels.storeindexviewmodel> 。

任务 5 - 更新视图模板

在此任务中，你将更新在上一个任务中创建的视图模板，以检索页面中的流派数及其名称。

注意

你将使用 @ 语法（通常称为“代码 nuggets”）在视图模板中执行代码。

  1. 在 Index.cshtml 文件中的 Store 文件夹中，将其代码替换为以下内容：
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
  1. 循环访问 StoreIndexViewModel 中的流派列表，并使用 foreach 循环创建 HTML <ul> 列表。 (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>
  1. 按 F5 运行应用程序并浏览 /Store。 你将看到从 StoreController 传递到视图模板的 StoreIndexViewModel 对象中的流派列表。

显示流派列表的视图

显示流派列表的视图

  1. 关闭浏览器。

练习 6：在视图中使用参数

在练习 3 中，你学习了如何将参数传递给控制器。 在本练习中，你将了解如何在视图模板中使用这些参数。 为此，首先会介绍模型类，这些类将帮助你管理数据和域逻辑。 此外，你将了解如何在 ASP.NET MVC 应用程序中创建指向页面的链接，而无需担心 URL 路径编码等事项。

任务 1 - 添加模型类

与创建 ViewModels 不同，它只是为了将信息从控制器传递到视图，因此生成模型类以包含和管理数据和域逻辑。 在此任务中，你将添加两个模型类来表示这些概念： 流派 和 专辑。

  1. 如果尚未打开，请启动 VS Express for Web

  2. 在 “文件” 菜单中，选择“ 打开项目”。 在“打开项目”对话框中，浏览到 Source\Ex06-UsingParametersInView\Begin，选择 Begin.sln 并单击“ 打开”。 或者，你也可以继续使用在完成上一练习后获得的解决方案。

    1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。 为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。

    2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。

    3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。

      注意

      使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。 借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。 因此，在从此实验室打开现有解决方案后，必须运行这些步骤。

  3. 添加流派模型类。 为此，请右键单击解决方案资源管理器中的 Models 文件夹，选择“添加”，然后选择“新建项”选项。 在“代码”下，选择“类”项并将文件命名为Genre.cs，然后单击“添加”。

    添加类

    添加新项

    添加流派模型类

    添加流派模型类

  4. 将 Name 属性添加到流派类。 为此，请添加以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 流派）

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Genre
    {
        public string Name { get; set; }
    }
}

  5. 按照与之前相同的过程，添加一个 Album 类。 为此，请右键单击解决方案资源管理器中的 Models 文件夹，选择“添加”，然后选择“新建项”选项。 在“代码”下，选择“类”项并将文件命名为Album.cs，然后单击“添加”。

  6. 向 Album 类添加两个属性： 流派 和 标题。 为此，请添加以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 专辑）

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcMusicStore.Models
{
    public class Album
    {
        public string Title { get; set; }

        public Genre Genre { get; set; }
    }
}

任务 2 - 添加 StoreBrowseViewModel

此任务将使用 StoreBrowseViewModel 显示与所选流派匹配的专辑。 在此任务中，你将创建此类，然后添加两个属性来处理 流派 及其 专辑的列表。

  1. 添加 StoreBrowseViewModel 类。 为此，请右键单击解决方案资源管理器中的 ViewModels 文件夹，选择“添加”，然后选择“新建项”选项。 在“代码”下，选择“类”项并将文件命名为StoreBrowseViewModel.cs，然后单击“添加”。

  2. 在 StoreBrowseViewModel 类中添加对 Models 的引用。 为此，请使用命名空间添加以下内容：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 UsingModel）

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
    }
}

  3. 向 StoreBrowseViewModel 类添加两个属性： 流派 和 专辑。 为此，请添加以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 ModelProperties）

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MvcMusicStore.Models;

namespace MvcMusicStore.ViewModels
{
    public class StoreBrowseViewModel
    {
        public Genre Genre { get; set; }

        public List<Album> Albums { get; set; }
    }
}

注意

什么是 List<Album>？：此定义使用 List<T 类型，其中 T> 将此列表元素的类型限制为此列表的元素所属的类型，在本例中为 Album（或其任何后代）。

这种设计类和方法的功能会延迟一个或多个类型的规范，直到客户端代码声明和实例化类或方法是称为 泛型的 C# 语言的功能。

List<T> 是 ArrayList 类型的泛型等效项，在 System.Collections.Generic 命名空间中可用。 使用泛型的好处之一是，由于指定了类型，因此无需处理类型检查操作，例如像使用 ArrayList 一样将元素强制转换为 Album。

任务 3 - 在 StoreController 中使用新 ViewModel

在此任务中，你将修改 StoreController 的“浏览”和“详细信息”操作方法，以使用新的 StoreBrowseViewModel。

  1. 在 StoreController 类中添加对 Models 文件夹的引用。 为此，请展开解决方案资源管理器中的 Controllers 文件夹并打开 StoreController 类。 然后，添加以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 UsingModelInController）

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMusicStore.ViewModels;
using MvcMusicStore.Models;

  2. 替换 Browse 操作方法以使用 StoreViewBrowseController 类。 你将创建一个流派和两个新的专辑对象与虚拟数据（在下一个动手实验室中，你将使用数据库中的实际数据）。 为此，请将 Browse 方法替换为以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 BrowseMethod）

    //
// GET: /Store/Browse?genre=Disco

public ActionResult Browse(string genre)
{
    var genreModel = new Genre()
    {
        Name = genre
    };

    var albums = new List<Album>()
    {
        new Album() { Title = genre + " Album 1" },
        new Album() { Title = genre + " Album 2" }
    };

    var viewModel = new StoreBrowseViewModel()
    {
        Genre = genreModel,
        Albums = albums
    };

    return this.View(viewModel);
}

  3. 替换 Details 操作方法以使用 StoreViewBrowseController 类。 你将创建一个新的 Album 对象，以返回到 视图。 为此，请将 Details 方法替换为以下代码：

    （代码片段 - ASP.NET MVC 4 基础知识 - Ex6 DetailsMethod）

    //
// GET: /Store/Details/5

public ActionResult Details(int id)
{
  var album = new Album { Title = "Sample Album" };

  return this.View(album);
}

任务 4 - 添加浏览视图模板

在此任务中，你将添加 浏览 视图以显示为特定流派找到的专辑。

  1. 在创建新的视图模板之前，应生成项目，以便 “添加视图 ”对话框知道 要使用的 ViewModel 类。 通过选择“ 生成 ”菜单项，然后选择 “生成 MvcMusicStore”来生成项目。

  2. 添加浏览视图。 为此，请在 StoreController 的“浏览”操作方法中右键单击，然后单击“添加视图”。

  3. 在 “添加视图 ”对话框中，验证视图名称是否为 “浏览”。 选中“创建强类型视图”复选框，然后从“模型”类下拉列表中选择 StoreBrowseViewModel。 保留其他字段的默认值。 然后单击“添加” 。

    添加浏览视图

    添加浏览视图

  4. 修改 Browse.cshtml 以显示流派的信息，访问传递给视图模板的 StoreBrowseViewModel 对象。 为此，请将内容替换为以下内容：（C#）

    @model MvcMusicStore.ViewModels.StoreBrowseViewModel

@{
    ViewBag.Title = "Browse Albums";
}

<h2>Browsing Genre: @Model.Genre.Name</h2>

<ul>
    @foreach (var album in Model.Albums)
    {
        <li>@album.Title</li>
    }
</ul>

任务 5 - 运行应用程序

在此任务中 ，你将测试 Browse 方法是否从 Browse 方法操作检索相册。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 将 URL 更改为 /Store/Browse？流派=Disco 验证操作是否返回两张专辑。

    浏览应用商店迪斯科专辑

    浏览应用商店迪斯科专辑

任务 6 - 显示有关特定相册的信息

在此任务中，你将实现应用商店 /详细信息 视图以显示有关特定专辑的信息。 在此动手实验室中，有关专辑的显示内容已包含在“视图”模板中。 因此，不使用创建 StoreDetailsViewModel 类，而是使用当前 StoreBrowseViewModel 模板将相册传递给它。

  1. 根据需要关闭浏览器，以返回到 Visual Studio 窗口。 为 StoreController 的 Details 操作方法添加新的“详细信息”视图。 为此，请右键单击 StoreController 类中的 Details 方法，然后单击“添加视图”。

  2. 在 “添加视图 ”对话框中，验证 视图名称 是否为 详细信息。 选中“创建强类型视图”复选框，然后从“模型”类下拉列表中选择“相册”。 保留其他字段的默认值。 然后单击“添加” 。 这将创建并打开 \Views\Store\Details.cshtml 文件。

    添加详细信息视图

    添加详细信息视图

  3. 修改 Details.cshtml 文件以显示相册的信息，访问传递给视图模板的 Album 对象。 为此，请将内容替换为以下内容：（C#）

    @model MvcMusicStore.Models.Album

@{
    ViewBag.Title = "Details";
}

<h2>Album: @Model.Title</h2>

任务 7 - 运行应用程序

在此任务中，你将测试详细信息视图是否从“详细信息”操作方法检索相册的信息。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 将 URL 更改为 /Store/Details/5 以验证专辑的信息。

    浏览相册详细信息

    浏览专辑的详细信息

任务 8 - 在页面之间添加链接

在此任务中，你将在应用商店视图中添加一个链接，以在每个流派名称中具有指向相应 /Store/Browse URL 的链接。 这样，当你单击流派（例如 Disco）时，它将导航到 /Store/Browse？genre=Disco URL。

  1. 根据需要关闭浏览器，以返回到 Visual Studio 窗口。 更新 “索引 ”页以添加指向 “浏览 ”页的链接。 为此，请在解决方案资源管理器展开“视图”文件夹，然后双击“Store”文件夹，然后双击 Index.cshtml 页面。

  2. 添加指向“浏览”视图的链接，指示所选流派。 为此，请替换 li> 标记中突出显示的<以下代码：（C#）

    @model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p> Select from @Model.NumberOfGenres genres</p>

<ul>
    @foreach (string genreName in Model.Genres) {
        <li>
            @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
        </li>
        }
</ul>

    注意

    另一种方法是直接链接到页面，代码如下所示：

    <a href=“/Store/Browse？genre=@genreName”>@genreName</a&gt;

    虽然此方法有效，但这取决于硬编码字符串。 如果以后重命名控制器，则必须手动更改此指令。 更好的替代方法是使用 HTML 帮助程序 方法。 ASP.NET MVC 包括可用于此类任务的 HTML 帮助程序方法。 使用 Html.ActionLink（） 帮助程序方法可以轻松生成 HTML <链接> ，确保 URL 路径正确编码。

    Html.ActionLink 有多个重载。 在本练习中，你将使用采用三个参数的一个参数：

    1. 链接文本，显示流派名称
    2. 控制器操作名称 （浏览）
    3. 路由参数值，同时指定名称（流派）和值（流派名称）

任务 9 - 运行应用程序

在此任务中，你将测试每个流派是否显示一个指向相应 /Store/Browse URL 的链接。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 将 URL 更改为 /Store ，以验证每个流派是否链接到相应的 /Store/Browse URL。

    浏览流派，其中包含“浏览”页的链接

    浏览流派，其中包含“浏览”页的链接

任务 10 - 使用动态 ViewModel 集合传递值

在此任务中，你将了解一种简单而强大的方法，用于在控制器和视图之间传递值，而无需在模型中进行任何更改。 ASP.NET MVC 4 提供集合“ViewModel”，该集合也可以分配给任何动态值，并在控制器和视图内部访问。

现在，你将使用 ViewBag 动态集合将控制器中的“星标流派”列表传递给视图。 应用商店索引视图将访问 ViewModel 并显示信息。

  1. 根据需要关闭浏览器，以返回到 Visual Studio 窗口。 打开 StoreController.cs 并修改 Index 方法，以在 ViewModel 集合中创建星型流派列表：

    public ActionResult Index()
{
    // Create list of genres
    var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };

    // Create your view model
    var viewModel = new StoreIndexViewModel
    {
        NumberOfGenres = genres.Count,
        Genres = genres
    };

    ViewBag.Starred = new List<string> { "Rock", "Jazz" };

    return this.View(viewModel);
}

    注意

    还可以使用语法 ViewBag[“Starred”] 访问属性。

  2. 星形图标 “starred.png” 包含在 本实验室的 Source\Assets\Images 文件夹中。 若要将其添加到应用程序，请将其内容从 Windows 资源管理器窗口拖动到 Visual Web Developer Express 中的解决方案资源管理器，如下所示：

    将星形图像添加到解决方案

    将星形图像添加到解决方案

  3. 打开视图 Store/Index.cshtml 并修改内容。 你将在 ViewBag 集合中读取“星标”属性，并询问当前流派名称是否在列表中。 在这种情况下，你将向流派链接显示一个星形图标。 (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
     ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
     @foreach (string genreName in Model.Genres)
     {
          <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)

                @if (ViewBag.Starred.Contains(genreName))
                { 
                     <img src="../../Content/Images/starred.png" alt="Starred element" />
                }
          </li>
     }
</ul>
<br />
<h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>

任务 11 - 运行应用程序

在此任务中，你将测试星型流派是否显示星形图标。

  1. 按 F5 运行应用程序。

  2. 项目在主页中启动。 将 URL 更改为 /Store ，以验证每个特色流派是否具有尊重标签：

    使用星形元素浏览流派

    使用星形元素浏览流派

练习 7：ASP.NET MVC 4 新模板周围一圈

在本练习中，你将了解 ASP.NET MVC 4 项目模板中的增强功能，并了解新模板最相关的功能。

任务 1：探索 ASP.NET MVC 4 Internet 应用程序模板

  1. 如果尚未打开，请启动 VS Express for Web

  2. 选择文件 |新建 |项目菜单命令。 在 “新建项目 ”对话框中，选择 Visual C#|左窗格树上的 Web 模板，然后选择 ASP.NET MVC 4 Web 应用程序。 将项目命名为 MusicStore 并将解决方案名称更新为“开始”，然后选择位置（或保留默认值），然后单击“确定”。

    创建新的 ASP.NET MVC 4 项目

    创建新的 ASP.NET MVC 4 项目

  3. 在 “新建 ASP.NET MVC 4 项目 ”对话框中，选择 Internet 应用程序 项目模板，然后单击“ 确定”。 请注意，可以选择 Razor 或 ASPX 作为视图引擎。

    创建新的 ASP.NET MVC 4 Internet 应用程序

    创建新的 ASP.NET MVC 4 Internet 应用程序

    注意

    ASP.NET MVC 3 中引入了 Razor 语法。 其目标是最大程度地减少文件中所需的字符数和击键次数，从而实现快速流畅的编码工作流。 Razor 利用现有的 C#/VB（或其他）语言技能，并提供一个模板标记语法，可实现出色的 HTML 构造工作流。

  4. 按 F5 运行解决方案，并查看续订的模板。 可以查看以下功能：

    1. 新式模板

      模板已更新，提供更现代的样式。

      ASP.NET MVC 4 restyled 模板

      ASP.NET MVC 4 restyled 模板

    2. 自适应呈现

      查看调整浏览器窗口的大小，并注意页面布局如何动态适应新的窗口大小。 这些模板使用自适应呈现技术在桌面和移动平台中正确呈现，而无需进行任何自定义。

      ASP.NET 不同浏览器大小的 MVC 4 项目模板

      ASP.NET 不同浏览器大小的 MVC 4 项目模板

  5. 关闭浏览器以停止调试器并返回到 Visual Studio。

  6. 现在，你可以浏览解决方案，并查看项目模板中 ASP.NET MVC 4 引入的一些新功能。

    ASP.NET MVC4-internet-application-project-template

    ASP.NET MVC 4 Internet 应用程序项目模板

    1. HTML5 标记

      浏览模板视图以查找新的主题标记，例如打开 Home 文件夹中的 About.cshtml 视图。

      使用 Razor 和 HTML5 标记的新模板

      使用 Razor 和 HTML5 标记的新模板

    2. 包含的 JavaScript 库

      1. jQuery：jQuery 简化了 HTML 文档遍历、事件处理、动画处理和 Ajax 交互。

      2. jQuery UI：此库为基于 jQuery JavaScript 库构建的低级交互和动画、高级效果和可主题小组件提供抽象。

        注意

        可以在 [http://docs.jquery.com/]（http://docs.jquery.com/）中了解 jQuery 和 jQuery UI。

      3. KnockoutJS：ASP.NET MVC 4 默认模板现在包括 KnockoutJS，这是一个 JavaScript MVVM 框架，可用于使用 JavaScript 和 HTML 创建丰富且高度响应性的 Web 应用程序。 与 ASP.NET MVC 3 中一样，jQuery 和 jQuery UI 库也包含在 ASP.NET MVC 4 中。

        注意

        可以在以下链接中获取有关 KnockOutJS 库的详细信息： http://learn.knockoutjs.com/

      4. Modernizr：此库会自动运行，使网站在使用 HTML5 和 CSS3 技术时与旧浏览器兼容。

        注意

        可以在以下链接中获取有关 Modernizr 库的详细信息： http://www.modernizr.com/。

    3. 解决方案中包含的 SimpleMembership

      SimpleMembership 已设计为以前 ASP.NET 角色和成员资格提供程序系统的替代项。 它具有许多新功能，使开发人员能够更轻松地以更灵活的方式保护网页。

      Internet 模板已经设置了一些内容来集成 SimpleMembership，例如，AccountController 已准备好使用 OAuthWebSecurity（用于 OAuth 帐户注册、登录、管理等）和 Web 安全性。

      解决方案中包含的 SimpleMembership

      解决方案中包含的 SimpleMembership

      注意

      在 MSDN 中查找有关 OAuthWebSecurity 的详细信息。

注意

此外，可以按照 附录 B 将此应用程序部署到 Windows Azure 网站：使用 Web 部署发布 ASP.NET MVC 4 应用程序。

总结

通过完成此动手实验室，你已了解 ASP.NET MVC 的基础知识：

  • MVC 应用程序的核心元素及其交互方式
  • 如何创建 ASP.NET MVC 应用程序
  • 如何添加和配置控制器以处理通过 URL 和 querystring 传递的参数
  • 如何添加布局母版页来设置常见 HTML 内容的模板、用于增强外观的 StyleSheet 以及用于显示 HTML 内容的视图模板
  • 如何使用 ViewModel 模式将属性传递给视图模板以显示动态信息
  • 如何使用传递给视图模板中的控制器的参数
  • 如何向 ASP.NET MVC 应用程序内的页面添加链接
  • 如何在视图中添加和使用动态属性
  • ASP.NET MVC 4 项目模板中的增强功能

附录 A：安装 Visual Studio Express 2012 for Web

可以使用 Microsoft Web 平台安装程序 安装 Microsoft Visual Studio Express 2012 for Web 或其他“Express”版本。 以下说明指导你完成使用 Microsoft Web 平台安装程序 安装 Visual Studio Express 2012 for Web 所需的步骤。

  1. 转到 [/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169]（/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169）。 或者，如果已安装 Web 平台安装程序，可以打开它并搜索产品“Visual Studio Express 2012 for Web with Windows Azure SDK”。

  2. 单击“立即安装”。 如果没有 Web 平台安装程序 ，将重定向以先下载并安装它。

  3. Web 平台安装程序打开后，单击“安装”以启动安装程序。

    安装 Visual Studio Express

    安装 Visual Studio Express

  4. 阅读所有产品的许可证和条款，然后单击“我接受”继续。

    接受许可条款

    接受许可条款

  5. 等待下载和安装过程完成。

    安装进度

    安装进度

  6. 安装完成后，单击“ 完成”。

    安装已完成

    安装已完成

  7. 单击“退出”关闭 Web 平台安装程序。

  8. 若要打开 Visual Studio Express for Web，请转到“开始”屏幕并开始编写“VS Express”，然后单击 VS Express for Web 磁贴。

    VS Express for Web 磁贴

    VS Express for Web 磁贴

附录 B：使用 Web 部署发布 ASP.NET MVC 4 应用程序

本附录介绍如何从 Windows Azure 管理门户创建新网站，并发布通过遵循实验室获取的应用程序，并利用 Windows Azure 提供的 Web 部署发布功能。

任务 1 - 从 Windows Azure 门户创建新网站

  1. 转到 Windows Azure 管理门户 ，使用与订阅关联的Microsoft凭据登录。

    注意

    借助 Windows Azure，可以免费托管 10 个 ASP.NET 网站，然后在流量增长时进行缩放。 可以在此处注册。

    登录到 Windows Azure 门户

    登录到 Windows Azure 管理门户

  2. 单击命令栏上的“ 新建 ”。

    创建新网站

    创建新网站

  3. 单击“计算 | 网站”。 然后选择“快速创建”选项。 提供新网站的可用 URL，然后单击“ 创建网站”。

    注意

    Windows Azure 网站是云中运行的 Web 应用程序的主机，可以控制和管理这些应用程序。 使用“快速创建”选项，可以从门户外部将已完成的 Web 应用程序部署到 Windows Azure 网站。 它不包括设置数据库的步骤。

    使用“快速创建”创建新网站

    使用快速创建创建新网站

  4. 等到新 网站 创建。

  5. 创建网站后，单击 URL 列下的链接。 检查新网站是否正常工作。

    浏览到新网站

    浏览到新网站

    网站正在运行

    正在运行的网站

  6. 返回到门户，单击“名称”列下的网站名称以显示管理页。

    打开网站管理页面

    打开网站管理页

  7. 在 “仪表板 ”页的 “快速概览 ”部分下，单击“ 下载发布配置文件 ”链接。

    注意

    发布 配置文件 包含将 Web 应用程序发布到每个已启用发布方法的 Windows Azure 网站所需的所有信息。 发布配置文件包含连接并针对启用发布方法的每个终结点进行身份验证所需的 URL、用户凭据和数据库字符串。 Microsoft WebMatrix 2，Microsoft Visual Studio Express for Web 和 Microsoft Visual Studio 2012 支持读取发布配置文件，以自动配置这些程序，以便将 Web 应用程序发布到 Windows Azure 网站。

    下载网站发布配置文件

    下载网站发布配置文件

  8. 将发布配置文件下载到已知位置。 在本练习中，你将了解如何使用此文件将 Web 应用程序从 Visual Studio 发布到 Windows Azure 网站。

    保存发布配置文件

    保存发布配置文件

任务 2 - 配置数据库服务器

如果应用程序使用 SQL Server 数据库，则需要创建SQL 数据库服务器。 如果要部署不使用 SQL Server 的简单应用程序，可以跳过此任务。

  1. 需要SQL 数据库服务器来存储应用程序数据库。 可以在 Sql 数据库服务器 | 服务器的仪表板的 Windows Azure 管理门户中查看订阅中的SQL 数据库服务器。 | 如果没有创建服务器，可以使用命令栏上的“添加”按钮创建一个服务器。 记下 服务器名称和 URL、管理员登录名和密码，因为你将在下一个任务中使用它们。 尚未创建数据库，因为它将在后面的阶段创建。

    SQL 数据库服务器仪表板

    SQL 数据库服务器仪表板

  2. 在下一个任务中，你将测试 Visual Studio 中的数据库连接，因此需要在服务器的“允许 IP 地址” 列表中包括本地 IP 地址。 为此，请单击“配置”，选择当前客户端 IP 地址中的 IP 地址，并将其粘贴到“开始 IP 地址”和“结束 IP 地址”文本框中，然后单击add-client-ip-address-ok-button该按钮。

    添加客户端 IP 地址

    添加客户端 IP 地址

  3. 将客户端 IP 地址添加到允许的 IP 地址列表后，单击“保存”以确认更改。

    确认更改

    确认更改

任务 3 - 使用 Web 部署发布 ASP.NET MVC 4 应用程序

  1. 返回到 ASP.NET MVC 4 解决方案。 在解决方案资源管理器中，右键单击网站项目并选择“发布”。

    发布应用程序

    发布网站

  2. 导入在第一个任务中保存的发布配置文件。

    导入发布配置文件

    导入发布配置文件

  3. 单击“ 验证连接”。 验证完成后，单击“ 下一步”。

    注意

    在“验证连接”按钮旁边显示绿色复选标记后，验证将完成。

    验证连接

    验证连接

  4. 在“设置”页的“数据库”部分下，单击数据库连接文本框（即 DefaultConnection）旁边的按钮。

    Web 部署配置

    Web 部署配置

  5. 按如下所示配置数据库连接：

    • 在“服务器名称”中，使用 tcp： 前缀键入SQL 数据库服务器 URL。

    • 在 “用户名 ”中，键入服务器管理员登录名。

    • 在 “密码 ”中，键入服务器管理员登录密码。

    • 键入新的数据库名称，例如： MVC4SampleDB。

      配置目标连接字符串

      配置目标连接字符串

  6. 然后单击“确定” 。 当系统提示创建数据库时，单击“ 是”。

    创建数据库

    创建数据库

  7. 用于连接到 Windows Azure 中的SQL 数据库连接字符串显示在“默认连接”文本框中。 然后单击“下一步”。

    指向SQL 数据库的连接字符串

    指向SQL 数据库的连接字符串

  8. 在 “预览 ”页中，单击“ 发布”。

    发布 Web 应用程序

    发布 Web 应用程序

  9. 发布过程完成后，默认浏览器将打开已发布的网站。

    发布到 Windows Azure 的应用程序

    发布到 Windows Azure 的应用程序

附录 C：使用代码片段

使用代码片段时，只需用手指提示即可获取所有代码。 实验室文档将准确告诉你何时可以使用它们，如下图所示。

使用 Visual Studio 代码片段将代码插入项目中

使用 Visual Studio 代码片段将代码插入项目中

使用键盘添加代码片段（仅限 C#）

  1. 将光标置于要插入代码的位置。
  2. 开始键入代码段名称（不含空格或连字符）。
  3. 观看 IntelliSense 显示匹配的代码段名称。
  4. 选择正确的代码段（或在选择整个代码段名称之前继续键入）。
  5. 按 Tab 键两次在光标位置插入代码片段。

开始键入代码段名称

开始键入代码段名称

按 Tab 选择突出显示的代码片段

按 Tab 选择突出显示的代码片段

再次按 Tab，代码片段将展开

再次按 Tab，代码片段将展开

使用鼠标（C#、Visual Basic 和 XML） 1 添加代码片段。 右键单击要插入代码片段的位置。

  1. 选择“ 插入代码段 ”， 然后选择“我的代码片段”。
  2. 通过单击相关代码片段从列表中选择相关代码片段。

右键单击要插入代码片段的位置，然后选择“插入代码段”

右键单击要插入代码片段的位置，然后选择“插入代码段”

通过单击相关代码片段从列表中选择相关代码片段

通过单击相关代码片段从列表中选择相关代码片段