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="https://www.cnblogs.com/moonblogcore/p/~/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=https://www.cnblogs.com/"/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/107312.html

標籤：.NET Core

上一篇：記一次asp.net core 在iis上運行拋出502.5錯誤

下一篇：ASP.Net Core使用Ajax區域更新