通过

ASP.NET MVC 4 的新增功能

  • 项目

由 Web Camp 团队

下载 Web Camp 培训工具包

ASP.NET MVC 4 是一个框架，用于使用成熟的设计模式和 ASP.NET 和 .NET 框架的强大功能构建可缩放、基于标准的 Web 应用程序。 此新版框架的第四个版本侧重于简化移动 Web 应用程序开发。

首先，在创建新的 ASP.NET MVC 4 项目时，现在有一个移动应用程序项目模板，可用于生成专用于移动设备的独立应用。 此外，ASP.NET MVC 4 通过 jQuery.Mobile.MVC NuGet 包与 jQuery Mobile 集成。 jQuery Mobile 是基于 HTML5 的框架，用于开发与所有常用移动设备平台（包括 Windows Phone、iPhone、Android 等）兼容的 Web 应用。 但是，如果需要专用化，ASP.NET MVC 4 还可以为不同设备提供不同的视图并提供特定于设备的优化。

在此实践实验室中，你将从 ASP.NET MVC 4“Internet 应用程序”项目模板开始创建照片库应用程序。 你将使用 jQuery Mobile 和 ASP.NET MVC 4 的新功能逐步增强应用，使其与不同的移动设备和桌面 Web 浏览器兼容。 你还将了解用于生成代码的新代码方案，以及 ASP.NET MVC 4 如何通过支持 Task<ActionResult> 返回类型更轻松地编写异步操作方法。

注意

所有示例代码和代码片段都包含在 Web Camp 培训工具包中，可在 Microsoft-Web/WebCampTrainingKit 版本获取。 特定于此实验室的项目在 ASP.NET 4.5 中的 Web 窗体中的新增功能中提供。

目标

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

  • 利用 ASP.NET MVC 项目模板的增强功能，包括新的移动应用程序项目模板
  • 使用 HTML5 视区属性和 CSS 媒体查询改进移动设备上的显示
  • 使用 jQuery Mobile 进行渐进式增强和生成触摸优化的 Web UI
  • 创建特定于移动的视图
  • 使用视图切换器组件在应用程序中的移动视图和桌面视图之间切换
  • 使用任务支持创建异步控制器

先决条件

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

安装

在整个实验文档中，将指示你插入代码块。 为方便起见，大部分代码都以 Visual Studio Code 代码片段的形式提供，可以从 Visual Studio 中使用，以避免手动添加它。

安装代码片段：

  1. 打开 Windows 资源管理器窗口并浏览到实验室的 Source\Setup 文件夹。
  2. 双击 此文件夹中的Setup.cmd 文件以安装 Visual Studio 代码片段。

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

练习

本动手实验包括以下练习：

  1. 新的 ASP.NET MVC 4 项目模板
  2. 创建照片库 Web 应用程序
  3. 添加对移动设备的支持
  4. 使用异步控制器

注意

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

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

练习 1：新的 ASP.NET MVC 4 项目模板

在本练习中，你将了解 ASP.NET MVC 4 项目模板中的增强功能。 除了 MVC 3 中已存在的 Internet 应用程序模板之外，此版本现在还包括适用于移动应用程序的单独模板。 首先，你将了解每个模板的一些相关功能。 然后，你将使用正确的方法在不同平台上正确呈现页面。

任务 1 - 探索 Internet 应用程序模板

  1. 打开“Visual Studio”。

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

    注意

    稍后将自定义正在创建的 PhotoGallery ASP.NET MVC 4 解决方案。

    创建新项目

    创建新项目

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

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

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

    注意

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

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

    新式模板

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

    ASP.NET MVC 4 restyled 模板

    ASP.NET MVC 4 restyled 模板

    “新建联系人”页

    “新建联系人”页

    自适应呈现

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

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

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

    使用 JavaScript 的更丰富的 UI

    默认项目模板的另一项增强功能是使用 JavaScript 提供更具交互性的 JavaScript。 模板中使用的登录和注册链接演示了如何使用 jQuery 验证来验证来自客户端的输入字段。

    jQuery 验证

    jQuery 验证

    注意

    请注意这两个登录部分，在第一部分中，可以使用站点中的已注册帐户登录，在第二节中，还可以使用其他身份验证服务（如 google）登录（默认情况下已禁用）。

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

  6. 打开位于App_Start文件夹下的文件AuthConfig.cs。

  7. 从最后一行中删除注释以注册 Google 客户端以进行 OAuth 身份验证。

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    注意

    请注意，可以使用任何 OpenID 或 OAuth 服务（如 Facebook、Twitter、Microsoft等）轻松启用身份验证。

  8. 按 F5 运行解决方案并导航到登录页。

  9. 选择要 登录的 Google 服务。

    选择登录服务

    选择登录服务

  10. 使用 Google 帐户登录。

  11. 允许网站（localhost）从 Google 帐户检索信息。

  12. 最后，您必须在网站中注册才能关联 Google 帐户。

关联 Google 帐户

关联 Google 帐户 13。关闭浏览器以停止调试器并返回到 Visual Studio。 14. 现在浏览解决方案，查看项目模板中 ASP.NET MVC 4 引入的一些其他新功能。

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

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

  • HTML 5 标记

    浏览模板视图以查找新的主题标记。

    使用 Razor 和 HTML5 标记 About.cshtml 的新模板。

    使用 Razor 和 HTML5 标记（About.cshtml）的新模板。

  • 更新了 JavaScript 库

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

    注意

    可以在以下链接中获取有关 KnockOutJS 库的详细信息：[http://learn.knockoutjs.com/]（http://learn.knockoutjs.com/）。 此外，还可以在 [http://docs.jquery.com/]（http://docs.jquery.com/） 中了解 jQuery 和 jQuery UI。

任务 2 - 探索移动应用程序模板

ASP.NET MVC 4 有助于为移动和平板电脑浏览器开发网站。 此模板的应用程序结构与 Internet 应用程序模板相同（请注意控制器代码几乎相同），但其样式已修改，以在基于触摸的移动设备中正确呈现。

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

  2. 在 “新建 ASP.NET MVC 4 项目 ”对话框中，选择 移动应用程序 项目模板，然后单击“ 确定”。 请确保已选择 Razor 作为视图引擎。

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

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

  3. 现在，你可以浏览解决方案并查看适用于移动设备的 ASP.NET MVC 4 解决方案模板引入的一些新功能：

    • jQuery 移动库

      移动应用程序项目模板包括 jQuery Mobile 库，它是用于移动浏览器兼容性的开放源代码库。 jQuery Mobile 对支持 CSS 和 JavaScript 的移动浏览器应用渐进式增强功能。 渐进式增强功能使所有浏览器都能显示网页的基本内容，而它只允许最强大的浏览器显示丰富的内容。 jQuery Mobile 样式中包含的 JavaScript 和 CSS 文件可帮助移动浏览器适应屏幕中的内容，而无需在页面标记中进行任何更改。

      jQuery-mobile-library-included-in-the-template

      模板中包含的 jQuery 移动库

    • 基于 HTML5 的标记

      Mobile-application-template-using-HTML5-markup

      使用 HTML5 标记的移动应用程序模板（Login.cshtml 和 index.cshtml）

  4. 按 F5 运行解决方案。

  5. 打开 Windows Phone 7 模拟器。

  6. 在手机开始屏幕中，打开 Internet Explorer。 查看桌面应用程序启动的 URL，然后从手机浏览到该 URL（例如 http://localhost:[PortNumber]/）。

  7. 现在，你可以输入登录页或查看关于页面。 请注意，网站的样式基于新的适用于移动设备的 Metro 应用。 ASP.NET MVC 4 项目模板在移动设备上正确显示，确保页面的所有元素都可见并已启用。 请注意，标头上的链接足够大，可以单击或点击。

    移动设备中的项目模板页

    移动设备中的项目模板页

  8. 新模板还使用 Viewport 元标记。 大多数移动浏览器定义虚拟浏览器窗口或“视区”的宽度，其宽度大于移动设备的实际宽度。 这使移动浏览器能够在虚拟显示器内显示整个网页。 Viewport 元标记允许 Web 开发人员在移动设备上设置浏览器区域的宽度、高度和比例。移动应用程序的 ASP.NET MVC 4 模板将布局模板（Views\Shared_Layout.cshtml）中的视区设置为设备宽度（“width=device-width”），以便所有页面的视区都设置为设备屏幕宽度。 请注意，Viewport 元标记不会更改默认浏览器视图。

  9. 打开位于 Views 中的 _Layout.cshtml |共享文件夹，并注释 Viewport 元标记。 运行应用程序（如果尚未打开），并查看差异。

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

注释视区元标记后的网站

注释视区元标记 10 后的网站。在 Visual Studio 中，按 SHIFT + F5 停止调试应用程序。 11. 取消注释视区元标记。

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

任务 3 - 使用自适应渲染

在此任务中，你将了解另一种方法，在移动设备和 Web 浏览器上正确呈现网页，而无需进行任何自定义。 你已将 Viewport 元标记与类似用途一起使用。 现在，你将遇到另一种功能强大的方法： 自适应渲染。

自适应呈现是一种使用 CSS3 媒体查询 自定义应用于页面的样式的技术。 媒体查询定义样式表中的条件，对特定条件下的 CSS 样式进行分组。 仅当条件为 true 时，样式才会应用于声明的对象。

自适应呈现技术提供的灵活性使任何自定义项都可用于在不同设备上显示站点。 可以在单个样式表上定义任意数量的样式，而无需编写逻辑代码来选择样式。 因此，它是一种非常整洁的调整页面样式的方式，因为它减少了重复的代码和逻辑的呈现目的。 另一方面，带宽消耗将增加，因为 CSS 文件的大小可能会略有增长。

通过使用自适应呈现技术，无论浏览器如何，网站都会 正确显示。 但是，应考虑带宽额外负载是否令人担忧。

注意

媒体查询的基本格式为：[范围： @media 所有 | 手持 | 打印 | 投影 | 屏幕] （[property：value] 和 ...[property：value]）

媒体查询示例： >@media所有和（最大宽度：1000px）和（最小宽度：700px） {}： 对于 700px 和 1000px 之间的所有分辨率。

@media屏幕和 （最小宽度： 400px） 和 （最大宽度： 700px） { ... }： 仅适用于屏幕。 分辨率必须介于 400 到 700px 之间。

@media手持和（最小宽度：20em），屏幕和（最小宽度： 20em） { ... }： 适用于手持设备（移动设备）和屏幕。 最小宽度必须大于 20em。

可以在 W3C 网站上找到有关此内容的详细信息。

现在，你将了解自适应呈现的工作原理，提高 ASP.NET MVC 4 默认网站模板的可读性。

  1. 打开 在任务 1 中创建的PhotoGallery.sln 解决方案，然后选择 PhotoGallery 项目。 按 F5 运行解决方案。

  2. 调整浏览器的宽度，将窗口设置为一半或小于其原始大小的四分之一。 请注意标题中的项发生的情况：某些元素不会显示在标题的可见区域中。

  3. 从 Visual Studio 解决方案资源管理器（位于内容项目文件夹中）打开Site.css文件。 按 Ctrl + F 打开 Visual Studio 集成搜索，并写入 @media 以查找 CSS 媒体查询。

    在此模板中定义的媒体查询条件以这种方式工作：当浏览器的窗口大小低于 850 像素时，应用的 CSS 规则是在此媒体块中定义的规则。

    查找媒体查询

    查找媒体查询

  4. 将 850 像素中设置的最大宽度属性值替换为 10px，以禁用自适应呈现，然后按 Ctrl + S 保存更改。 返回到浏览器，然后按 Ctrl + F5 刷新页面，其中包含所做的更改。 请注意调整窗口宽度时这两个页面的差异。

    页面正在应用 <span 类=@media 左侧和右侧的样式，省略样式“title=”在左侧，页面应用@media样式，在右侧，省略样式“/>

    在左侧，页面应用 @media 样式，在右侧省略样式

    现在，让我们看看移动设备上会发生什么：

    在左侧，页面应用 <span 类=@media样式，在右侧省略样式“title=”在左侧，页面应用@media样式，在右侧，省略样式“/>

    在左侧，页面应用 @media 样式，在右侧省略样式

    虽然你会注意到在 Web 浏览器中呈现页面时所做的更改并不十分重要，但在使用移动设备时，差异变得更加明显。 在图像左侧，可以看到自定义样式提高了可读性。

    自适应呈现可在更多方案中使用，以便更轻松地将条件样式应用于网站，并使用整洁的方法解决常见样式问题。

    Viewport 元标记和 CSS 媒体查询不特定于 ASP.NET MVC 4，因此可以在任何 Web 应用程序中利用这些功能。

  5. 在 Visual Studio 中，按 SHIFT + F5 停止调试应用程序。

在本练习中，你将使用照片库应用程序来显示照片。 你将从 ASP.NET MVC 4 项目模板开始，然后添加一项功能以从服务中检索照片，并在主页中显示它们。

在以下练习中，你将更新此解决方案以增强它在移动设备上显示的方式。

任务 1 - 创建模拟照片服务

在此任务中，你将创建照片服务的模拟，以检索将在库中显示的内容。 为此，你将添加一个新控制器，它只需返回包含每个照片数据的 JSON 文件。

  1. 打开 Visual Studio（如果尚未打开）。

  2. 选择文件 |新建 |项目菜单命令。 在 “新建项目 ”对话框中，选择 Visual C# |左窗格树上的 Web 模板，然后选择 ASP.NET MVC 4 Web 应用程序。 将项目 命名为 PhotoGallery，选择一个位置（或保留默认值），然后单击“ 确定”。 或者，可以从练习 1 中的现有 ASP.NET MVC 4 Internet 应用程序解决方案继续工作，并跳过下一步。

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

  4. 在解决方案资源管理器中，右键单击项目的App_Data文件夹，然后选择“添加” |现有项。 浏览到此实验室的 Source\Assets\App_Data 文件夹，并添加 Photos.json 文件。

  5. 使用名称 PhotoController 创建新控制器。 为此，请 右键单击“控制器 ”文件夹，转到 “添加 ”并选择“ 控制器”。 完成控制器名称，保留 空 MVC 控制器 模板，然后单击“ 添加”。

    添加 PhotoController

    添加 PhotoController

  6. 将 Index 方法替换为以下 库 操作，并返回最近添加到项目的 JSON 文件中的内容。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex02 - 库操作）

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. 按 F5 运行解决方案，然后浏览到以下 URL 以测试模拟的照片服务： http://localhost:[port]/photo/gallery （[端口] 值取决于应用程序启动的当前端口）。 对此 URL 的请求应检索Photos.json文件的内容。

    测试模拟照片服务

    测试模拟照片服务

在实际实现中，可以使用 ASP.NET Web API 来实现照片库服务。 ASP.NET Web API 是一种框架，用于轻松构建可以访问多种客户端（包括浏览器和移动设备）的 HTTP 服务。 ASP.NET Web API 是用于在 .NET Framework 上生成 RESTful 应用程序的理想平台。

任务 2 - 显示照片库

在此任务中，你将使用在本练习的第一个任务中创建的模拟服务更新主页以显示照片库。 你将添加模型文件并更新库视图。

  1. 在 Visual Studio 中，按 SHIFT + F5 停止调试应用程序。

  2. 在 Models 文件夹中创建 Photo 类。 为此，请 右键单击 Models 文件夹，选择“ 添加 ”并单击“ 类”。 然后，将名称设置为 Photo.cs 并单击“ 添加”。

  3. 将以下成员添加到 Photo 类。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex02 - 照片模型）

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. 从“控制器”文件夹打开 HomeController.cs 文件。

  5. 添加下面的 using 语句。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex02 - HomeController Usings）

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. 更新索引操作以使用 HttpClient 检索库数据，然后使用 JavaScriptSerializer 将其反序列化为视图模型。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex02 - 索引操作）

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. 打开位于 Views\Home 文件夹下的 Index.cshtml 文件，并将所有内容替换为以下代码。

    此代码遍历从服务检索到的所有照片，并将其显示在无序列表中。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex02 - 照片列表）

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. 在解决方案资源管理器中，右键单击项目的“内容”文件夹，然后选择“添加” |现有项。 浏览到 此实验室的 Source\Assets\Content 文件夹，并添加 Site.css 文件。 必须确认其替换。 如果打开 Site.css 文件，则还必须确认重新加载该文件。

  9. 打开文件资源管理器，并将位于此实验室的 Source\Assets 文件夹下的整个“照片”文件夹复制到解决方案资源管理器中项目的根文件夹。

  10. 运行该应用程序。 现在应会看到主页，其中显示了库中的照片。

    照片库

    照片库

  11. 在 Visual Studio 中，按 SHIFT + F5 停止调试应用程序。

练习 3：添加对移动设备的支持

ASP.NET MVC 4 中的关键更新之一是支持移动开发。 在本练习中，你将通过扩展在上一练习中创建的 PhotoGallery 解决方案来探索移动应用程序的 ASP.NET MVC 4 新功能。

任务 1 - 在 ASP.NET MVC 4 应用程序中安装 jQuery Mobile

  1. 打开位于 Source/Ex3-MobileSupport/Begin/ 文件夹的 Begin 解决方案。 否则，可以继续使用 通过完成上一练习获得的 End 解决方案。

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

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

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

      注意

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

  2. 单击“工具>NuGet 程序包管理器>程序包管理器控制台”菜单选项，打开程序包管理器控制台。

    打开 NuGet 程序包管理器 控制台

    打开 NuGet 程序包管理器 控制台

  3. 在程序包管理器控制台中，运行以下命令以安装 jQuery.Mobile.MVC 包。

    jQuery Mobile 是一个用于生成触摸优化 Web UI 的开放源代码库。 jQuery.Mobile.MVC NuGet 包包括将 jQuery Mobile 与 ASP.NET MVC 4 应用程序配合使用的帮助程序。

    注意

    通过运行以下命令，将从 Nuget 下载 jQuery.Mobile.MVC 库。

    PM

    Install-Package jQuery.Mobile.MVC

    此命令安装 jQuery Mobile 和一些帮助程序文件，包括以下内容：

    • Views/Shared/_Layout.Mobile.cshtml：是针对较小屏幕优化的基于 jQuery Mobile 的布局。 当网站从移动浏览器收到请求时，它将用此布局替换原始布局（_Layout.cshtml）。

    • 视图切换器组件：由 Views/Shared/_ViewSwitcher.cshtml 分部视图和 ViewSwitcherController.cs 控制器组成。 此组件将在移动浏览器上显示一个链接，使用户能够切换到页面的桌面版本。
      具有移动支持的照片库项目

      具有移动支持的照片库项目

  4. 注册移动捆绑包。 为此，请打开 Global.asax.cs 文件并添加以下行。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex03 - 注册移动捆绑包）

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. 使用桌面 Web 浏览器运行应用程序。

  6. 打开位于“开始”菜单中的 Windows Phone 7 仿真器 |所有程序 |Windows Phone SDK 7.1 |Windows Phone 模拟器。

  7. 在手机开始屏幕中，打开 Internet Explorer。 查看应用程序启动位置的 URL，并使用手机浏览器（例如 http://localhost:[PortNumber]/）浏览到该 URL。

    你会注意到，应用程序在 Windows Phone 模拟器中看起来会有所不同，因为 jQuery.Mobile.MVC 已在项目中创建新资产，显示针对移动设备优化的视图。

    请注意手机顶部的消息，其中显示了切换到桌面视图的链接。 此外， 由安装的包创建的 _Layout.Mobile.cshtml 布局包括应用程序中的其他布局。

    注意

    到目前为止，没有可返回到移动视图的链接。 它将包含在更高版本中。

    照片库主页的移动视图

    照片库主页的移动视图

  8. 在 Visual Studio 中，按 SHIFT + F5 停止调试应用程序。

任务 2 - 创建移动视图

在此任务中，你将创建索引视图的移动版本，该视图的内容经过调整，以便更好地在移动设备中的外观。

  1. 复制 Views\Home\Index.cshtml 视图并将其粘贴以创建副本，将新文件重命名为 Index.Mobile.cshtml。

  2. 打开新创建的 Index.Mobile.cshtml 视图，并将现有的 <ul> 标记替换为此代码。 通过执行此操作，你将使用 jQuery Mobile 数据注释更新 <ul> 标记，以使用 jQuery 中的移动主题。

    <ul data-role="listview" data-inset="true" data-filter="true">

    注意

    请注意：

    • 设置为 listview 的数据角色属性将使用 listview 样式呈现列表。

    • 设置为 true 的数据集 属性将显示带有圆角和边距的列表。

    • 设置为 true 的数据筛选器属性将生成搜索框。

    可以在项目文档中了解有关 jQuery Mobile 约定的详细信息：[https://demos.jquerymobile.com/1.1.1/]（https://demos.jquerymobile.com/1.1.1/）

  3. 按 Ctrl + S 保存更改。

  4. 切换到 Windows Phone 模拟器 并刷新站点。 请注意库列表的新外观，以及位于顶部的新搜索框。 然后，在搜索框中键入一个单词（例如 ，郁金香），以在照片库中开始搜索。

    使用 listview 样式筛选的库

    使用 listview 样式筛选的库

    总之，你已使用视图动员器食谱创建索引视图的副本，并带有“移动”后缀。 此后缀指示 ASP.NET MVC 4，从移动设备生成的每个请求都将使用此索引副本。 此外，你更新了索引视图的移动版本，以使用 jQuery Mobile 增强移动设备中的站点外观。

  5. 返回到 Visual Studio，打开位于“内容”文件夹下的Site.Mobile.css。

  6. 修复照片标题的位置，使其显示在图像右侧。 为此，请将以下代码添加到 Site.Mobile.css 文件。

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. 按 Ctrl + S 保存更改。

  8. 切换回 Windows Phone 模拟器 并刷新站点。 请注意，照片标题现已正确定位。

    位于图像右侧的标题

    位于图像右侧的标题

任务 3 - jQuery 移动主题

jQuery Mobile 中的每个布局和小组件都围绕一个新的面向对象的 CSS 框架进行设计，使它可以向网站和应用程序应用完整的统一视觉设计主题。

jQuery Mobile 的默认主题包含 5 个表，这些手表是给定字母（a、b、c、d、e）以供快速参考。

在此任务中，你将更新移动布局，以使用与默认值不同的主题。

  1. 切换回 Visual Studio。

  2. 打开 Views\Shared 中的 _Layout.Mobile.cshtml 文件。

  3. 查找数据角色设置为“page”的 div 元素，并将 数据主题 更新为“e”。

    <div data-role="page" data-theme="e">

  4. 按 Ctrl + S 保存更改。

  5. 在 Windows Phone 模拟器中刷新站点并注意到新的配色方案。

    具有不同配色方案的移动布局

    具有不同配色方案的移动布局

任务 4 - 使用视图切换器组件和浏览器重写功能

移动优化网页的约定是添加一个链接，其文本类似于桌面视图或完全网站模式，允许用户切换到页面的桌面版本。 jQuery.Mobile.MVC 包包含用于_Layout.Mobile.cshtml 视图的示例视图切换器组件。

切换到桌面视图的链接

切换到桌面视图的链接

视图切换器使用名为 “浏览器重写”的新功能。 此功能允许应用程序将请求视为来自不同浏览器（用户代理）的请求，而不是他们实际来自的请求。

在此任务中，你将了解 jQuery.Mobile.MVC 添加的视图切换器的示例实现，以及 ASP.NET MVC 4 中重写功能的新浏览器。

  1. 切换回 Visual Studio。

  2. 打开位于 Views\Shared 文件夹下的 _Layout.Mobile.cshtml 视图，注意作为部分视图引用的视图切换器组件。

    使用 View-Switcher 组件的移动布局

    使用 View-Switcher 组件的移动布局

  3. 打开 _ViewSwitcher.cshtml 分部视图。

    分部视图使用新方法 ViewContext.HttpContext.GetOverriddenBrowser（） 来确定 Web 请求的源，并显示要切换到桌面视图或移动视图的相应链接。

    GetOverriddenBrowser 方法返回一个 HttpBrowserCapabilitiesBase 实例，该实例对应于当前为请求设置的用户代理（实际或重写）。 可以使用此值获取 IsMobileDevice 等属性。

    ViewSwitcher 部分视图

    ViewSwitcher 部分视图

  4. 打开位于 Controllers 文件夹中的 ViewSwitcherController.cs 类。 查看 ViewSwitcher 组件中的链接调用 SwitchView 操作，并注意新的 HttpContext 方法。

    • HttpContext.ClearOverriddenBrowser（） 方法删除当前请求的任何重写用户代理。

    • HttpContext.SetOverriddenBrowser（） 方法使用指定的用户代理替代请求的实际用户代理值。
      ViewSwitcher 控制器
      ViewSwitcher 控制器

      浏览器重写是 ASP.NET MVC 4 的核心功能，即使未安装 jQuery.Mobile.MVC 包，也可用。 但是，此功能仅影响视图、布局和部分视图，并且不会影响依赖于 Request.Browser 对象的任何功能。

任务 5 - 在桌面视图中添加视图切换器

在此任务中，你将更新桌面布局以包含视图切换器。 这将允许移动用户在浏览桌面视图时返回到移动视图。

  1. 在 Windows Phone 模拟器中刷新站点。

  2. 单击库顶部的“桌面视图”链接。 请注意，桌面视图中没有视图切换器，可让你返回到移动视图。

  3. 返回到 Visual Studio 并打开 _Layout.cshtml 视图。

  4. 找到登录节并插入调用，以呈现_LogOnPartial部分视图下方_ViewSwitcher部分视图。 然后按 Ctrl + S 保存更改。

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. 按 Ctrl + S 保存更改。

  6. 刷新 Windows Phone 模拟器中的页面，然后双击屏幕放大。 请注意，主页现在显示从移动视图切换到桌面视图的 移动视图 链接。

    在桌面视图中呈现的视图切换器

    在桌面视图中呈现的视图切换器

  7. 再次切换到移动视图并浏览到 “关于 ”页面（http://localhost[端口]/主页/关于）。 请注意，即使尚未创建 About.Mobile.cshtml 视图，“关于”页面也会使用移动布局（_Layout.Mobile.cshtml）显示。

    “关于”页面

    “关于”页

  8. 最后，在桌面 Web 浏览器中打开该网站。 请注意，以前的任何更新都不会影响桌面视图。

    PhotoGallery 桌面视图

    PhotoGallery 桌面视图

任务 6 - 创建新的显示模式

新的显示模式功能允许应用程序根据生成请求的浏览器选择视图。 例如，如果桌面浏览器请求主页，应用程序将返回 Views\Home\Index.cshtml 模板。 然后，如果移动浏览器请求主页，应用程序将返回 Views\Home\Index.mobile.cshtml 模板。

在此任务中，你将为 iPhone 设备创建自定义布局，并且必须模拟来自 iPhone 设备的请求。 为此，可以使用 iPhone 仿真器/模拟器（如 电动移动模拟器）或具有修改用户代理的加载项的浏览器。 有关如何在 Safari 浏览器中设置用户代理字符串以模拟 iPhone 的说明，请参阅 如何在 David Alison 的博客中让 Safari 假装它是 IE 。

请注意，此任务是可选的，你可以在整个实验室中继续，而无需执行它。

  1. 在 Visual Studio 中，按 SHIFT + F5 停止调试应用程序。

  2. 打开 Global.asax.cs 并添加以下 using 语句。

    using System.Web.WebPages;

  3. 将以下突出显示的代码添加到Application_Start方法中。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex03 - iPhone DisplayMode）

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

已在静态 DisplayModeProvider.Instance.Modes 静态列表中注册名为“iPhone”的新 DefaultDisplayMode，该列表将与每个传入请求匹配。 如果传入请求包含字符串“iPhone”，ASP.NET MVC 将找到名称包含“iPhone”后缀的视图。 0 参数指示新模式的具体程度;例如，此视图比与移动设备请求匹配的常规“.mobile”规则更具体。

运行此代码后，当 iPhone 浏览器生成请求时，应用程序将使用 Views\Shared\_Layout.iPhone.cshtml 布局，将在后续步骤中创建。

注意

为了演示目的简化了 iPhone 请求的测试方式，对于每个 iPhone 用户代理字符串（例如测试区分大小写），可能无法按预期工作。

  1. 在 Views\Shared 文件夹中创建 _Layout.Mobile.cshtml 文件的副本，并将副本重命名为“_Layout.iPhone.cshtml”。
  2. 打开 在上一步中创建的 _Layout.iPhone.cshtml 。
  3. 查找 data-role 属性设置为页面并将数据主题属性更改为“a”的 div 元素。
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

现在，ASP.NET MVC 4 应用程序中有 3 个布局：

  1. _Layout.cshtml：用于桌面浏览器的默认布局。

  2. _Layout.mobile.cshtml：用于移动设备的默认布局。

  3. _Layout.iPhone.cshtml：iPhone 设备的特定布局，使用不同的配色方案来区分 _Layout.mobile.cshtml。

  4. 按 F5 运行应用程序并在 Windows Phone 模拟器中浏览站点。

  5. 打开 iPhone 模拟器（请参阅附录 C，获取有关如何安装和配置 iPhone 模拟器的说明），并浏览到站点。 请注意，每个手机都使用特定模板。

    using-different-views-for-each-mobile-device2

    为每个移动设备使用不同的视图

练习 4：使用异步控制器

Microsoft .NET Framework 4.5 引入了 C# 和 Visual Basic 中的新语言功能，为 .NET 编程中的异步提供新的基础。 这个新基础使异步编程与同步编程类似（与同步编程一样简单）。 现在可以使用 AsyncController 类在 ASP.NET MVC 4 中编写异步操作方法。 可以对长时间运行的非 CPU 绑定请求使用异步操作方法。 这可以避免在处理请求时阻止 Web 服务器执行工作。 AsyncController 类通常用于长时间运行的 Web 服务调用。

本练习介绍了 ASP.NET MVC 4 中异步操作的基础知识。 如果需要更深入的探讨，可查看以下文章：[https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx]（https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx）

任务 1 - 实现异步控制器

  1. 打开位于 Source/Ex4-Async/Begin/ 文件夹的 Begin 解决方案。 否则，可以继续使用 通过完成上一练习获得的 End 解决方案。

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

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

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

      注意

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

  2. 从 Controllers 文件夹中打开HomeController.cs类。

  3. 添加以下 using 语句。

    using System.Threading.Tasks;

  4. 更新 HomeController 类以从 AsyncController 继承。 从 AsyncController 派生的控制器使 ASP.NET 能够处理异步请求，并且它们仍然可以为同步操作方法提供服务。

    public class HomeController : AsyncController
{

  5. 将异步关键字添加到 Index 方法，并使其返回 Task<ActionResult> 类型。

    public async Task<ActionResult> Index()
{
    ...

    注意

    异步关键字是 .NET Framework 4.5 提供的新关键字之一;它告知编译器此方法包含异步代码。 Task 对象表示可能在将来某个时间点完成的异步操作。

  6. 替换客户端。GetAsync（） 使用 await 关键字使用完整异步版本进行调用，如下所示。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex04 - GetAsync）

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    注意

    在以前的版本中，你正在使用 Task 对象中的 Result 属性来阻止线程，直到返回结果（同步版本）。

    添加 await 关键字会告知编译器异步等待从方法调用返回的任务。 这意味着，只有在等待的方法完成之后，代码的其余部分才会作为回调执行。 另一个需要注意的是，你不需要更改 try-catch 块才能执行此操作：后台或前台发生的异常仍会捕获，而无需使用框架提供的处理程序执行任何额外的工作。

  7. 通过将行替换为新代码，更改代码以继续执行异步实现，如下所示

    （代码片段 - ASP.NET MVC 4 实验室 - Ex04 - ReadAsStringAsync）

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. 运行该应用程序。 不会发现任何重大更改，但代码不会阻止线程池中的线程，从而更好地利用服务器资源并提高性能。

    注意

    可以在 Visual Studio 培训工具包中包含的实验室“使用 C# 和 Visual Basic 进行 .NET 4.5 异步编程”中了解有关新的异步编程功能的详细信息。

任务 2 - 使用取消令牌处理超时

返回 Task 实例的异步操作方法还可以支持超时。 在此任务中，你将更新 Index 方法代码，以使用取消令牌处理超时方案。

  1. 返回到 Visual Studio，然后按 Shift + F5 停止调试。

  2. 将以下 using 语句添加到 HomeController.cs 文件。

    using System.Threading;

  3. 更新 Index 操作以接收 CancellationToken 参数。

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. 更新 GetAsync 调用以传递取消令牌。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex04 - SendAsync with CancellationToken）

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. 使用 AsyncTimeout 属性设置为 500 毫秒的 Index 方法进行修饰，并将 HandleError 属性配置为通过重定向到 TimedOut 视图来处理 TaskCanceledException。

    （代码片段 - ASP.NET MVC 4 实验室 - Ex04 - 属性）

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. 打开 PhotoController 类并更新库方法以延迟执行 1000 毫秒（1 秒）以模拟长时间运行的任务。

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. 打开 Web.config 文件并通过添加以下元素来启用自定义错误。

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. 在 Views\Shared 命名的 TimedOut 中创建一个新视图，并使用默认布局。 在解决方案资源管理器中，右键单击 Views\Shared 文件夹，然后选择“添加” |视图。

    为每个移动设备使用不同的视图

    为每个移动设备使用不同的视图

  9. 更新 TimedOut 视图内容，如下所示。

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. 运行应用程序并导航到根 URL。 添加的 Thread.Sleep 为 1000 毫秒时，将收到超时错误，由 AsyncTimeout 属性生成并捕获 HandleError 属性。

    已处理的超时异常

    已处理的超时异常

注意

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

总结

在此实践实验室中，你观察到了 ASP.NET MVC 4 中的一些新功能。 已讨论以下概念：

  • 利用 ASP.NET MVC 项目模板的增强功能，包括新的移动应用程序项目模板
  • 使用 HTML5 视区属性和 CSS 媒体查询改进移动设备上的显示
  • 使用 jQuery Mobile 进行渐进式增强和生成触摸优化的 Web UI
  • 创建特定于移动的视图
  • 使用视图切换器组件在应用程序中的移动视图和桌面视图之间切换
  • 使用任务支持创建异步控制器

附录 A：使用代码片段

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

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

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

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

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

开始键入代码段名称

开始键入代码段名称

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

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

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

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

使用鼠标添加代码片段（C#、Visual Basic 和 XML）

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

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

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

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

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

附录 B：安装 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 磁贴

附录 C：安装 WebMatrix 2 和 iPhone 模拟器

若要在模拟的 iPhone 设备中运行站点，可以使用 WebMatrix 扩展“适用于 iPhone 的电动移动模拟器”。 此外，还可以将同一扩展配置为从 Visual Studio 2012 运行模拟器。

任务 1 - 安装 WebMatrix 2

  1. 转到 [/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169]（/iis/extensions/introduction-to-iis-express/iis-express-overview？linkid=9810169）。 或者，如果已安装 Web 平台安装程序，则可以打开它并搜索产品“WebMatrix 2”。

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

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

    安装 WebMatrix 2

    安装 WebMatrix 2

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

    接受许可条款

    接受许可条款

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

    安装进度

    安装进度

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

    安装已完成

    安装已完成

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

任务 2 - 安装 iPhone 模拟器扩展

  1. 运行 WebMatrix 并打开任何现有网站或创建新的网站。

  2. 单击“开始”功能区中的“运行”按钮，然后选择“添加新”。

    添加新的 WebMatrix 扩展

    添加新的 WebMatrix 扩展

  3. 选择 iPhone 模拟器 ，然后单击“ 安装”。

    浏览 WebMatrix 扩展

    浏览 WebMatrix 扩展

  4. 在包详细信息中，单击“安装”以继续安装扩展。

    iPhone 模拟器扩展

    iPhone 模拟器扩展

  5. 读取并接受扩展 EULA。

    WebMatrix 扩展 EULA

    WebMatrix 扩展 EULA

  6. 现在，可以使用 iPhone 模拟器选项从 WebMatrix 运行网站。

    使用 iPhone 运行

    使用 iPhone 运行

任务 3 - 配置 Visual Studio 2012 以运行 iPhone 模拟器

  1. 打开 Visual Studio 2012 并打开任何网站或创建新项目。

  2. 单击“运行”按钮中的向下箭头，然后选择“浏览”。

    使用

    使用

  3. 在“浏览使用”对话框中，单击“ 添加”。

  4. 在“添加程序”对话框中，使用以下值：

    • 程序：C：\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe （相应地更新路径）

    • 参数：“1”

    • 友好名称：iPhone 模拟器

      添加程序

      添加要浏览的程序

  5. 单击“确定”并关闭对话框。

  6. 现在，可以从 Visual Studio 2012 在 iPhone 模拟器中运行 Web 应用程序。

    使用 iPhone 模拟器浏览

    使用 iPhone 模拟器浏览

附录 D：使用 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 的应用程序