在Asp.Net
的MVC
中的语法,在Razor
页面中使用,替代JQuery
的Ajax
使用,方便快捷。
使用Ajax.BeginForm
方法会生成一个form
表单,最后以Ajax
的方式提交表单数据;需要用using
把该方法括起来,使系统知道form
表单从何处开始,何处结束。
有11个方法重载,下面详解该方法的各项参数:
参数一:AjaxOptions
class
类型
说明:配置Ajax
的一些选项
举例:
new AjaxOptions { HttpMethod = "POST", LoadingElementId = "searching", UpdateTargetId = "postContent" }
相关属性详解:
属性 | 类型 | 说明 |
---|---|---|
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 | 是否使用缓存 |
在BeginForm
的11个重载方法中,有一方法中只有AjaxOptions
一个参数,如果不指定Url
,则生成的form
表单的action
属性没有值,就默认把数据提交到当前页,否则就以Url
为请求地址,其他重载方法中都需要指定actionName
及controllerName
(可选)。
参数二:actionName
string
类型
说明:指定请求地址的Action
名称
参数三:routeValues
object
、RouteValueDictionary
类型
说明:将传入到Controller
中方法的参数
支持上述两种数据类型:
object
类型可以在使用时直接以匿名类方式声明,使用非常方便
举例:
new { id = 1, type = 1 }
RouteValueDictionary
类型实现了IDictionary<string, object>
接口,因此在使用时可以用键值对方式声明
举例:
new RouteValueDictionary{ {"id", 1}, {"type", 1} }
生成的路径:/Home/Index/1?type=1
因为“id”是在路由规则中配置的名称,因此显示在路由规则对应的位置,“type”则在问号后面
参数四:htmlAttributes
object
、IDictionary<string, object>
类型
说明:html
属性,生成form
表单时,会把键值对添加到form
表单的属性中;
支持上述两种数据类型:
object
类型可以在使用时直接以匿名类方式声明,使用非常方便
举例:
new{id = "frm", @class = "cls" }
由于class
是C#中的关键字,因此需要在前面加@符号
IDictionary<string, object>
类型使用灵活,可以在一个地方声明,多个地方调用,或修改后使用
举例:
Dictionary<string, object> htmlAttr = new Dictionary<string, object>
{
{"id", "frm"},
{"class", "cls"}
};
生成的代码:
<form action="/Home/Index/1?type=1" class="cls" data-ajax="true" id="frm" method="post">
参数五:controllerName
string
类型
说明:指定请求地址的Controller
名称