jQuery Unobtrusive AJAX 库已经存在了将近 10 年，并且在 ASP.NET MVC 3.0 中首次引入，当时 HTML5 自定义data-* 属性的采用变得司空见惯并在浏览器中得到广泛支持。 它是一个小型库，缩小后只有 4kb，它利用了 jQuery 的 AJAX 功能。 它现在是 ASP.NET Core 的一部分，托管在 GitHub 上。

Unobtrusive AJAX 与其他非侵入式库一样，通过检查选定的 HTML 元素是否存在特定的自定义data-属性，然后在单击这些元素时将 jQuery 的 AJAX 函数附加到这些元素。 从本质上讲，它节省了很多（如果不是全部的话）样板代码，否则您将不得不编写这些代码来触发 AJAX 请求并处理响应。

您可以从 npm（npm i jquery-ajax-unobtrusive 从 Visual Studio 中的包管理器控制台）获取 Unobtrusive AJAX，或者您可以使用Visual Studio 提供的多种方法之一从 Nuget 安装它。 一旦你有了它，你可以在 wwwroot/lib 中为它创建一个新文件夹并将文件复制到那里：

然后你可以在你想直接使用它的页面中引用它，或者作为 CDN 托管版本的后备：

自定义属性

下表详细说明了控制 jQuery Unobtrusive AJAX 行为的自定义属性：

属性

描述

data-ajax

必须设置为 true 才能在目标元素上激活Unobtrusive Ajax。

data-ajax-confirm

获取或设置在提交请求之前显示在确认窗口中的消息。

data-ajax-method

获取或设置 HTTP 请求方法（“Get”或“Post”）。

data-ajax-mode

获取或设置指定如何将响应插入目标DOM元素的模式。 默认为替换. 有效值为 before, after 和replace. 默认为 replace

data-ajax-loading-duration

获取或设置一个值（以毫秒为单位），该值控制显示或隐藏加载元素时的动画持续时间。

data-ajax-loading

获取或设置加载 Ajax 函数时显示的 HTML 元素的 id 属性。

data-ajax-begin

获取或设置要在更新页面之前立即调用的 JavaScript 函数的名称。

data-ajax-complete

获取或设置要在响应数据已实例化但页面更新之前调用的 JavaScript 函数。

data-ajax-failure

获取或设置页面更新失败时要调用的 JavaScript 函数。

data-ajax-success

获取或设置在页面成功更新后调用的 JavaScript 函数。

data-ajax-update

使用来自服务器的响应获取或设置要更新的 DOM 元素的 ID。

data-ajax-url

获取或设置要向其发出请求的 URL。

以下示例显示了一个表单，该表单具有转换为 AJAX 提交所需的最少属性：

@page@model IndexModel<form method="post" data-ajax="true" data-ajax-method="post">    Name: <input type="text" name="name" /><br>    <input type="submit"/></form>

没有指定action，因此表单值将发布到页面的 URL，它们可以在 OnPost 处理程序中处理。 请注意，表单的方法属性被指定为 post，以及自定义的 data-ajax-method 属性。 在没有应用action属性的情况下，这是确保生成请求验证令牌隐藏字段并将其包含在表单中所必需的。 如果没有这个，表单帖子将导致 400 Bad Request 状态代码，因为它们将无法通过请求验证测试：

data-ajax-confirm 属性采用一个字符串，表示在提交表单之前向用户显示确认提示中的消息：

<form method="post" data-ajax="true" data-ajax-method="post" data-ajax-confirm="Are you sure?">    Name: <input type="text" name="name" /><br>    <input type="submit"/></form>

当使用 jQuery 发出 AJAX 请求时，将返回一个 jqXHR 对象。 这可用于您通过 data-ajax-complete、data-ajax-success 和 data-ajax-failure 属性指定的回调函数。

下一个示例显示如何通过回调函数的参数访问 jqXHR 对象：

@page@model IndexModel<form method="post" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed">    Name: <input type="text" name="name" /><br>    <input type="submit"/></form>@section scripts{     <script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js"></script>    <script>        completed = function (xhr) {            alert(`Hi ${xhr.responseText}!`);        };    </script>}

PageModel 包含一个绑定属性，表示提交的名称并将其作为响应返回：

public class IndexModel : PageModel{    [BindProperty]    public string Name { get; set; }    public IActionResult OnPost()    {        return Content(Name);    }}

当 AJAX post 完成时（成功或失败），完成的函数将以 jqXHR 对象作为参数调用。 响应正文在 responseText 属性中可用。

下一个示例显示如何使用 data-ajax-failure 属性捕获错误：

@page@model IndexModel<form method="post" data-ajax="true" data-ajax-url="/notfound" data-ajax-method="post" data-ajax-failure="failed">    Name: <input type="text" name="name" /><br>    <input type="submit"/></form>@section scripts{     <script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js"></script>    <script>        failed = function (xhr) {            alert(`Status: {xhr.status}, Status Text: {xhr.statusText}`);        };    </script>}

在这种情况下，该提交结果会导致 404 未找到错误，其详细信息将显示在浏览器警报中：

部分更新

data-ajax-update 属性用于指定应随响应更新的 DOM 元素。 传递给它的值是一个标准的 CSS 选择器。 如果多个元素匹配选择器，第一个匹配的元素将被更新。

在此示例中，属性附加到锚元素。 点击将被 jQuery 拦截并异步管理：

@page@model IndexModel<a href="" data-ajax="true" data-ajax-url="/index/partial" data-ajax-update="#panel">Click here</a><div id="panel"></div>

URL 是 Index PageModel 中的命名处理程序方法：

public class IndexModel : PageModel{    public IActionResult OnGetPartial()    {        return new PartialViewResult {             ViewName = "_HelloWorldPartial",             ViewData = this.ViewData         };    }}

_HelloWorldPartial.cshtml 的内容只有一行：

<p>@ViewData["Message"] from the Hello World partial at @DateTime.Now</p>

当链接被点击时，内容被放置在 id 为 panel 的 div 中：

如果您再次单击该链接，现有内容将被新响应替换。 这是未指定 data-ajax-mode 时的默认行为。 如果要插入新内容使其出现在现有内容之前，请将 data-ajax-mode 值设置为 before：

<a href="" data-ajax="true" data-ajax-url="/index/partial" data-ajax-update="#panel" data-ajax-mode="before">Click here</a>

现在，后续点击生成的响应出现在现有内容上方：

将 data-ajax-mode 属性设置为 after 将导致响应结果追加到任何现有内容后面。

显示正在加载的 GIF

有时，出于人性化让用户知道当正在发生某些事情异步操作需要一段时间才能完成时，会显示进度指示。 这通常采用动画 gif 图像或动画字体的形式。 data-ajax-loading 属性指定在进行 AJAX 操作时应显示的元素。 data-ajax-loading-duration 属性采用以毫秒为单位的值。 这用于确定使加载元素可见然后隐藏它需要多长时间。 加载元素在可见时向下滑动并向右滑动。 如果未指定值，则默认值为 400。

在此示例中，来自 FontAwesome 字体集合的转动效果用于显示进度。 它的显示属性最初设置为无。 jQuery 将在发送请求之前删除该设置，然后在完成后重新应用它（无论是否成功）。

<a href="" data-ajax="true" data-ajax-url="/index/partial" data-ajax-update="#panel" data-ajax-loading="#spinner">Click here</a><span id="spinner" style="display:none;"><i class="fas fa-spinner fa-spin"></i></span><div id="panel"></div>

为了模拟长时间运行的操作，处理程序方法被更改为包括对 Thread.Sleep 的调用：

public IActionResult OnGetPartial(){    Thread.Sleep(2000);    return new PartialViewResult    {        ViewName = "_HelloWorldPartial",        ViewData = this.ViewData    };}

这确保动画至少可见 2 秒：