取代Ajax.BeginForm的ajax使用方法

Posted 哈哈兮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了取代Ajax.BeginForm的ajax使用方法相关的知识,希望对你有一定的参考价值。

一、前提概要

Asp.net core中已经取消了Ajax.BeginForm,也不会计划出ajax tag helper,所以得利用插件jquery-ajax-unobtrusive,在form中加入相关data-*属性

二、参考资料

https://github.com/aspnet/Mvc/issues/2015

http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-ajax.html

三、使用方法

1、AjaxOptions与HTML属性的对照表:

+------------------------+-----------------------------+
|      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               |
+------------------------+-----------------------------+

 

2、在form中配置

<form asp-controller="ControllerName" asp-action="ActionName"  data-ajax="true" data-ajax-mode="replace" data-ajax-loading="search-info-ajax" data-ajax-update="#info-list" data-ajax-success="testajaxsuccess" data-ajax-method="get">
</form>

<div id="info-list" class="col-md-12">
</div>

 

3、注意事项:

  • data-ajax="true" 必须指定
  • data-ajax-update="#device-info-list" 中的ID必须加上"#"
  • data-ajax-method="get" 中必须指定method
  • data-ajax-mode="replace" 必须指定,选项有replace, before, after


以上是关于取代Ajax.BeginForm的ajax使用方法的主要内容,如果未能解决你的问题,请参考以下文章

form表单和ajax表单提交(Html.BeginForm()Ajax.BeginForm())的差别

如何使用 Ajax.BeginForm OnSuccess 和 OnFailure 方法?

使用 JavaScript 提交 Ajax.BeginForm()

通过 ActionLink 提交 Ajax.BeginForm

MVC小系列Html.BeginForm与Ajax.BeginForm

MVC Ajax.BeginForm 替换奇怪的行为