在ASP.NET
MVC中,Ajax.BeginForm扮演着异步提交的第③剧中人物。个中就有四个重载方法,然而在实际应用中,你未必使用的一箭穿心,明天大家就从根本的参数来一商讨竟。
图片 1

一、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

图片 2

看看如此多的参数,是否一脸懵逼,且听小编逐一讲解。

  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函数。

下边作者将具体讲解第⑤和第⑦个的实际用法。

安装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表单。    
}

经过默许的参数,成功获得错误新闻,并且可传递自定义参数。

读到那里,觉得不错,就给个推荐呢!

简书笔记

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图