ASP.NET Core中的jQuery Unobtrusive Ajax幫助器

最近在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>