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文件引用它:


 
以下是可用于迁移@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("\"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>

 

你可能感兴趣的