Ajax.BeginForm参数详解
使用Ajax.BeginForm
方法会生成一个form
表单,最后以Ajax
的方式提交表单数据;需要用using
把该方法括起来,使系统知道form
表单从何处开始,何处结束。
在ASP.NET MVC中,Ajax.BeginForm扮演着异步提交的重要角色。其中就有五个重载方法,但是在实际应用中,你未必使用的得心应手,今天我们就从主要的参数来一探究竟。
一,Html.BeginForm(actionName,controllerName,method,htmlAttributes){}
注:所有要提交的内容包括按钮都必须在{ }内
参数
actionName
类型:System.String
操作方法的名称。
controllerName
类型:System.String
控制器的名称。
routeValues
类型:System.Object
一个包含路由参数的对象。 通过检查对象的属性,利用反射检索参数。 此对象通常是使用对象初始值设定项语法创建的。
method
类型:System.Web.Mvc.FormMethod
用于处理窗体的 HTTP 方法(GET 或 POST)。
htmlAttributes
类型:System.Object
一个对象,其中包含要为该元素设置的 HTML 特性。
返回值
类型:System.Web.Mvc.Html.MvcForm
<form> 开始标记。
@using (Ajax.BeginForm("AjaxTest",
new AjaxOptions
{
Confirm = "你真的想发一个消息吗?",
HttpMethod = "Post",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "messages",
OnComplete = "ajaxComplete"
}))
{
@Html.Label("message", "信息")<br />
@Html.TextArea("message")<br />
<button type="submit">发送</button>
}
<script>
function ajaxComplete()
{
alert("完成");
}
</script>
有11个方法重载,下面详解该方法的各项参数:
参数一:AjaxOptions
class
类型
说明:配置Ajax
的一些选项
举例:
相关属性详解:
属性 | 类型 | 说明 |
---|---|---|
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
名称
Ajax.BeginForm 的用法
在mvc 项目中,我们经常会用到 Ajax.BeginForm() 标签, 它会生成一个 form 标签,但这个form 标签与 普通的 form 标签不同,它是一个ajax form 标签
Ajax.BeginForm("index","home" ,new AjaxOptions{ Confirm="",HttpMethod="post", InsertionMode=InsertionMode.Replace, LoadingElementDuration=200, LoadingElementId="tb2", OnBegin="begin", OnComplete="complete", OnFailure="error", OnSuccess="success", UpdateTargetId="tb3", Url="/home/index" })
AjaxOptions 参数的含义依次是:
Confirm: string 类型, 获取或设置在提交请求之前显示在确认窗口中的消息
HttpMethod: string 类型 获取或设置Http请求方法( get或post)
InsertionMode: System.Web.Mvc.Ajax.InsertionMode 是个枚举 获取或设置指定响应如何将响应插入目标DOM元素的模式,
有三种,
InsertionMode.InsertAfter:在元素后插入
InsertionMode.InsertBefore 在元素前插入
InsertionMode.Replace 替换元素
LoadingElementDuration:int 类型 单位毫秒, 表示在加载或隐藏元素时,动画持续的时间
LoadingElementId:stting 类型 在加载 Ajax函数时要显示的HTML元素的Id特性
OnBegin:string 类型 在更新页面之前立即调用的 javascript 函数名称
OnComplete: string 类型 在实例化相应数据之后但在更新页面之前,要调用的javascript 函数名称
OnFailure:string 类型 在页面调用失败时,要调用的javascript 函数的名称
OnSuccess:string 类型 在成功更新页面之后,要调用的javascript 函数的名称
UpdateTargetId:string 类型 获取或设置使用服务响应来更新的DOM元素的ID
Url: string 类型, 获取或设置要向其发送请求的URL
Ajax.BeginForm("AjaxTest",
new AjaxOptions
{
Confirm = "你真的想发一个消息吗?",
HttpMethod = "Post",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "messages",
OnComplete = "ajaxComplete"
})
AjaxController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AjaxWebApplication.Controllers
{
public class AjaxController : Controller
{
// GET: Ajax
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult AjaxTest(string message)
{
return PartialView((object)message);
}
}
}
Index.cshtml
<section>
<h3>使用AJAX ASP.NET MVC的示例</h3>
</section>
<section>
<div id="messages">
</div>
@using (Ajax.BeginForm("AjaxTest",
new AjaxOptions
{
Confirm = "你真的想发一个消息吗?",
HttpMethod = "Post",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "messages",
OnComplete = "ajaxComplete"
}))
{
@Html.Label("message", "信息")<br />
@Html.TextArea("message")<br />
<button type="submit">发送</button>
}
<script>function ajaxComplete() {
alert("完成");
}</script>
</section>
通过 HTTP 请求加载远程数据,jQuery 的底层 Ajax 实现。
1,$.ajax()方法是jQuery中最底层的Ajax实现,load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构造的,它的语法为:$.ajax(options)
示例:
$.ajax({
type: “GET”,//设置请求方式
url: “9-8.js”, //设置请求的URL
dataType: “script”//设置返回数据的类型
})
2,用法举例
function Ajax(){ $.ajax({
type: "GET",
url: "9-14.asp",
data: "user="+escape($("#user").val())+ "&comment="+escape($("#comment").val()),
beforeSend:function(){ $("#target").html("<img src='loading.gif' /><br>正在载入…");},
error:function(){$("#target").html("<p>载入失败</p>");},
success: function(data){ //请求成功时
$("#target").html(data);
} }); }
beforeSend:发送请求之前调用的回调函数,该函数接受一个惟一的参数,即XMLHttpRequest对象作为参数。
success:在请求成功时调用的回调函数,该函数接受两个参数,第一个参数为服务器返回的数据data,第2个参数为服务器的状态textStatus。
error请求失败时调用的回调函数。
complete请求完成时调用的回调函数(无论请求是成功还是失败),如果同时设置了success或error,则在它们执行完之后才执行complete中的回调函数。
当一个页面中有多个地方都需要利用Ajax方法进行异步通信时,可以利用$.ajaxSetup(options)方法统一设定所有Ajax方法中的参数 $.ajaxSetup({type: "GET", url:"10-13.asp“ });
① $.ajax()方法中的data数据一般不能用$.ajaxSetup(options)方法统一设定,因为传送给服务器的数据是用户在表单中输入的,每次都不同,而$.ajaxSetup(options)方法只会在页面初始化时运行一次,此时用户还没有输入数据,因此会获取不到。
② $.ajaxSetup(options)方法不能设置load()方法的相关操作,如果设置请求类型type为"GET",也不会改变$.post()方法采用POST方式。