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

项目
07/13/2023

在 ASP.NET MVC 4 模型和数据访问 动手实验室中，你一直在加载和显示数据库中的数据。在本动手实验中，你将向 音乐应用商店 应用程序添加编辑该数据的功能。

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

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

最后，你将允许用户删除相册，还可以通过验证其输入来防止他们输入错误数据。

本动手实验假定你已具备 ASP.NET MVC 的基础知识。如果以前未使用 过 ASP.NET MVC ，我们建议你 ASP.NET MVC 基础知识 动手实验室。

本实验室将指导你完成前面所述的增强功能和新功能，这些增强功能和新功能通过对源文件夹中提供的示例 Web 应用程序应用少量更改。

注意

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

目标

在本Hands-On实验室中，你将了解如何：

创建控制器以支持 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：使用代码片段”中的附录。

练习

以下练习构成此Hands-On实验室：

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

注意

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

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

练习 1：创建 Store Manager 控制器及其索引视图

在本练习中，你将了解如何创建新的控制器以支持 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 类。由于指示要添加用于读/写的操作，为这些操作创建存根方法时，会填充 TODO 注释，提示包含特定于应用程序的逻辑。

任务 2 - 自定义 StoreManager 索引

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

在 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 控制器返回的相册列表。

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

从 Index 方法中添加 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 列。此外，它还更改 GenreId 和 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 帮助程序

在此任务中，你将向在 MVC 视图中公开的 HTML 对象添加新方法 Truncate ASP.NET。为此，你将对 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 - 截断页面中的文本

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

打开 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 调用。

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

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

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

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

打开 Source/Ex3-CreatingTheEditView/Begin/ 文件夹中的 Begin 解决方案。否则，可以继续使用通过完成上一练习获取的 End 解决方案。
1. 如果打开了提供的 Begin 解决方案，则需要下载一些缺少的 NuGet 包，然后才能继续。为此，请单击“ 项目 ”菜单，然后选择“ 管理 NuGet 包”。
2. 在 “管理 NuGet 包 ”对话框中，单击“ 还原 ”以下载缺少的包。
3. 最后，单击“生成 | 解决方案”生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是，无需交付项目中的所有库，从而减小了项目大小。使用 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，你将能够在首次运行项目时下载所有必需的库。这就是在从本实验室打开现有解决方案后必须运行这些步骤的原因。
打开 StoreManagerController 类。为此，请展开 Controllers 文件夹，然后双击 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.MvcSelectList ，而不是 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. 如果模型无效，它将使用 GenreId 和 ArtistId 填充 ViewBag，然后它将返回包含接收的 Album 对象的视图，以允许用户执行任何所需的更新。

任务 7 - 运行应用程序

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

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

更新相册

练习 4：添加创建视图

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

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

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

任务 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 类。为此，请展开 Controllers 文件夹，然后双击 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) ”，然后从“基架模板”下拉列表中选择“创建”。保留其他字段的默认值，然后单击“ 添加”。

添加 Create 视图

更新 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 创建操作方法

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

如果需要，请关闭浏览器以返回到 Visual Studio 窗口。打开 StoreManagerController 类。为此，请展开 Controllers 文件夹，然后双击 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);
}

注意

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

任务 5 - 运行应用程序

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

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

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

新建相册已创建

练习 5：处理删除

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

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

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

在此任务中，你将实现 DELETE 操作方法的 HTTP-GET 版本，以检索相册的信息。

打开 Source/Ex5-HandlingDeletion/Begin/ 文件夹中的 Begin 解决方案。 否则，可以继续使用通过完成上一练习获取的 End 解决方案。
1. 如果打开了提供的 Begin 解决方案，则需要下载一些缺少的 NuGet 包，然后才能继续。为此，请单击“ 项目 ”菜单，然后选择“ 管理 NuGet 包”。
2. 在 “管理 NuGet 包 ”对话框中，单击“ 还原 ”以下载缺少的包。
3. 最后，单击“生成 | 解决方案”生成解决方案。
  
  注意
  
  使用 NuGet 的优点之一是，无需交付项目中的所有库，从而减小了项目大小。使用 NuGet Power Tools，通过在 Packages.config 文件中指定包版本，你将能够在首次运行项目时下载所有必需的库。这就是在从本实验室打开现有解决方案后必须运行这些步骤的原因。
打开 StoreManagerController 类。为此，请展开 Controllers 文件夹，然后双击 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);
}
```
右键单击 Delete 操作方法，然后选择“ 添加视图”。此时会显示“添加视图”对话框。
在“添加视图”对话框中，验证视图名称是否为 “删除”。选择“创建强类型视图”选项，然后从“模型”类下拉列表中选择“专辑 (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 类。为此，请展开 Controllers 文件夹，然后双击 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 属性成为 View 中的必填字段。

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 属性，该属性指向数据批注的 AlbumMetaData 类。以下是用于批注相册模型的一些数据注释属性：

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

任务 2 - 运行应用程序

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

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

”

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

“编辑”页中的验证字段

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

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

注意

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

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

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

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

客户端验证已禁用

在浏览器中，打开 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/“创建 ”并单击“ 创建 ”，而无需填写表单以验证是否收到验证消息：

启用了 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>        
...

注意

对于每个客户端验证规则，Untrusive jQuery 会添加一个具有 data-val-rulename=“message”的属性。下面是 Untrusive 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; }

使用 Untrusive 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" />

总结

通过完成此Hands-On实验室，你已了解如何让用户使用以下命令更改数据库中存储的数据：

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

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

转到 [https://go.microsoft.com/?linkid=9810169] (https://go.microsoft.com/?linkid=9810169) 。或者，如果已安装 Web 平台安装程序，则可以打开它并搜索产品“Visual Studio Express 2012 for Web with Windows Azure SDK”。
单击“ 立即安装”。如果没有 Web 平台安装程序 ，将重定向到先下载并安装它。
Web 平台安装程序打开后，单击“安装”开始安装。

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

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

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

安装已完成
单击“ 退出 ”关闭 Web 平台安装程序。
若要打开 web Visual Studio Express，请转到“开始”屏幕并开始编写“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. 右键单击要插入代码片段的位置。

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

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

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

通过单击列表中的相关代码段

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

Share via

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

目标

先决条件

设置

练习

练习 1：创建 Store Manager 控制器及其索引视图

任务 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 - 在启用 Untrusive jQuery 之前运行应用程序

任务 2 - 启用不显眼的客户端验证

任务 3 - 使用非引人注目的 jQuery 验证运行应用程序

总结

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

附录 B：使用代码片段

反馈

反馈

其他资源