ASP.NET MVC 4 帮助程序、窗体和验证

项目
07/16/2024

在 ASP.NET MVC 4 模型和数据访问 动手实验室中，你已从数据库加载和显示数据。在此动手实验室中，你将添加到 音乐应用商店 应用程序，以便编辑该数据。

考虑到这一目标，你将首先创建支持专辑的创建、读取、更新和删除（CRUD）操作的控制器。你将生成索引视图模板，以利用 ASP.NET MVC 的基架功能在 HTML 表中显示专辑的属性。为了增强该视图，你将添加一个自定义 HTML 帮助程序，用于截断长说明。

之后，你将添加“编辑”和“创建视图”，以便更改数据库中的相册，并借助下拉列表等表单元素。

最后，你将允许用户删除一张专辑，还可以通过验证其输入来阻止他们输入错误数据。

此动手实验室假设你对 ASP.NET MVC 有基本的了解。如果以前没有使用 过 ASP.NET MVC ，我们建议你 ASP.NET MVC 基础知识 实践实验室。

本实验室将指导你完成以前通过对源文件夹中提供的示例 Web 应用程序应用进行次要更改来介绍的增强功能和新功能。

注意

所有示例代码和代码片段都包含在 Web Camp 培训工具包中，可在 Microsoft-Web/WebCampTrainingKit 版本获取。特定于此实验室的项目可在 ASP.NET MVC 4 帮助程序、窗体和验证中使用。

目标

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

创建控制器以支持 CRUD 操作
生成索引视图以显示 HTML 表中的实体属性
添加自定义 HTML 帮助程序
创建和自定义编辑视图
区分响应 HTTP-GET 或 HTTP-POST 调用的操作方法
添加和自定义创建视图
处理实体的删除
验证用户输入

先决条件

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

Microsoft Visual Studio Express 2012 for Web 或高级版（请阅读附录 A ，了解如何安装它）。

安装

安装代码片段

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

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

练习

以下练习构成了此动手实验室：

创建应用商店管理器控制器及其索引视图
添加 HTML 帮助程序
创建编辑视图
添加创建视图
处理删除
添加验证
在客户端使用 Unobtrusive jQuery

注意

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

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

练习 1：创建应用商店管理器控制器及其索引视图

在本练习中，你将了解如何创建新控制器以支持 CRUD 操作，自定义其 Index 操作方法，以从数据库返回专辑列表，最后生成索引视图模板，以利用 ASP.NET MVC 的基架功能在 HTML 表中显示专辑的属性。

任务 1 - 创建 StoreManagerController

在此任务中，你将创建一个名为 StoreManagerController 的新控制器以支持 CRUD 操作。

打开位于 Source/Ex1-CreatingTheStoreManagerController/Begin/ 文件夹的 Begin 解决方案。
1. 在继续之前，需要下载一些缺少的 NuGet 包。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
添加新控制器。为此，请右键单击解决方案资源管理器中的 Controllers 文件夹，选择“添加”，然后选择“控制器”命令。将控制器名称更改为 StoreManagerController，并确保已选择具有空读/写操作的选项 MVC 控制器。 单击“添加” 。

“添加控制器”对话框

将生成新的 Controller 类。由于你指示为读取/写入添加操作，这些操作的存根方法会创建常见的 CRUD 操作，并填充 TODO 注释，提示包括应用程序特定的逻辑。

任务 2 - 自定义 StoreManager 索引

在此任务中，你将自定义 StoreManager 索引操作方法，以返回包含数据库中专辑列表的视图。

在 StoreManagerController 类中，添加以下 using 指令。

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex1 使用 MvcMusicStore）
```
using System.Data;
using System.Data.Entity;
using MvcMusicStore.Models;
```
将字段添加到 StoreManagerController 以保存 MusicStoreEntities 的 实例。

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex1 MusicStoreEntities）
```
public class StoreManagerController : Controller
{
    private MusicStoreEntities db = new MusicStoreEntities();
```
实现 StoreManagerController 索引操作以返回包含专辑列表的视图。

控制器操作逻辑将非常类似于前面编写的 StoreController 的索引操作。使用 LINQ 检索所有专辑，包括流派和艺术家信息以供显示。

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex1 StoreManagerController 索引）
```
//
// GET: /StoreManager/

public ActionResult Index()
{
    var albums = this.db.Albums.Include(a => a.Genre).Include(a => a.Artist)
         .OrderBy(a => a.Price);

    return this.View(albums.ToList());
}
```

任务 3 - 创建索引视图

在此任务中，你将创建索引视图模板以显示 StoreManager 控制器返回的专辑列表。

在创建新的视图模板之前，应生成项目，以便 “添加视图”对话框 知道 要使用的相册 类。选择“ 生成” |生成 MvcMusicStore 以生成项目。
右键单击“索引”操作方法，然后选择“添加视图”。此时会显示“ 添加视图 ”对话框。

从索引方法中添加 View
在“添加视图”对话框中，验证视图名称是否为索引。选择“创建强类型视图”选项，然后从“模型”类下拉列表中选择“相册”（MvcMusicStore.Models）。从基架模板下拉列表中选择“列表”。将 视图引擎 保留为 Razor 和其他字段的默认值，然后单击“ 添加”。

添加索引视图

任务 4 - 自定义索引视图的基架

在此任务中，你将调整使用 ASP.NET MVC 基架功能创建的简单视图模板，使其显示所需的字段。

注意

ASP.NET MVC 中的基架支持会生成一个简单的视图模板，其中列出了相册模型中的所有字段。基架提供了一种快速的方法来开始使用强类型视图：无需手动编写视图模板，基架会快速生成默认模板，然后修改生成的代码。

查看创建的代码。生成的字段列表将是以下 HTML 表的一部分，基架用于显示表格数据。

@model IEnumerable<MvcMusicStore.Models.Album>

@{
     ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
     @Html.ActionLink("Create New", "Create")
</p>
<table>
     <tr>
          <th>
                @Html.DisplayNameFor(model => model.GenreId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.ArtistId)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Title)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.Price)
          </th>
          <th>
                @Html.DisplayNameFor(model => model.AlbumArtUrl)
          </th>
          <th></th>
     </tr>

@foreach (var item in Model) {
     <tr>
          <td>
                @Html.DisplayFor(modelItem => item.GenreId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.ArtistId)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.AlbumArtUrl)
          </td>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
                @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
     </tr>
}

</table>

将<表格>代码替换为以下代码，以仅显示流派、艺术家、专辑标题和价格字段。这会删除 AlbumId 和 相册艺术 URL 列。此外，它会更改流派 Id 和 ArtistId 列以显示其链接的 类属性 Artist.Name 和 Genre.Name，并删除 “详细信息 ”链接。

<table>
    <tr>
      <th></th>
      <th>Genre</th>
      <th>Artist</th>
      <th>Title</th>
      <th>Price</th>
    </tr>

    @foreach (var item in Model) {
     <tr>
          <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

                @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Artist.Name)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Title)
          </td>
          <td>
                @Html.DisplayFor(modelItem => item.Price)
          </td>
     </tr>
    }
</table>

更改以下说明。

@model IEnumerable<MvcMusicStore.Models.Album>
@{
    ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

任务 5 - 运行应用程序

在此任务中 ，将测试 StoreManager 索引视图模板是否根据前面的步骤的设计显示相册列表。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager 以验证是否显示专辑列表，并显示其标题、艺术家和流派。

浏览相册列表

练习 2：添加 HTML 帮助程序

StoreManager 索引页存在一个潜在问题：标题和艺术家名称属性可能都足够长，足以抛出表格格式。在本练习中，你将了解如何添加自定义 HTML 帮助程序来截断该文本。

在下图中，可以看到在使用小型浏览器大小时，由于文本长度，格式的修改方式。

浏览未截断文本的专辑列表

浏览未截断文本的专辑列表

任务 1 - 扩展 HTML 帮助程序

在此任务中，你将向 ASP.NET MVC 视图内公开的 HTML 对象添加新方法截断。为此，你将实现由 ASP.NET MVC 提供的内置 System.Web.Mvc.HtmlHelper 类的扩展方法。

注意

若要详细了解 扩展方法，请访问此 msdn 文章。 https://msdn.microsoft.com/library/bb383977.aspx。

打开 Source/Ex2-AddingAnHTMLHelper/Begin/ 文件夹中的 Begin 解决方案。否则，可以继续使用 通过完成上一练习获得的 End 解决方案。
1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
打开 StoreManager 的索引视图。为此，请在解决方案资源管理器展开 Views 文件夹，然后展开 StoreManager 并打开 Index.cshtml 文件。

在 @model 指令下面添加以下代码，以定义 Truncate 帮助程序方法。

@model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
     if (input.Length <= length) {
          @input
     } else {
          @input.Substring(0, length)<text>...</text>
     }
} 

@{
     ViewBag.Title = "Store Manager - All Albums";
}

<h2>Albums</h2>

任务 2 - 截断页面中的文本

在此任务中 ，将使用截断 方法截断视图模板中的文本。

打开 StoreManager 的索引视图。为此，请在解决方案资源管理器展开 Views 文件夹，然后展开 StoreManager 并打开 Index.cshtml 文件。

替换显示艺术家姓名和专辑标题的行。为此，请替换以下行。

<tr>
     <td>
          @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |

          @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Genre.Name)
     </td>
     <td>
          @Truncate(item.Artist.Name, 25)
     </td>
     <td>
          @Truncate(item.Title, 25)
     </td>
     <td>
          @Html.DisplayFor(modelItem => item.Price)
     </td>
</tr>

任务 3 - 运行应用程序

在此任务中 ，你将测试 StoreManager 索引视图模板是否截断专辑的标题和艺术家名称。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager 以验证标题和艺术家列中的长文本是否已截断。

截断的标题和艺术家名称

练习 3：创建编辑视图

在本练习中，你将了解如何创建一个表单，以允许商店经理编辑相册。他们将浏览 /StoreManager/Edit/id URL（ID 是要编辑的专辑的唯一 ID），从而对服务器进行 HTTP-GET 调用。

控制器编辑操作方法将从数据库中检索相应的相册，创建 StoreManagerViewModel 对象以封装它（以及艺术家和流派列表），然后将其传递给视图模板，以将 HTML 页面呈现回用户。此页面将包含一个 <窗体> 元素，其中包含用于编辑相册属性的文本框和下拉列表。

用户更新相册表单值并单击“保存”按钮后，将通过 HTTP-POST 调用提交到 /StoreManager/Edit/id 的更改。尽管 URL 与上次调用中保持不变，但 ASP.NET MVC 标识这次是 HTTP-POST，因此执行不同的编辑操作方法（一个用 [HttpPost] 修饰）。

任务 1 - 实现 HTTP-GET 编辑操作方法

在此任务中，你将实现“编辑”操作方法的 HTTP-GET 版本，以从数据库中检索相应的专辑，以及所有流派和艺术家的列表。它将将此数据打包到 上一步中定义的 StoreManagerViewModel 对象中，然后传递给视图模板以呈现响应。

打开 Source/Ex3-CreatingTheEditView/Begin/ 文件夹的 Begin 解决方案。否则，可以继续使用 通过完成上一练习获得的 End 解决方案。
1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
打开 StoreManagerController 类。为此，请展开 “控制器 ”文件夹，然后双击 StoreManagerController.cs。
将 HTTP-GET 编辑 操作方法替换为以下代码，以检索相应的专辑以及流派和 艺术家 列表。

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex3 StoreManagerController HTTP-GET 编辑操作）
```
public ActionResult Edit(int id)
{
    Album album = this.db.Albums.Find(id);

    if (album == null)
    {
         return this.HttpNotFound();
    }

    this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
    this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

    return this.View(album);
}
```
注意

你使用的是 System.Web.Mvc SelectList 作为艺术家和流派，而不是 System.Collections.Generic 列表。

SelectList 是填充 HTML 下拉列表和管理当前选择等内容的更简洁的方法。实例化和以后在控制器操作中设置这些 ViewModel 对象将使“编辑”窗体方案更简洁。

任务 2 - 创建编辑视图

在此任务中，你将创建一个“编辑视图”模板，稍后将显示相册属性。

创建编辑视图。为此，请在“编辑”操作方法内右键单击并选择“添加视图”。
在“添加视图”对话框中，验证视图名称是否为 “编辑”。 选中“创建强类型视图”复选框，然后从“视图数据类”下拉列表中选择“相册”（MvcMusicStore.Models）。从基架模板下拉列表中选择“编辑”。将其他字段保留默认值，然后单击“ 添加”。

添加编辑视图

任务 3 - 运行应用程序

在此任务中 ，你将测试 StoreManager 编辑视图页面是否显示作为参数传递的专辑的属性值。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager/Edit/1 以验证传递的相册的属性值是否显示。

浏览相册的“编辑”视图

任务 4 - 在专辑编辑器模板上实现下拉列表

在此任务中，你将将下拉列表添加到在上一个任务中创建的“视图”模板，以便用户可以从“艺术家”和“流派”列表中选择。

将所有 Album 字段集代码替换为以下内容：

<fieldset>
     <legend>Album</legend>

     @Html.HiddenFor(model => model.AlbumId)

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Title)
          @Html.ValidationMessageFor(model => model.Title)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Price)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.Price)
          @Html.ValidationMessageFor(model => model.Price)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.AlbumArtUrl)
     </div>
     <div class="editor-field">
          @Html.EditorFor(model => model.AlbumArtUrl)
          @Html.ValidationMessageFor(model => model.AlbumArtUrl)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Artist)
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", (SelectList) ViewData["Artists"])
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Genre)
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", (SelectList) ViewData["Genres"])
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <p>
          <input type="submit" value="Save" />
     </p>
</fieldset>

注意

已添加一个 Html.DropDownList 帮助程序，用于呈现用于选择艺术家和流派的下拉列表。传递给 Html.DropDownList 的参数包括：

窗体字段的名称（“ArtistId”）。
下拉列表的值的 SelectList。

任务 5 - 运行应用程序

在此任务中 ，你将测试 StoreManager 编辑视图页面是否显示下拉列表，而不是艺术家和流派 ID 文本字段。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager/Edit/1 以验证它是否显示下拉列表，而不是艺术家和流派 ID 文本字段。

浏览相册的“编辑”视图，这次包含下拉列表

任务 6 - 实现 HTTP-POST 编辑操作方法

编辑视图按预期显示后，需要实现 HTTP-POST 编辑操作方法以保存对相册所做的更改。

根据需要关闭浏览器，以返回到 Visual Studio 窗口。从 Controllers 文件夹中打开 StoreManagerController。
将 HTTP-POST 编辑 操作方法代码替换为以下内容（请注意，必须替换的方法是接收两个参数的重载版本）：

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex3 StoreManagerController HTTP-POST 编辑操作）
```
[HttpPost]
public ActionResult Edit(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Entry(album).State = EntityState.Modified;
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}
```
注意

当用户单击视图的“ 保存 ”按钮并将表单值的 HTTP-POST 返回到服务器以将其保存在数据库中时，将执行此方法。修饰器 [HttpPost] 指示方法应用于这些 HTTP-POST 方案。该方法采用 Album 对象。 ASP.NET MVC 将自动从已发布 <的表单> 值创建 Album 对象。

该方法将执行以下步骤：
1. 如果模型有效：
  1. 更新上下文中的相册条目，将其标记为已修改的对象。
  2. 保存更改并重定向到索引视图。
2. 如果模型无效，它将使用 流派 Id 和 ArtistId 填充 ViewBag，然后它将返回包含接收的 Album 对象的视图，以允许用户执行任何必需的更新。

任务 7 - 运行应用程序

在此任务中 ，你将测试 StoreManager 编辑 视图页面实际上将更新的相册数据保存在数据库中。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager/Edit/1。将专辑标题更改为 “加载 ”，然后单击“ 保存”。验证专辑的标题是否已在专辑列表中实际更改。

更新相册

练习 4：添加创建视图

现在 StoreManagerController 支持编辑功能，在本练习中，你将了解如何添加“创建视图”模板，让商店经理向应用程序添加新的相册。

与编辑功能一样，你将使用 StoreManagerController 类中的两个单独的方法实现“创建”方案：

当商店经理首次访问 /StoreManager/Create URL 时，一个操作方法将显示一个空窗体。
第二个操作方法将处理商店管理器单击 窗体中的“保存 ”按钮并将值提交回 /StoreManager/Create URL 作为 HTTP-POST 的方案。

任务 1 - 实现 HTTP-GET 创建操作方法

在此任务中，你将实现“创建”操作方法的 HTTP-GET 版本，以检索所有流派和艺术家的列表，将此数据打包到 StoreManagerViewModel 对象中，然后传递给视图模板。

打开位于 Source/Ex4-AddingACreateView/Begin/ 文件夹的 Begin 解决方案。否则，可以继续使用 通过完成上一练习获得的 End 解决方案。
1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
打开 StoreManagerController 类。为此，请展开 “控制器 ”文件夹，然后双击 StoreManagerController.cs。

将 Create 操作方法代码替换为以下内容：

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex4 StoreManagerController HTTP-GET 创建操作）

//
// GET: /StoreManager/Create

public ActionResult Create()
{
     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name");
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name");

     return this.View();
}

任务 2 - 添加创建视图

在此任务中，你将添加“创建视图”模板，该模板将显示一个新的（空）相册窗体。

右键单击“创建”操作方法，然后选择“添加视图”。此时会显示“添加视图”对话框。
在“添加视图”对话框中，验证视图名称是否为 “创建”。选择“创建强类型视图”选项，然后从“模型”类下拉列表中选择“相册”（MvcMusicStore.Models），并从基架模板下拉列表中选择“创建”。将其他字段保留默认值，然后单击“ 添加”。

添加创建视图

更新 GenreId 和 ArtistId 字段以使用下拉列表，如下所示：

...
<fieldset>
     <legend>Album</legend>

     <div class="editor-label">
          @Html.LabelFor(model => model.GenreId, "Genre")
     </div>
     <div class="editor-field">
          @Html.DropDownList("GenreId", String.Empty)
          @Html.ValidationMessageFor(model => model.GenreId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.ArtistId, "Artist")
     </div>
     <div class="editor-field">
          @Html.DropDownList("ArtistId", String.Empty)
          @Html.ValidationMessageFor(model => model.ArtistId)
     </div>

     <div class="editor-label">
          @Html.LabelFor(model => model.Title)
     </div>
    ...

任务 3 - 运行应用程序

在此任务中，你将测试 StoreManager“创建视图”页面是否显示空的“相册”窗体。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager/Create。验证是否显示空窗体以填充新的相册属性。

使用空窗体创建视图

任务 4 - 实现 HTTP-POST 创建操作方法

在此任务中，你将实现在用户单击“保存”按钮时将调用的 Create 操作方法的 HTTP-POST 版本。该方法应在数据库中保存新专辑。

根据需要关闭浏览器，以返回到 Visual Studio 窗口。打开 StoreManagerController 类。为此，请展开 “控制器 ”文件夹，然后双击 StoreManagerController.cs。

将 HTTP-POST Create 操作方法代码替换为以下内容：

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex4 StoreManagerController HTTP- POST 创建操作）

[HttpPost]
public ActionResult Create(Album album)
{
     if (ModelState.IsValid)
     {
          this.db.Albums.Add(album);
          this.db.SaveChanges();

          return this.RedirectToAction("Index");
     }

     this.ViewBag.GenreId = new SelectList(this.db.Genres, "GenreId", "Name", album.GenreId);
     this.ViewBag.ArtistId = new SelectList(this.db.Artists, "ArtistId", "Name", album.ArtistId);

     return this.View(album);
}

注意

Create 操作与以前的 Edit 操作方法非常相似，但未将对象设置为已修改，而是被添加到上下文中。

任务 5 - 运行应用程序

在此任务中 ，你将测试 StoreManager“创建 视图”页，以便创建新的相册，然后重定向到 StoreManager 索引视图。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager/Create。使用新相册的数据填充所有表单字段，如下图所示：

创建相册
验证是否已重定向到包含刚刚创建的新专辑的 StoreManager 索引视图。

新建专辑

练习 5：处理删除

尚未实现删除专辑的功能。这就是本练习将介绍的内容。与之前一样，你将使用 StoreManagerController 类中的两个单独的方法实现 Delete 方案：

一个操作方法将显示确认表单
第二个操作方法将处理表单提交

任务 1 - 实现 HTTP-GET 删除操作方法

在此任务中，你将实现“删除”操作方法的 HTTP-GET 版本，以检索专辑的信息。

打开位于 Source/Ex5-HandlingDeletion/Begin/ 文件夹的 Begin 解决方案。否则，可以继续使用 通过完成上一练习获得的 End 解决方案。
1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
打开 StoreManagerController 类。为此，请展开 “控制器 ”文件夹，然后双击 StoreManagerController.cs。
删除控制器操作与上一个应用商店详细信息控制器操作完全相同：它使用 URL 中提供的 ID 从数据库中查询相册对象，并返回相应的视图。为此，请将 HTTP-GET Delete 操作方法代码替换为以下内容：

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex5 处理删除 HTTP-GET 删除操作）
```
//
// GET: /StoreManager/Delete/5

public ActionResult Delete(int id)
{
     Album album = this.db.Albums.Find(id);

     if (album == null)
     {
          return this.HttpNotFound();
     }

     return this.View(album);
}
```
右键单击“删除”操作方法，然后选择“添加视图”。此时会显示“添加视图”对话框。
在“添加视图”对话框中，验证视图名称是否为 “删除”。选择“创建强类型视图”选项，然后从“模型”类下拉列表中选择“相册”（MvcMusicStore.Models）。从基架模板下拉列表中选择“删除”。将其他字段保留默认值，然后单击“ 添加”。

添加删除视图

“删除”模板显示模型中的所有字段。将仅显示专辑的标题。为此，请将视图的内容替换为以下代码：

@model MvcMusicStore.Models.Album
@{
     ViewBag.Title = "Delete";
}
<h2>Delete Confirmation</h2>

<h3> Are you sure you want to delete the album title <strong>@Model.Title </strong> ? </h3>

@using (Html.BeginForm()) {
     <p>
          <input type="submit" value="Delete" /> |
          @Html.ActionLink("Back to List", "Index")
     </p>
}

任务 2 - 运行应用程序

在此任务中，你将测试 StoreManager“删除视图”页面是否显示确认删除表单。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager。通过单击“删除”选择一张要删除的相册，并验证是否已上传新视图。

删除相册

任务 3 - 实现 HTTP-POST 删除操作方法

在此任务中，你将实现在用户单击 “删除 ”按钮时将调用的 Delete 操作方法的 HTTP-POST 版本。该方法应删除数据库中的相册。

根据需要关闭浏览器，以返回到 Visual Studio 窗口。打开 StoreManagerController 类。为此，请展开 “控制器 ”文件夹，然后双击 StoreManagerController.cs。

将 HTTP-POST Delete 操作方法代码替换为以下内容：

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex5 处理删除 HTTP-POST 删除操作）

//
// POST: /StoreManager/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
     Album album = this.db.Albums.Find(id);
     this.db.Albums.Remove(album);
     this.db.SaveChanges();

     return this.RedirectToAction("Index"); 
}

任务 4 - 运行应用程序

在此任务中 ，你将测试 StoreManager 删除 视图页面，以便删除相册，然后重定向到 StoreManager 索引视图。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager。单击“删除”选择要删除的一张专辑。单击“删除”按钮确认删除：

删除相册
验证该专辑是否已删除，因为它未显示在“索引”页中。

练习 6：添加验证

目前，已建立的“创建”和“编辑”表单不会执行任何类型的验证。如果用户在价格字段中留出必填字段空白或键入字母，你将从数据库收到第一个错误。

可以通过向模型类添加数据注释向应用程序添加验证。数据注释允许描述要应用于模型属性的规则，ASP.NET MVC 将负责强制实施和向用户显示适当的消息。

任务 1 - 添加数据批注

在此任务中，你将向相册模型添加数据批注，以便适当时创建和编辑页面显示验证消息。

对于简单的 Model 类，只需添加 System.ComponentModel.DataAnnotation 的 using 语句，然后将 [Required] 属性置于相应的属性上即可处理添加数据注释。以下示例将使 Name 属性成为视图中的必需字段。

using System.ComponentModel.DataAnnotations;
namespace SuperheroSample.Models
{
    public class Superhero
    {
        [Required]
        public string Name { get; set; }

        public bool WearsCape { get; set; }
    }
}

在生成实体数据模型的应用程序等情况下，这一点更为复杂。如果直接向模型类添加了数据注释，则从数据库更新模型时会覆盖它们。相反，可以使用将存在的元数据分部类来保存批注，并使用 [MetadataType] 属性与模型类相关联。

打开 Source/Ex6-AddingValidation/Begin/ 文件夹中的 Begin 解决方案。否则，可以继续使用 通过完成上一练习获得的 End 解决方案。
1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
从 Models 文件夹中打开Album.cs。

将Album.cs内容替换为突出显示的代码，使其如下所示：

注意

行 [DisplayFormat（ConvertEmptyStringToNull=false）] 指示在数据源中更新数据字段时，模型中的空字符串不会转换为 null。在数据注释验证字段之前，实体框架将 null 值分配给模型时，此设置将避免出现异常。

（代码片段 - ASP.NET MVC 4 帮助器和表单和验证 - Ex6 专辑元数据分部类）

namespace MvcMusicStore.Models
{
    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;

    public class Album
    {
        [ScaffoldColumn(false)]
        public int AlbumId { get; set; }

        [DisplayName("Genre")]
        public int GenreId { get; set; }

        [DisplayName("Artist")]
        public int ArtistId { get; set; }

        [Required(ErrorMessage = "An Album Title is required")]
        [DisplayFormat(ConvertEmptyStringToNull = false)]
        [StringLength(160, MinimumLength = 2)]
        public string Title { get; set; }

        [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        [DisplayName("Album Art URL")]
        [DataType(DataType.ImageUrl)]
        [StringLength(1024)]
        public string AlbumArtUrl { get; set; }

        public virtual Genre Genre { get; set; }

        public virtual Artist Artist { get; set; }
    }
}

注意

此 Album 分部类具有一个 MetadataType 属性，该属性指向 Data Annotations 的 AlbumMetaData 类。以下是用于批注相册模型的一些数据批注属性：

必需 - 指示属性为必填字段
DisplayName - 定义要在窗体字段和验证消息上使用的文本
DisplayFormat - 指定如何显示和格式化数据字段。
StringLength - 定义字符串字段的最大长度
范围 - 为数值字段提供最大值和最小值
基架Column - 允许隐藏编辑器窗体中的字段

任务 2 - 运行应用程序

在此任务中，你将使用上一个任务中选择的显示名称来测试“创建”和“编辑”页面是否验证字段。

按 F5 运行应用程序。
项目在主页中启动。将 URL 更改为 /StoreManager/Create。验证显示名称是否与分部类中的显示名称匹配（如 专辑艺术 URL 而不是 AlbumArtUrl）
单击“创建”，无需填写表单。验证是否收到相应的验证消息。

“创建”页中已验证的字段
可以验证“编辑”页面是否发生相同的操作。将 URL 更改为 /StoreManager/Edit/1 ，并验证显示名称是否与分部类中的显示名称匹配（如 专辑艺术 URL 而不是 AlbumArtUrl）。清空“标题”和“价格”字段，然后单击“保存”。验证是否收到相应的验证消息。

“编辑”页中已验证的字段

练习 7：在客户端使用非干扰 jQuery

在本练习中，你将了解如何在客户端启用 MVC 4 Unobtrusive jQuery 验证。

注意

Unobtrusive jQuery 使用 data-ajax 前缀 JavaScript 在服务器上调用操作方法，而不是侵入性地发出内联客户端脚本。

任务 1 - 在启用 Unobtrusive jQuery 之前运行应用程序

在此任务中，你将在包括 jQuery 之前运行应用程序，以便比较这两个验证模型。

打开 Source/Ex7-UnobtrusivejQueryValidation/Begin/ 文件夹中的 Begin 解决方案。否则，可以继续使用 通过完成上一练习获得的 End 解决方案。
1. 如果打开提供的 Begin 解决方案，则需要先下载一些缺少的 NuGet 包，然后再继续。为此，请单击“项目”菜单，然后选择“管理 NuGet 包”。
2. 在“管理 NuGet 包”对话框中，单击“还原”以下载缺少的包。
3. 最后，通过单击“生成 | 生成解决方案”生成解决方案来生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是无需交付项目中的所有库，从而减少项目大小。借助 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，可以在首次运行项目时下载所有必需的库。因此，在从此实验室打开现有解决方案后，必须运行这些步骤。
按 F5 运行该应用程序。
项目在主页中启动。浏览 /StoreManager/Create 并单击“创建”，无需填写表单即可验证是否收到验证消息：

客户端验证已禁用

在浏览器中，打开 HTML 源代码：

...
          <div class="editor-label">
                <label for="Price">Price</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="Price" name="Price" type="text" value="" />
                <span class="field-validation-valid" id="Price_validationMessage"></span>
          </div>

          <div class="editor-label">
                <label for="AlbumArtUrl">Album Art URL</label>
          </div>
          <div class="editor-field">
                <input class="text-box single-line" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
                <span class="field-validation-valid" id="AlbumArtUrl_validationMessage"></span>
          </div>

          <p>
                <input type="submit" value="Create" />
          </p>
     </fieldset>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"GenreId","ReplaceValidationMessageContents":true,"ValidationMessageId":"GenreId_validationMessage","ValidationRules":[{"ErrorMessage":"The Genre field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Genre must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"ArtistId","ReplaceValidationMessageContents":true,"ValidationMessageId":"ArtistId_validationMessage","ValidationRules":[{"ErrorMessage":"The Artist field is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Artist must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Title","ReplaceValidationMessageContents":true,"ValidationMessageId":"Title_validationMessage","ValidationRules":[{"ErrorMessage":"An Album Title is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Title must be a string with a minimum length of 2 and a maximum length of 160.","ValidationParameters":{"min":2,"max":160},"ValidationType":"length"}]},{"FieldName":"Price","ReplaceValidationMessageContents":true,"ValidationMessageId":"Price_validationMessage","ValidationRules":[{"ErrorMessage":"Price must be between 0.01 and 100.00","ValidationParameters":{"min":0.01,"max":100},"ValidationType":"range"},{"ErrorMessage":"Price is required","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"The field Price must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"AlbumArtUrl","ReplaceValidationMessageContents":true,"ValidationMessageId":"AlbumArtUrl_validationMessage","ValidationRules":[{"ErrorMessage":"The field Album Art URL must be a string with a maximum length of 1024.","ValidationParameters":{"max":1024},"ValidationType":"length"}]}],"FormId":"form0","ReplaceValidationSummary":false,"ValidationSummaryId":"validationSummary"});
//]]>
</script>
...

任务 2 - 启用非干扰客户端验证

在此任务中，将从 Web.config 文件启用 jQuery 非干扰性客户端验证，默认情况下在所有新的 ASP.NET MVC 4 项目中设置为 false。此外，还将添加必要的脚本引用，使 jQuery 无干扰客户端验证正常工作。

在项目根目录中打开 Web.Config 文件，并确保 ClientValidationEnabled 和 UnobtrusiveJavaScriptEnabled 键值设置为 true。
```
...
<configuration>
  <appSettings>
     <add key="webpages:Version" value="2.0.0.0" />
     <add key="webpages:Enabled" value="false" />
     <add key="PreserveLoginUrl" value="true" />
     <add key="ClientValidationEnabled" value="true" />
     <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
...
```
注意

还可以在Global.asax.cs通过代码启用客户端验证，以获取相同的结果：

HtmlHelper.ClientValidationEnabled = true;

此外，还可以将 ClientValidationEnabled 属性分配给任何控制器，以具有自定义行为。
在 Views\StoreManager 处打开 Create.cshtml。
确保通过“~/bundles/jqueryval”捆绑在视图中引用以下脚本文件 jquery.validate 和 jquery.validate.unobtrusive。
```
...
@section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
}
```
注意

所有这些 jQuery 库都包含在 MVC 4 新项目中。可以在项目的 /Scripts 文件夹中找到更多库。

若要使此验证库正常工作，需要添加对 jQuery 框架库的引用。由于此引用已在 _Layout.cshtml 文件中添加，因此无需在此特定视图中添加该引用。

任务 3 - 使用非干扰 jQuery 验证运行应用程序

在此任务中 ，你将测试 StoreManager 创建视图模板在用户创建新专辑时使用 jQuery 库执行客户端验证。

按 F5 运行该应用程序。
项目在主页中启动。浏览 /StoreManager/Create 并单击“创建”，无需填写表单即可验证是否收到验证消息：

启用了 jQuery 的客户端验证

在浏览器中，打开“创建”视图的源代码：

...
<div class="editor-label">
    <label for="Title">Title</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Title must be a string with a minimum length of 2 and a maximum length of 160." data-val-length-max="160" data-val-length-min="2" data-val-required="An Album Title is required" id="Title" name="Title" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="Price">Price</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." data-val-range="Price must be between 0.01 and 100.00" data-val-range-max="100" data-val-range-min="0.01" data-val-required="Price is required" id="Price" name="Price" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="AlbumArtUrl">Album Art URL</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Album Art URL must be a string with a maximum length of 1024." data-val-length-max="1024" id="AlbumArtUrl" name="AlbumArtUrl" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="AlbumArtUrl" data-valmsg-replace="true"></span>
</div>        
...

注意

对于每个客户端验证规则，Unobtrusive jQuery 会添加一个具有 data-val-rulename=“message”的属性。下面是 Unobtrusive jQuery 插入到 html 输入字段中以执行客户端验证的标记列表：

Data-val
Data-val-number
Data-val-range
Data-val-range-min / Data-val-range-max
Data-val-required
Data-val-length
Data-val-length-max / Data-val-length-min

所有数据值都用模型 数据注释填充。然后，可在客户端运行在服务器端的所有逻辑。例如，Price 属性在模型中具有以下数据注释：

[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
public object Price { get; set; }

使用 Unobtrusive jQuery 后，生成的代码为：

<input data-val="true"
data-val-number="The field Price must be a number."
data-val-range="Price must be between 0.01 and 100.00"
data-val-range-max="100"
data-val-range-min="0.01"
data-val-required="Price is required"
id="Album_Price" name="Album.Price" type="text" value="0" />

总结

通过完成此动手实验室，你已了解如何让用户使用以下内容更改数据库中存储的数据：

控制器操作，如索引、创建、编辑、删除
ASP.NET MVC 基架功能，用于在 HTML 表中显示属性
用于改善用户体验的自定义 HTML 帮助程序
响应 HTTP-GET 或 HTTP-POST 调用的操作方法
类似视图模板（如创建和编辑）的共享编辑器模板
形成诸如下拉列表之类的元素
模型验证的数据注释
使用 jQuery Unobtrusive 库的客户端验证

附录 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 所需的步骤。

转到 [/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”。
单击“立即安装”。如果没有 Web 平台安装程序 ，将重定向以先下载并安装它。
Web 平台安装程序打开后，单击“安装”以启动安装程序。

安装 Visual Studio Express
阅读所有产品的许可证和条款，然后单击“我接受”继续。

接受许可条款
等待下载和安装过程完成。

安装进度
安装完成后，单击“ 完成”。

安装已完成
单击“退出”关闭 Web 平台安装程序。
若要打开 Visual Studio Express for Web，请转到“开始”屏幕并开始编写“VS Express”，然后单击 VS Express for Web 磁贴。

VS Express for Web 磁贴

附录 B：使用代码片段

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

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

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

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

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

开始键入代码段名称

开始键入代码段名称

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

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

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

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

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

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

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

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

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

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

通过

ASP.NET MVC 4 帮助程序、窗体和验证

目标

先决条件

安装

练习

练习 1：创建应用商店管理器控制器及其索引视图

任务 1 - 创建 StoreManagerController

任务 2 - 自定义 StoreManager 索引

任务 3 - 创建索引视图

任务 4 - 自定义索引视图的基架

任务 5 - 运行应用程序

练习 2：添加 HTML 帮助程序

任务 1 - 扩展 HTML 帮助程序

任务 2 - 截断页面中的文本

任务 3 - 运行应用程序

练习 3：创建编辑视图

任务 1 - 实现 HTTP-GET 编辑操作方法

任务 2 - 创建编辑视图

任务 3 - 运行应用程序

任务 4 - 在专辑编辑器模板上实现下拉列表

任务 5 - 运行应用程序

任务 6 - 实现 HTTP-POST 编辑操作方法

任务 7 - 运行应用程序

练习 4：添加创建视图

任务 1 - 实现 HTTP-GET 创建操作方法

任务 2 - 添加创建视图

任务 3 - 运行应用程序

任务 4 - 实现 HTTP-POST 创建操作方法

任务 5 - 运行应用程序

练习 5：处理删除

任务 1 - 实现 HTTP-GET 删除操作方法

任务 2 - 运行应用程序

任务 3 - 实现 HTTP-POST 删除操作方法

任务 4 - 运行应用程序

练习 6：添加验证

任务 1 - 添加数据批注

任务 2 - 运行应用程序

练习 7：在客户端使用非干扰 jQuery

任务 1 - 在启用 Unobtrusive jQuery 之前运行应用程序

任务 2 - 启用非干扰客户端验证

任务 3 - 使用非干扰 jQuery 验证运行应用程序

总结

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

附录 B：使用代码片段

反馈

其他资源