在ASP.NET Core中使用jQuery Unobtrusive Ajax

这篇文章是关于在 ASP.NET Core 中获取 jQuery Unobtrusive Ajax helpers 的。 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>

这是代码，它会在提交表单时显示进度指示器，一旦完成，成功或失败，它都会显示提示消息。

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>