当前位置： 移动技术网 > IT编程>开发语言>.net > ASP.NET Core中的jQuery Unobtrusive Ajax帮助器

ASP.NET Core中的jQuery Unobtrusive Ajax帮助器

2019年10月12日  | 移动技术网IT编程  | 我要评论

噬魂天书txt下载,武林群侠传有奖问答,三国凌云传

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

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网