ASP.NET MVC - 使用 Ajax Helpers 和 Razor Partial Views

许多 Web 开发人员面临的挑战是设计用户界面，在收集用户数据并动态创建新的页面元素的同时提供交互式体验。

AJAX（异步 JavaScript 和 XML）技术集合为 Web 应用程序提供了一种异步发送和接收来自服务器数据的方法，无需刷新页面或干扰其外观。通过将表示层与数据交换层分离，AJAX（或 Ajax）使 Web 应用程序能够动态更改内容，而无需重新加载整个页面。

随着现代网络浏览器对 Ajax 的支持越来越广泛，Ajax 已使网站用户界面实现了许多增强。广泛使用的 jQuery JavaScript 库对 Ajax 的支持简化了 Ajax 的实现。

Microsoft 通过 System.Web.Mvc 和 System.Web.Mvc.Ajax 命名空间中的类为 ASP.NET MVC 中的 Ajax 功能提供支持。此组中的主要类之一是AjaxHelper<TModel>，正如 Microsoft 所述，“它包括在 MVC 应用程序中的 ASP.NET AJAX 中提供客户端功能的方法，例如创建异步表单和呈现链接。AjaxHelper 类支持异步部分页面更新。”

本指南中介绍的案例研究使用一个 AjaxHelper 类方法BeginForm来提供更新网页部分内容所需的异步功能，而无需刷新整个页面。其余功能来自基本 ASP.NET MVC 组件，如控制器操作和部分视图。

本指南中显示的示例来自GitHub上的案例研究项目。您可以下载并运行该项目以查看此处演示的技术的实际应用，并自行进行实验。

案例研究是从默认 ASP.NET .NET Framework MVC 模板开发的多项目 Visual Studio 2017 解决方案。它使用 Entity Framework 6.1 和存储库以及模型视图视图模型 (MVVM) 设计模式。

该解决方案由三个项目组成，构成应用程序的不同层：

案例研究应用程序BlipAjax是一个简单的系统，用于收集、存储和检索有关客户的地理信息和其他信息。从设计或编码的角度来看，它还未准备好投入生产；它的存在是为了说明本指南中讨论的概念。

更重要的是，Entity Framework 和存储库以及 MVVM 设计模式都是可用于生产的工具。示例项目的构建方式是，您可以从 MVC 模板开始，并以示例项目为指导，使用这些资源组合您自己的解决方案。

BlipAjax 实体的结构很简单，有位于特定国家和地区的客户。他们可以有多个电子邮件地址和多个邮政地址。邮政地址同样位于国家和地区。实体关系图如下所示：

Blip.Data.Migrations中 Configuration 类的 Seed方法包含用于填充国家和地区列表的数据。

BlipAjax 的用户界面与数据模型一样简单。由于该应用程序是基于 MVC 默认模板构建的，因此主页看起来几乎相同：

客户数据库功能有一个新的标题和按钮：

最后，对于客户，选择“编辑”将打开客户编辑页面。此页面实现了本指南中描述的 Ajax 功能。

“地址类型”下拉菜单允许用户选择“电子邮件”或“邮政”地址。当用户按下“选择”时，相关部分视图AddressTypePartial.cshtml的Ajax HTTP POST 功能将被激活，页面将更新为用于创建电子邮件地址的部分视图CreateEmailAddressPartial.cshtml或用于创建邮政地址的部分视图CreatePostalAddressPartial.cshtml 。

这是选择了电子邮件地址选项的“编辑客户信息”视图：

选择邮政地址选项后，“编辑客户信息”如下所示：

ASP.NET MVC Ajax Helper 类提供与客户端框架类似的功能，而无需增加开发开销。开发人员只需使用相对较少的 C# 即可创建灵活、响应迅速的用户界面元素。

关注点分离和 HTML 页面不能有嵌套视图的限制都决定了客户/编辑视图不能有自己的视图模型。相反，视图的每个表单部分都由具有自己的视图模型的部分视图组成。

在随附的示例解决方案BlipAjax中，应用程序层位于不同的项目中，如下所示：

尽管有许多文件组成单页客户/编辑页面，但文件之间的关系很容易辨别。

请注意，在示例应用程序中，页面上一次只会出现一个地址部分视图，即电子邮件部分视图或邮政地址部分视图。