• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ASP.NETCore中的jQueryUnobtrusiveAjax帮助器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
在ASP.NETAJAX中防止用户多次提交页面发布时间:2022-07-10
下一篇:
【ASP.NET插件】zyUpload的HTML5上传插件发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap