Asp.net Core 中的 Ajax 助手标签文档

Question

Asp.net Core 中是否有任何 Ajax 助手标签文档的链接。我正在尝试使用 asp.net core 学习 ajax，但我没有找到它的文档。 在 asp.net mvc 中，我们使用@Ajax.Form，然后使用 AjaxOptions 方法处理 ajax。经过几个小时的搜索，我找到了这个链接。 https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/ 在此链接中，有一种在 asp.net 核心中使用 ajax 的方法。 我在我的项目中实施它并成功。 然后我搜索它的文档，但我什么也没找到。 我想要它的文档链接。请任何人帮助它的文档

Answer 1

在 ASP.NET Core 中没有像 @Ajax.Form 这样的服务器端助手。您可能可以为类似的功能编写自己的标签助手，但我还没有看到有人这样做。一般的想法是当你想要客户端行为时编写实际的 JavaScript。将这些东西隐藏在服务器端魔法背后通常不是最好的主意。

jquery-ajax-unobtrusive 是一个 JavaScript 包，它添加客户端行为以在最终呈现的页面中查找各种属性，从而在标准表单之上添加功能。所以这将是一个完全基于 JavaScript 的解决方案。

不幸的是，似乎没有关于它的文档。您可以查看its source code 以了解可能或不可能的情况。

---

jquery-ajax-unobtrusive 文档

通过快速查看源代码（免责声明：我自己没有测试功能），这似乎是包支持的数据属性和可用功能：

• data-ajax="true" – 启用表单的功能。
• data-ajax-update – 使用 AJAX 结果更新的元素的选择器，使用模式。
• data-ajax-mode
  • data-ajax-mode="before" – Prepends 元素的数据。
  • data-ajax-mode="after" – Appends 元素的数据。
  • data-ajax-mode="replace-with" – Replaces 包含数据的元素。
  • 否则sets the HTML content的元素到数据。
• data-ajax-confirm – 向用户显示confirm 表单提交的消息。
• data-ajax-loading – 加载时显示的元素选择器。
• data-ajax-loading-duration（默认值：0）- 加载元素的 show/hide 的动画持续时间。
• data-ajax-method – 允许覆盖 AJAX 请求的 HTTP 方法。
• data-ajax-url – 允许覆盖 AJAX 请求的 URL。
• data-ajax-cache – 设置为除 "true" 之外的其他值以禁用 jQuery AJAX cache parameter。
• data-ajax-begin – 请求开始前的回调函数（参数：xhr）
• data-ajax-complete – 请求完成时的回调函数（参数：xhr, status）
• data-ajax-success – 请求成功时的回调函数（参数：data、status、xhr）
• data-ajax-failure – 请求失败时的回调函数（参数：xhr、status、error）

回调函数相当于 jQuery 的 beforeSend、complete、success 和 failure。从外观上看，您可以使用指向函数的 JavaScript 对象路径指定回调。

例如data-ajax-success="foo.bar.onSuccess" 将调用函数foo.bar.onSuccess()，即它将在window 中查找对象foo，获取其bar 成员，然后调用onSuccess。

Answer 2

https://github.com/Behrouz-Goudarzi/AjaxTagHelper

AjaxTagHelper

在 aspnet core 中使用 Tag Helper 使用链接和 ajax 表单的简单解决方案

首先，将 AjaxTagHelper 类从 Extensions 文件夹复制到您的项目中。

其次，从 wwwroot 的 js 文件夹中复制 AjaxTagHelper.js 文件并将其添加到您的项目中。

然后执行以下操作：打开 viewImports 文件并添加以下代码

@using AjaxTagHelper.Extensions
@using AjaxTagHelper
@using AjaxTagHelper.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AjaxTagHelper

要使用 Action Ajax，请添加以下代码而不是标记。

  <ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="@Model.Id"
                 class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
        Delete
    </ajax-action>

使用以下代码使用 AJAX 将表单发送到服务器。

<div class="row">
    <form id="frmCreate" class="col-sm-9">
        <div class="row">
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Name" name="Name" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Family" name="Family" class="input-group" type="text" />
            </div>
            <div class="col-sm-4 form-control">
                <input placeholder="Enter Email@site.com " name="Email" class="input-group" type="email" />
            </div>
        </div>
    </form>
    <div class="col-sm-3">
        <ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
                     class="btn btn-sm btn-success">
            Create
        </ajax-button>
    </div>
</div>

最后添加需要查看的脚本，查看下方代码

<script>
    function SuccessCreate(data) {
        console.log(data);
        $("#tbodyPerson").append(data);


    }
    function SuccessDelete(data) {
        $("#tr" + data.id).fadeOut();
    }
</script>
<script src="~/js/AjaxHelper.js"></script>

Answer 3

如果您正在 Core 中寻找旧式 Ajax 助手，这个 Nuget 包可能会有所帮助 -

AspNetCore.Unobtrusive.Ajax

您可以使用 -

安装它

PM> Install-Package AspNetCore.Unobtrusive.Ajax

这将使您能够使用类似的帮助器

@Html.AjaxActionLink()
@Html.AjaxBeginForm()
@Html.AjaxRouteLink()

这里是 github 的详细信息。您可以在其中找到更多文档。

Github Url to the project