jQuery Unobtrusive Ajax Helpers怎样在ASP.NET Core使用

江小编 • 2019-03-24 11:12 • IT江湖

ASP.NET Core使用jQuery Unobtrusive Ajax Helpers，这篇文章是关于在ASP.NET Core中获取jQuery Unobtrusive Ajax助手。AjaxHelper类表示支持在视图中的AJAX场景中呈现HTML。如果要将现有的ASP.NET MVC项目迁移到ASP.NET Core MVC，但没有可用的标记帮助程序作为替换。相反，ASP.NET Core团队建议使用data-*属性。所有现有@Ajax.Form属性都可用作data-*属性。

jQuery Unobtrusive Ajax Helpers

要首先使用它，您需要参考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>

加入电报群