Ajax.BeginForm()知多少

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

一、actionName

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

二、controllerName

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

三、routeValues

用来传递参数,支持两种数据类型(两种传参方式):

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

四、htmlAttributes

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

  • object类型可以在使用时直接以匿名类方式声明,使用非常方便 举例:new{id = "frm", @class = "cls" }由于class是C#中的关键字,因此需要在前面加@符号
  • IDictionary类型使用灵活,可以在一个地方声明,多个地方调用,或修改后使用,举例: 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表单。    
}

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

读到这里,觉得不错,就给个推荐吧!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JMCui

Linux 学习记录 三(Vim 文书编辑器).

    所有的Unix Like系统都会内建vi文书编辑器,其他的文书编辑器不一定存在,vim是vi的升级版,具有程序编辑的能力,可以主动的以字体颜色辨别语法的...

34050
来自专栏机器学习从入门到成神

Vue.js之组件及其易错点

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

9610
来自专栏天天

$.ajax()

78350
来自专栏python3

python代码风格

上面代码中----表示4个空格,如果用空格键去打,又长又多,很容易出问题,一个小技巧,用Tab代替4个空格,在Pycharm中默认Tab就是4个空格,不用去设置...

14230
来自专栏专业duilib使用+业余界面开发

CEF关闭或者退出时报错崩溃问题原因

21240
来自专栏GreenLeaves

WCF系列教程之WCF实例化

本文参考自http://www.cnblogs.com/wangweimutou/p/4517951.html,纯属读书笔记,加深记忆 一、理解WCF实例化机制...

213100
来自专栏Linux Python 加油站

Linux学习----文本三剑客——sed(马哥教育原创)

我以前的文章介绍过grep了,今天我就来说一下第二个sed,它是stream editor的缩写。在Linux的文本文件中文本存储都是一行,显示时表现的多行其实...

16830
来自专栏分布式系统和大数据处理

.Net Remoting(应用程序域) - Part.1

在互联网日渐普及,网络传输速度不断提高的情况下,分布式的应用程序是软件开发的一个重要方向。在.Net中,我们可以通过Web Service 或者Remoting...

11020
来自专栏PHP在线

URL汉字编码

一、问题的由来 URL就是网址,只要上网,就一定会用到。 一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文 字和符号。比如,世界上有...

48550
来自专栏iOS 开发杂谈

iOS RunTime之一:简介

Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理。Objective-C是基于C语言加入了面向对象特性和消息转...

9310

扫码关注云+社区

领取腾讯云代金券