这篇文章是关于在 ASP.NET Core 中获取 jQuery Unobtrusive Ajax helpers 的。 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>
这是代码,它会在提交表单时显示进度指示器,一旦完成,成功或失败,它都会显示提示消息。
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>