data ajax begin,Ajax.BeginForm()知多少

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

javascript

1、actionName

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

2、controllerName

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

3、routeValues

用来传递参数，支持两种数据类型(两种传参方式)：html

object类型能够在使用时直接以匿名类方式声明，使用很是方便

举例：new { id = 1, type = 1 }

RouteValueDictionary类型实现了IDictionary接口，所以在使用时能够用键值对方式声明

举例：new RouteValueDictionary{ {"id", 1}, {"type", 1} }

4、htmlAttributes

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

object类型能够在使用时直接以匿名类方式声明，使用很是方便

举例：new{id = "frm", @class = "cls" }因为class是C#中的关键字，所以须要在前面加@符号

IDictionary类型使用灵活，能够在一个地方声明，多个地方调用，或修改后使用，举例：jquery Dictionary htmlAttr = new Dictionary

{

{"id","frm"},

{"class", "cls"}

};

生成的代码：

web

5、ajaxOptions

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

Confirm，就是在提交时会弹出一个确认框，通常不经常使用。

new AjaxOption(){Confirm:"确认提交？"}

HttpMethod，就是设置请求类型，默认为post。

new AjaxOption(){HttpMethod = "GET"}

UpdateTargetId，就是设置请求返回的数据/元素更新到哪一个Dom元素中。

InsertionMode，设置返回结果更新指定Dom元素的方式，默认为Replace。

LoadingElementId，LoadingElementDuration设置提交实际的加载动画效果。

Url，用来当未指定Action，Controller时，直接在AjaxOption中指定请求的Url。@using (Html.BeginFrom( new AjaxOptions(){Url= '/Tasks/Create'})){ }

AllowCache，标记是否使用缓存。

OnBegin, OnComplete, OnFailure, OnSuccess，是用于指定回调的js函数。

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

设置Form提交动画加载效果

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


在form中指定LoadingElementId @using (Ajax.BeginForm(MVC.Account.Login(),

new AjaxOptions {

OnSuccess = "onLoginSuccess",

LoadingElementId = "loading",

OnBegin = "onLoginBegin" }, new { @id = "loginForm" })){ }

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

// Disable the button and hide the other image here

// or you can hide the whole div like below

$('#logbtn').hide(); }

设置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表单。

}

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

读到这里，以为不错，就给个推荐吧！

https://www.cnblogs.com/sheng-jie/p/6305385.html