动手实验：One ASP.NET：集 ASP.NET Web 窗体、MVC 和 Web API 于一身

项目
07/13/2023

ASP.NET 是一个框架，用于使用 MVC、Web API 等专业技术生成网站、应用和服务。随着 ASP.NET 自创建以来的扩大，并表示需要整合这些技术，最近在努力实现 一个 ASP.NET。

Visual Studio 2013引入了一个新的统一项目系统，使你可以生成应用程序并在一个项目中使用所有 ASP.NET 技术。此功能无需在项目开始时选择一种技术并坚持使用，而是鼓励在一个项目中使用多个 ASP.NET 框架。

所有示例代码和代码片段都包含在 Web Camp 培训工具包中，可在上 https://aka.ms/webcamps-training-kit获取。

概述

目标

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

基于 One ASP.NET 项目类型创建网站
在同一项目中使用不同的 ASP.NET 框架，如 MVC 和 Web API
标识 ASP.NET 应用程序的main组件
利用 ASP.NET 基架 框架自动创建控制器和视图，以基于模型类执行 CRUD 操作
使用适合每个作业的工具以计算机和人类可读的格式公开同一组信息

先决条件

完成本动手实验需要以下各项：

Visual Studio Express 2013 网页版或更高版本
Visual Studio 2013 Update 1

设置

若要在此动手实验室中运行练习，需要先设置环境。

打开 Windows 资源管理器并浏览到实验室的 “源 ”文件夹。
右键单击 “Setup.cmd ”，然后选择“ 以管理员身份运行” ，启动将配置环境的安装过程，并安装此实验室的 Visual Studio 代码片段。
如果显示“用户帐户控制”对话框，请确认操作以继续。

注意

确保在运行安装过程之前，您已检查本实验的所有依赖项。

使用代码段

在整个实验文档中，将指示您插入代码块。为方便起见，此代码的大部分作为Visual Studio Code代码段提供，你可以从Visual Studio 2013内部访问这些代码片段，以避免手动添加代码段。

注意

每个练习都附带一个起始解决方案，该解决方案位于练习的 Begin 文件夹中，使你能够独立于其他练习跟踪每个练习。请注意，在练习期间添加的代码片段在这些起始解决方案中缺失，在完成练习之前可能无法正常工作。在练习的源代码中，还可以找到一个 End 文件夹，其中包含 Visual Studio 解决方案，其中包含完成相应练习中的步骤后产生的代码。如果您在演练本动手实验时需要其他帮助，则可以使用这些解决方案作为指南。

练习

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

创建新的Web Forms项目
使用基架创建 MVC 控制器
使用基架创建 Web API 控制器

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

注意

首次启动 Visual Studio 时，必须选择一个预定义的设置集合。每个预定义集合都设计为匹配特定的开发样式，并确定窗口布局、编辑器行为、IntelliSense 代码片段和对话框选项。本实验室中的过程描述了在使用 “常规开发设置” 集合时，在 Visual Studio 中完成给定任务所需的操作。如果为开发环境选择不同的设置集合，则应考虑的步骤可能存在差异。

练习 1：创建新的Web Forms项目

在本练习中，你将使用 One ASP.NET 统一项目体验在 Visual Studio 2013 中创建一个新的Web Forms网站，这样就可以在同一应用程序中轻松集成Web Forms、MVC 和 Web API 组件。然后，你将浏览生成的解决方案并识别其部件，最后将看到网站在运行中。

任务 1 - 使用一 ASP.NET 体验创建新网站

在此任务中，你将基于 One ASP.NET 项目类型开始在 Visual Studio 中创建新网站。 一个 ASP.NET 统一所有 ASP.NET 技术，并提供根据需要混合和匹配它们的选项。然后，你将识别应用程序中并行运行的Web Forms、MVC 和 Web API 的不同组件。

打开 Visual Studio Express 2013 for Web，然后选择“文件” |新建项目...以启动新解决方案。

创建新项目
在“新建项目”对话框中，在 Visual C# 下选择 ASP.NET Web 应用程序|“Web”选项卡，并确保选择了“.NET Framework 4.5”。将项目命名为 “MyHybridSite”，选择“ 位置 ”并单击“ 确定”。

创建新的 ASP.NET Web 应用程序项目
在“新建 ASP.NET 项目”对话框中，选择Web Forms模板，然后选择 MVC 和 Web API 选项。此外，请确保将 “身份验证 ”选项设置为 “个人用户帐户”。单击 “确定” 继续。

使用Web Forms模板创建新项目，包括 Web API 和 MVC 组件
现在可以浏览生成的解决方案的结构。

探索生成的解决方案
1. 帐户： 此文件夹包含用于注册、登录和管理应用程序的用户帐户的 Web 窗体页面。在配置Web Forms项目模板期间选择“个人用户帐户身份验证”选项时，将添加此文件夹。
2. 模型： 此文件夹将包含表示应用程序数据的类。
3. 控制器和视图：ASP.NET MVC 和 ASP.NET Web API组件需要这些文件夹。你将在下一个练习中探索 MVC 和 Web API 技术。
4. Default.aspx、Contact.aspx 和 About.aspx 文件是预定义的 Web 窗体页，可以将其用作生成特定于应用程序的页面的起点。这些文件的编程逻辑驻留在称为“代码隐藏”文件的单独文件中，该文件具有“.aspx.vb”或“.aspx.cs”扩展名 (，具体取决于) 使用的语言。代码隐藏逻辑在服务器上运行，并动态生成页面的 HTML 输出。
5. Site.Master 和 Site.Mobile.Master 页面定义应用程序中所有页面的外观和标准行为。
双击 Default.aspx 文件以浏览页面的内容。

浏览 Default.aspx 页

注意

文件顶部的 Page 指令定义Web Forms页的属性。例如， MasterPageFile 属性指定母版页的路径（在本例中为 Site.Master 页）， Inherits 属性定义要继承的页面的代码隐藏类。此类位于 CodeBehind 属性确定的文件中。

asp：Content 控件保存页面的实际内容 (文本、标记和控件) ，并映射到母版页上的 asp：ContentPlaceHolder 控件。在这种情况下，页面内容将在 Site.Master 页中定义的 MainContent 控件内呈现。
展开 App_Start 文件夹，注意 WebApiConfig.cs 文件。 Visual Studio 将该文件包含在生成的解决方案中，因为你在使用 One ASP.NET 模板配置项目时包含了 Web API。

打开 WebApiConfig.cs 文件。在 WebApiConfig 类中，可以找到与 Web API 关联的配置，该配置将 HTTP 路由映射到 Web API 控制器。

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
}

打开 RouteConfig.cs 文件。在 RegisterRoutes 方法中，可以找到与 MVC 关联的配置，该配置将 HTTP 路由映射到 MVC 控制器。

public static void RegisterRoutes(RouteCollection routes)
{
    var settings = new FriendlyUrlSettings();
    settings.AutoRedirectMode = RedirectMode.Permanent;
    routes.EnableFriendlyUrls(settings);

    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { action = "Index", id = UrlParameter.Optional }
        );
}

任务 2 - 运行解决方案

在此任务中，你将运行生成的解决方案，探索应用及其一些功能，例如 URL 重写和内置身份验证。

若要运行解决方案，请按 F5 或单击工具栏上的 “开始” 按钮。应用程序主页应在浏览器中打开。
验证是否正在调用Web Forms页。为此，请将 /contact.aspx 追加到地址栏中的 URL，然后按 Enter。

友好 URL

注意

如你所看到的，URL 将更改为 /contact。从 ASP.NET 4 开始，URL 路由功能已添加到 Web Forms，因此你可以编写类似http://www.mysite.com/products/software而不是的 http://www.mysite.com/products.aspx?category=softwareURL。有关详细信息，请参阅 URL 路由。
现在，你将探索集成到应用程序中的身份验证流。为此，请单击页面右上角的“ 注册 ”。

注册新用户
在 “注册 ”页中，输入 “用户名 ”和“ 密码”，然后单击“ 注册”。

注册页
应用程序注册新帐户，并且对用户进行身份验证。

用户已经过身份验证
返回 Visual Studio 并按 SHIFT + F5 停止调试。

练习 2：使用基架创建 MVC 控制器

在本练习中，你将利用 Visual Studio 提供的 ASP.NET 基架框架创建具有操作和 Razor 视图的 ASP.NET MVC 5 控制器，以执行 CRUD 操作，而无需编写一行代码。基架过程将使用 Entity Framework Code First 在 SQL 数据库中生成数据上下文和数据库架构。

关于实体框架代码优先

Entity Framework (EF) 是一种对象关系映射器 (ORM) ，使你能够通过使用概念应用程序模型编程来创建数据访问应用程序，而不是直接使用关系存储架构进行编程。

使用 Entity Framework Code First 建模工作流，可以使用自己的域类来表示 EF 在执行查询、更改跟踪和更新函数时所依赖的模型。使用 Code First 开发工作流，无需通过创建数据库或指定架构来启动应用程序。相反，可以编写标准 .NET 类，为应用程序定义最合适的域模型对象，实体框架将为你创建数据库。

注意

可在此处了解有关实体框架的详细信息。

任务 1 - 创建新模型

现在，你将定义 一个 Person 类，该类将是基架进程用于创建 MVC 控制器和视图的模型。首先创建 Person 模型类，控制器中的 CRUD 操作将使用基架功能自动创建。

打开 Visual Studio Express 2013 for Web 和 MyHybridSite.sln 解决方案，该解决方案位于 Source/Ex2-MvcScaffolding/Begin 文件夹中。或者，可以继续使用在上一练习中获取的解决方案。
在“解决方案资源管理器”中，右键单击 MyHybridSite 项目的 Models 文件夹，然后选择“添加| 类...”。

添加 Person 模型类
在“ 添加新项 ”对话框中，将文件命名为 Person.cs ，然后单击“ 添加”。

创建 Person 模型类

将 Person.cs 文件的内容替换为以下代码。按 Ctrl + S 保存更改。

(代码片段 - BringingTogetherOneAspNet - Ex2 - PersonClass)

namespace MyHybridSite.Models
{
    public class Person
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }
    }
}

在“解决方案资源管理器”中，右键单击“MyHybridSite”项目并选择“生成”，或按 Ctrl + SHIFT + B 生成项目。

任务 2 - 创建 MVC 控制器

创建人员模型后，将 ASP.NET MVC 基架与实体框架配合使用，为 Person 创建 CRUD 控制器操作和视图。

在解决方案资源管理器中，右键单击 MyHybridSite 项目的 Controllers 文件夹，然后选择“添加 ” |新的基架项目...。

创建新的基架控制器
在“ 添加基架 ”对话框中， 使用实体框架选择“带视图的 MVC 5 控制器”， 然后单击“ 添加”。

选择具有视图和实体框架的 MVC 5 控制器
将 MvcPersonController 设置为 控制器名称，选择“ 使用异步控制器操作” 选项，然后选择“ 人员 (MyHybridSite.Models) ”作为 Model 类。

添加具有基架的 MVC 控制器
在 “数据上下文类”下，单击“ 新建数据上下文...”。

创建新的数据上下文
在“ 新建数据上下文 ”对话框中，将新数据上下文命名为 PersonContext ，然后单击“ 添加”。

创建新的 PersonContext 类型
单击“添加”，为具有基架的人员创建新的控制器。然后，Visual Studio 将生成控制器操作、人员数据上下文和 Razor 视图。

使用基架创建 MVC 控制器后

打开 Controllers 文件夹中的 MvcPersonController.cs 文件。请注意，CRUD 操作方法已自动生成。

...

// POST: /MvcPerson/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for 
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create([Bind(Include="Id,Name,Age")] Person person)
{
     if (ModelState.IsValid)
     {
          db.People.Add(person);
          await db.SaveChangesAsync();
          return RedirectToAction("Index");
     }

     return View(person);
}

// GET: /MvcPerson/Edit/5
public async Task<ActionResult> Edit(int? id)
{
     if (id == null)
     {
          return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
     }
     Person person = await db.People.FindAsync(id);
     if (person == null)
     {
          return HttpNotFound();
     }
     return View(person);
}

...

注意

通过从前面步骤中的基架选项中选择“使用异步控制器操作检查”框，Visual Studio 为涉及访问人员数据上下文的所有操作生成异步操作方法。建议对长时间运行的不受 CPU 限制的请求使用异步操作方法，以避免在处理请求时阻止 Web 服务器执行工作。

任务 3 - 运行解决方案

在此任务中，你将再次运行解决方案，以验证 Person 的视图是否按预期工作。将添加新人员以验证是否已成功将其保存到数据库。

按“F5”运行该解决方案。
导航到 /MvcPerson。应显示人员列表的基架视图。
单击“ 新建” 以添加新人员。

导航到基架的 MVC 视图
在 “创建” 视图中，为人员提供 “姓名 ”和“ 年龄 ”，然后单击“ 创建”。

添加新人员
新人员将添加到列表中。在元素列表中，单击“ 详细信息 ”以显示人员的详细信息视图。然后，在 “详细信息” 视图中，单击“ 返回列表” 以返回到列表视图。

人员的详细信息视图
单击 “删除” 链接以删除该人员。在 “删除” 视图中，单击“ 删除 ”以确认操作。

删除人员
返回 Visual Studio 并按 SHIFT + F5 停止调试。

练习 3：使用基架创建 Web API 控制器

Web API 框架是 ASP.NET Stack 的一部分，旨在简化 HTTP 服务的实现，通常通过 RESTful API 发送和接收 JSON 或 XML 格式的数据。

在本练习中，你将再次使用 ASP.NET 基架来生成 Web API 控制器。你将使用上一练习中的相同 Person 和 PersonContext 类提供 JSON 格式的相同人员数据。你将了解如何在同一 ASP.NET 应用程序中以不同方式公开相同的资源。

任务 1 - 创建 Web API 控制器

在此任务中，你将创建一个新的 Web API 控制器 ，该控制器将以计算机易耗型格式（如 JSON）公开人员数据。

如果尚未打开，请打开 Visual Studio Express 2013 for Web，然后打开 Source/Ex3-WebAPI/Begin 文件夹中的 MyHybridSite.sln 解决方案。或者，可以继续使用在上一练习中获取的解决方案。

注意

如果从练习 3 中的“开始”解决方案开始，请按 Ctrl + Shift + B 生成解决方案。
在解决方案资源管理器中，右键单击 MyHybridSite 项目的 Controllers 文件夹，然后选择“添加 ” |新的基架项目...。

创建新的基架控制器
在“ 添加基架 ”对话框中，在左窗格中选择“ Web API ”，选择“ Web API 2 控制器”，使用中间窗格中的“实体框架”， 然后单击“ 添加”。

选择包含操作和实体框架的 Web API 2 控制器
将 ApiPersonController 设置为 控制器名称，选择“ 使用异步控制器操作” 选项，然后选择“ 人员 (MyHybridSite.Models) ”和 “PersonContext (MyHybridSite.Models) ”作为模型和数据 上下文 类。然后单击“添加” 。

添加具有基架的 Web API 控制器
然后，Visual Studio 将生成 ApiPersonController 类，其中包含四个 CRUD 操作来处理数据。

后，使用

使用基架创建 Web API 控制器后
打开 ApiPersonController.cs 文件并检查 GetPeople 操作方法。此方法查询 PersonContext 类型的数据库字段以获取人员数据。
```
// GET api/ApiPerson
public IQueryable<Person> GetPeople()
{
    return db.People;
}
```
现在请注意方法定义上方的注释。它提供用于公开此操作的 URI，你将在下一个任务中使用的操作。
```
// GET api/ApiPerson
public IQueryable<Person> GetPeople()
{
    return db.People;
}
```
注意

默认情况下，Web API 配置为捕获对 /api 路径的查询，以避免与 MVC 控制器发生冲突。如果需要更改此设置，请参阅 ASP.NET Web API 中的路由。

任务 2 - 运行解决方案

在此任务中，你将使用 Internet Explorer F12 开发人员工具来 检查来自 Web API 控制器的完整响应。你将了解如何捕获网络流量，以便更深入地了解应用程序数据。

注意

确保在 Visual Studio 工具栏上的“开始”按钮中选择 Internet Explorer。

Internet Explorer 选项

F12 开发人员工具具有本动手实验中未涵盖的多种功能。若要了解详细信息，请参阅使用 F12 开发人员工具。

按“F5”运行该解决方案。

注意

为了正确执行此任务，应用程序需要具有数据。如果数据库为空，可以返回到练习 2 中的任务 3，并按照有关如何使用 MVC 视图创建新人员的步骤进行操作。
在浏览器中，按 F12 打开 “开发人员工具” 面板。按 Ctrl + 4 或单击 “网络 ”图标，然后单击绿色箭头按钮开始捕获网络流量。

启动 Web API 网络捕获
将 api/ApiPerson 追加到浏览器地址栏中的 URL。现在，你将检查 来自 ApiPersonController 的响应的详细信息。

通过 Web API 检索人员数据

注意

下载完成后，系统会提示你对下载的文件执行操作。使对话框保持打开状态，以便能够通过“开发人员工具”窗口watch响应内容。
现在，你将检查响应的正文。为此，请单击“ 详细信息 ”选项卡，然后单击“ 响应正文”。可以检查，下载的数据是具有与 Person 类对应的属性 ID、Name 和 Age 的对象列表。

查看 Web API 响应正文

任务 3 - 添加 Web API 帮助页

创建 Web API 时，创建帮助页很有用，以便其他开发人员了解如何调用 API。可以手动创建和更新文档页，但最好自动生成文档页，以避免进行维护工作。在此任务中，你将使用 Nuget 包自动生成解决方案的 Web API 帮助页。

在 Visual Studio 的“ 工具 ”菜单中，选择“ NuGet 包管理器”，然后单击“ 包管理器控制台”。
在 “包管理器控制台” 窗口中，执行以下命令：
```
Install-Package Microsoft.AspNet.WebApi.HelpPage
```
注意

Microsoft.AspNet.WebApi.HelpPage 包安装必要的程序集，并为“区域/HelpPage”文件夹下的帮助页添加 MVC 视图。

HelpPage 区域
默认情况下，帮助页面具有文档的占位符字符串。可以使用 XML 文档注释来创建文档。若要启用此功能，请打开位于 Areas/HelpPage/App_Start 文件夹中的 HelpPageConfig.cs 文件，并取消注释以下行：
```
config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));
```
在“解决方案资源管理器”中，右键单击项目“MyHybridSite”，选择“属性”，然后单击“生成”选项卡。

“生成”选项卡
在“ 输出”下，选择“ XML 文档文件”。在编辑框中，键入 App_Data/XmlDocument.xml。

“生成”选项卡中的“输出”部分
按 Ctrl + S 保存更改。
从 Controllers 文件夹打开 ApiPersonController.cs 文件。
在 GetPeople 方法签名和 // GET api/ApiPerson 注释之间输入一个新行，然后键入三个正斜杠。

注意

Visual Studio 会自动插入定义方法文档的 XML 元素。

为 GetPeople 方法添加摘要文本和返回值。该消息应如下所示。

// GET api/ApiPerson
/// <summary>
/// Documentation for 'GET' method
/// </summary>
/// <returns>Returns a list of people in the requested format</returns>
public IQueryable<Person> GetPeople()
{
    return db.People;
}

按“F5”运行该解决方案。
将 /help 追加到地址栏中的 URL，以浏览到帮助页面。

ASP.NET Web API帮助页

注意

页面main内容是按控制器分组的 API 表。表条目是使用 IApiExplorer 接口动态生成的。如果添加或更新 API 控制器，则下次生成应用程序时，表将自动更新。

API 列列出了 HTTP 方法和相对 URI。 “ 说明” 列包含已从方法文档中提取的信息。
请注意，在方法定义上方添加的说明将显示在说明列中。

API 方法说明
单击其中一个 API 方法导航到包含更多详细信息（包括示例响应正文）的页面。

详细信息页

总结

通过完成此动手实验，你已了解如何：

使用 Visual Studio 2013 中的一 ASP.NET 体验创建新的 Web 应用程序
将多个 ASP.NET 技术集成到一个项目中
使用 ASP.NET 基架从模型类生成 MVC 控制器和视图
生成 Web API 控制器，这些控制器使用异步编程和通过实体框架访问数据等功能
为控制器自动生成 Web API 帮助页

通过

动手实验：One ASP.NET：集 ASP.NET Web 窗体、MVC 和 Web API 于一身

概述

目标

先决条件

设置

使用代码段

练习

练习 1：创建新的Web Forms项目

任务 1 - 使用一 ASP.NET 体验创建新网站

任务 2 - 运行解决方案

练习 2：使用基架创建 MVC 控制器

任务 1 - 创建新模型

任务 2 - 创建 MVC 控制器

任务 3 - 运行解决方案

练习 3：使用基架创建 Web API 控制器

任务 1 - 创建 Web API 控制器

任务 2 - 运行解决方案

任务 3 - 添加 Web API 帮助页

总结

反馈

其他资源