Ajax.BeginForm()知多少

在ASP.NET MVC中，Ajax.BeginForm扮演着异步提交的重要角色。其中就有五个重载方法，但是在实际应用中，你未必使用的得心应手，今天我们就从主要的参数来一探究竟。

一、actionName

用于指定请求地址的Action名称。

二、controllerName

用于指定请求地址的Controller名称。

三、routeValues

用来传递参数，支持两种数据类型（两种传参方式）：

• object类型可以在使用时直接以匿名类方式声明，使用非常方便
  举例：new { id = 1, type = 1 }
• RouteValueDictionary类型实现了IDictionary<string, object>接口，因此在使用时可以用键值对方式声明
  举例：new RouteValueDictionary{ {"id", 1}, {"type", 1} }

四、htmlAttributes

用于指定生成form表单的html属性。也支持两种赋值方式：

• 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">

五、ajaxOptions

看到这么多的参数，是不是一脸懵逼，且听我一一讲解。

1. Confirm，就是在提交时会弹出一个确认框，一般不常用。
   new AjaxOption(){Confirm:"确认提交？"}
2. HttpMethod，就是设置请求类型，默认为post。
   new AjaxOption(){HttpMethod = "GET"}
3. UpdateTargetId，就是设置请求返回的数据/元素更新到哪个Dom元素中。
4. InsertionMode，设置返回结果更新指定Dom元素的方式，默认为Replace。
5. LoadingElementId，LoadingElementDuration设置提交实际的加载动画效果。
6. Url，用来当未指定Action，Controller时，直接在AjaxOption中指定请求的Url。@using (Html.BeginFrom( new AjaxOptions(){Url= '/Tasks/Create'})){ }
7. AllowCache，标记是否使用缓存。
8. OnBegin, OnComplete, OnFailure, OnSuccess，是用于指定回调的js函数。

下面我将具体讲解第5和第8个的具体用法。

设置Form提交动画加载效果

• 定义加载动态元素，并设置css样式：div#loading { display: none; }

<div id="loading"> ![](~/Content/Images/ui-loader-white-16x16.gif)</div>

• 在form中指定LoadingElementId

@using (Ajax.BeginForm(MVC.Account.Login(), 
new AjaxOptions { 
OnSuccess = "onLoginSuccess",
LoadingElementId = "loading", 
OnBegin = "onLoginBegin" }, new { @id = "loginForm" })){ }

• 定义js函数，隐藏加载动画。

<script type="text/javascript"> 
function onLoginBegin() { 
// Disable the button and hide the other image here 
 // or you can hide the whole div like below 
$('#logbtn').hide(); }
</script>

设置JS回调函数

但其实这几个js方法大家未必用得好。先来看看常规用法，其中指定的js函数均未传参。

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnBegin = "onBegin",
    OnSuccess = "onSuccess",
    OnFailure = "onFailure",
    OnComplete = "onComplete"
}))
{
}
//Js函数
function onSuccess() {
    alert('Success!');
}

如果我想当请求失败时，弹出返回的错误提示并清空form表单怎么办呢？

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnFailure = "onFailure("#formid")",
}))
{
}
//Js函数
function onFailure(id) {
    alert("Somthing is wrong!");    //alert弹出错误提示信息。
    var $form = $(id);
    $form.reset();//清空form表单。    
}

这样实现并没有拿到返回的错误数据，那到底如何传参呢？
经过参考jquery.unobtrusive-ajax.js 源码，终于弄清，默认的传参是怎样的。

OnBegin – xhr
OnComplete – xhr, status
OnSuccess – data, status, xhr
OnFailure – xhr, status, error

也就是说，默认未指定参数的js函数实际等同于：

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnBegin = "onBegin(xhr)",
    OnSuccess = "onSuccess(data, status, xhr)",
    OnFailure = "onFailure(xhr, status, error)",
    OnComplete = "onComplete(xhr, status)"
}))
{
}

看到这里，我们再来看看上例【如果我想当请求失败时，弹出返回的错误提示并清空form表单怎么办呢？】

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnFailure = "onFailure(xhr, status, error,"#formid")",
}))
{
}
//Js函数
function onFailure(xhr, status, error,id) {
    alert(error);    //alert弹出错误提示信息。
    var $form = $(id);
    $form.reset();//清空form表单。    
}

通过默认的参数，成功拿到错误信息，并且可传递自定义参数。

读到这里，觉得不错，就给个推荐吧！

简书笔记