ASP.NETCore中的jQueryUnobtrusiveAjax帮助器

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最近在ASP.NET Core下写文章管理系统时，准备在分页显示文章内容时，使用Ajax。网上找了篇帖文，简单翻一下，仅供自己查阅。

原链接：https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/

原标题：jQuery Unobtrusive Ajax Helpers in ASP.NET Core

原作者：Anuraj

本贴讲述了如何在ASP.NET Core中获取jQuery Unobtrusive Ajax帮助器。AjaxHelper类为用AJAX渲染HTML视图提供支持。如果你想将现有的ASP.NET MVC项目迁移到ASP.NET Core MVC，却没有现成的标记帮助器可供替换，取而代之的是ASP.NET Core团队建议使用data-*属性。所有现存的@Ajax.Form属性都可用于data-*属性。

要使用它，你首先需要引用jquery和jquery.unobtrusive-ajax脚本，可以通过bower下载并安装它。

这是通过bower安装该脚本库的命令:

bower install Microsoft.jQuery.Unobtrusive.Ajax

一旦你安装了该脚本，你就可以在_layout.cshtml文件引用它：

<script src="~/lib/Microsoft.jQuery.Unobtrusive.Ajax/jquery.unobtrusive-ajax.min.js"></script>

以下是可用于迁移@Ajax.Form帮助器的属性：

AjaxOptions	HTML attribute
Confirm	data-ajax-confirm
HttpMethod	data-ajax-method
InsertionMode	data-ajax-mode
LoadingElementDuration	data-ajax-loading-duration
LoadingElementId	data-ajax-loading
OnBegin	data-ajax-begin
OnComplete	data-ajax-complete
OnFailure	data-ajax-failure
OnSuccess	data-ajax-success
UpdateTargetId	data-ajax-update
Url	data-ajax-url

你像这样在表单（Form）元素中添加这些属性:

<form asp-controller="Home" asp-action="SaveForm" data-ajax="true" data-ajax-method="POST">
</form>

下列代码，将在提交表单时显示进度指示器，一旦完成（onComplete）、成功(onSuccess)或失败(Failed)，它将显示警告消息。

var results = $("#Results");
var onBegin = function(){
    results.html("<img src=\"/images/ajax-loader.gif\" alt=\"Loading\" />");
};

var onComplete = function(){
    results.html("");
};

var onSuccess = function(context){
    alert(context);
};

var onFailed = function(context){
    alert("Failed");
};

这是HTML表单：

<form asp-controller="Home" asp-action="SaveForm"
    data-ajax-begin="onBegin" data-ajax-complete="onComplete"
    data-ajax-failure="onFailed" data-ajax-success="onSuccess"
    data-ajax="true" data-ajax-method="POST">
    <input type="submit" value="Save" class="btn btn-primary" />
    <div id="Results"></div>
</form>