之前的form表单写法,为什么现在要使用ajax.beginform异步表单提交?
首先了解form表单提交与异步表单提交有如下几种区别:
1. Ajax在提交、请求、接收时,都是异步进行的,网页不需要刷新;
Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的;
2. Ajax在提交时,是在后台新建一个请求;
Form却是放弃本页面,而后再请求;
3. Ajax必须要使用JS来实现,不启用JS的浏览器,无法完成该操作;
Form却是浏览器的本能,无论是否开启JS,都可以提交表单;
4. Ajax在提交、请求、接收时,整个过程都需要使用程序来对其数据进行处理;
Form提交时,却是根据你的表单结构自动完成,不需要代码干预;
总的来说就是异步表单提交更便捷!
如何使用异步提交?
使用条件:
1:webconfig 配置
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
2:引用js
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js">
</script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
3:使用参数详解
url 方法路径(控制器,方法) 参数 样式 ajax一些属性(提交方式,替换什么元素)
@using (Ajax.BeginForm("SearchAAOptional", new { pageIndex = Model.PageIndex, key = ViewBag.Key }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "tbodyOption" }))
{
<table id="tableforsearch">
<tr>
<td>
</td>
</tr>
</table>
}
URL 和参数 样式 与html 扩展写法都一样 主要是ajax一些属性
AjaxOptions :
Confirm | string | 在请求之前会弹出一个提示框,是否确认提交 |
HttpMethod | string | 设置请求类型 Get Post |
UpdateTargetId | String | 标明html中一元素的id,把请求返回的数据/元素更新到该元素中 |
InsertionMode | enum | 把请求结果以何种方式更新到Dom元素中 ①Replace ②InsertBefore ③InsertAfter 不设置的情况下,默认是Replace,只有在UpdateTargetId被设置后才有效 |
LoadingElementId | string | 标明html中一元素的id,在请求过程中,该元素会显示出来,请求结束后又隐藏 |
LoadingElementDuration | Int | 控制Loading动画在显示/隐藏时的动画持续时间,单位为毫秒; 默认情况下,动画将淡入淡出;这个时间即淡入淡出的时间(但经测试无效!!!) |
OnBegin | string | 标明js中一function的名称,在Ajax请求发送前,执行该方法,对应JQuery的beforeSend |
OnComplete | String | 标明js中一function的名称,在请求成功时,执行该方法,对应JQuery的complete |
OnFailure | String | 标明js中一function的名称,在请求失败时,执行该方法,对应JQuery的error |
OnSuccess | String | 标明js中一function的名称,无论请求成功与否,都在请求完成时,执行该方法,对应JQuery的success |
Url | String | 请求的地址 |
AllowCache | Bool | 是否使用缓存 |
1:Confirm,就是在提交时会弹出一个确认框,一般不常用。
new AjaxOption(){Confirm:"确认提交?"}
2:HttpMethod,就是设置请求类型,默认为post。
new AjaxOption(){HttpMethod = "GET"}
3:UpdateTargetId,就是设置请求返回的数据/元素更新到哪个Dom元素中。
InsertionMode,设置返回结果更新指定Dom元素的方式,默认为Replace。
4:LoadingElementId,LoadingElementDuration设置提交实际的加载动画效果。
5:Url,用来当未指定Action,Controller时,直接在AjaxOption中指定请求的Url。@using (Html.BeginFrom( new AjaxOptions(){Url= '/Tasks/Create'})){ }
6:AllowCache,标记是否使用缓存。
7:OnBegin, OnComplete, OnFailure, OnSuccess,是用于指定回调的js函数。