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

2019-05-11 08:00:00 · 飞浪

本指南中介绍的案例研究使用一个 AjaxHelper 类方法来提供更新网页部分内容所需的异步功能，而无需刷新整个页面。立即探索更多！

介绍

许多 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) 设计模式。

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

项目	应用层
Blip.数据	数据上下文和存储库
Blip.实体	数据实体
Blip.Web	用户界面（视图）和业务逻辑（控制器）

案例研究应用程序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中，应用程序层位于不同的项目中，如下所示：

应用层	项目	成分
用户界面演示	Blip.Web	视图
用户界面数据	Blip.实体	视图模型
业务逻辑	Blip.Web	控制器
数据实体	Blip.实体	模型
数据接口	Blip.数据	存储库
数据存储	Blip.数据	数据上下文

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

视图和部分视图 (.cshtml)

项目	文件夹
Blip.Web	浏览次数/客户

成分	文件
客户/编辑父视图	编辑.cshtml
客户信息部分视图	EditCustomerPartial.cshtml
地址类型选择部分视图	地址类型部分.cshtml
电子邮件地址部分视图	创建电子邮件地址部分.cshtml
邮政地址部分视图	创建邮政地址部分.cshtml

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

查看模型摘要

项目	文件夹
Blip.实体	客户.ViewModels

成分	文件
客户/编辑父视图	（没有任何）
客户信息部分视图	客户编辑视图模型.cs
地址类型选择部分视图	地址类型视图模型.cs
电子邮件地址部分视图	EmailAddressViewModel.cs
邮政地址部分视图	邮政地址编辑视图模型.cs