最近在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安装该脚本库的命令:
|
1
|
bower install Microsoft.jQuery.Unobtrusive.Ajax |
一旦你安装了该脚本，你就可以在_layout.cshtml文件引用它：
|
1
|
<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 ></div>
</form>
最近在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安装该脚本库的命令:
|
1
|
bower install Microsoft.jQuery.Unobtrusive.Ajax |
一旦你安装了该脚本，你就可以在_layout.cshtml文件引用它：
|
1
|
<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 ></div>
</form>