Ajax.BeginForm的異步提交數據 簡介

 

 

Html.BeginForm與Ajax.BeginForm都是ＭＶＣ架構中的表單元素，它們從字面上可以看到區別，即Html.BeginForm是普通的表單提交，而Ajax.BeginForm是支持異步的表單提交，這對於我們開發者來說是一個福音，我們不用再自己去用ＪＱ代碼了，直接用ＭＶＣ自代的Ajax.BeginForm就可以很容易的完成一個異步的表單提交動作。

Html.BeginForm的原型解釋：

 

 1 @using (Html.BeginForm()) {} //提交到當前頁面
 2 
 3 @using (Html.BeginForm(new {} )) {} //提交到當前頁面,並可以傳遞參數
 4 
 5 @using (Html.BeginForm("action","controller")) {} //提交到指定controller下的action中
 6 
 7 @using (Html.BeginForm("action","controller",FormMethod.POST)) {} //提交到指定controller下的action中，並指定提交方式
 8 
 9 FormMethod枚舉如下：   
10 
11 　// 摘要:
12     //     枚舉窗體的 HTTP 請求類型。
13     public enum FormMethod
14     {
15         // 摘要:
16         //     指定 GET 請求。
17         Get = 0,
18         //
19         // 摘要:
20         //     指定 POST 請求。
21         Post = 1,
22     }

 

 

Ajax.BeginForm異步表單原型解釋

 

 1 @using (Ajax.BeginForm(
 2     new AjaxOptions
 3     {
 4         UpdateTargetId = "UserLogOnContainer",
 5         HttpMethod = "Post",
 6         OnSuccess = " ",
 7     })){}　//提交到當前頁面，提交方式為Post,異步更新模塊ＩＤ為UserLogOnContainer
 8 
 9  @using (Ajax.BeginForm("action", "controller", null,
10     new AjaxOptions
11     {
12         UpdateTargetId = "UserLogOnContainer",
13         HttpMethod = "Post",
14         OnSuccess = " ",
15     }))
16     {} //提交到指定controller下的action，提交方式為Post,異步更新模塊ＩＤ為UserLogOnContainer

 

 

下面看一下Ajax.BeginForm的例子，一個用戶登陸的ＤＥＭＯ

View代碼：

 

 1 @model TsingDa.Ask.Models.UserLogOnModel
 2 @{Layout = "";}
 3 <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
 4 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
 5 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
 6 <div id="UserLogOnContainer">
 7     @using (Ajax.BeginForm("UserLogOn", "Home", null,
 8     new AjaxOptions
 9     {
10         UpdateTargetId = "UserLogOnContainer",
11         HttpMethod = "Post",
12         OnSuccess = " ",
13     }))
14     {
15         @Html.ValidationSummary(true)
16         <div class="editor-field">
17             @Html.TextBoxFor(m => m.Email)
18             @Html.ValidationMessageFor(m => m.Email)
19         </div>
20         <div class="editor-field">
21             @Html.TextBoxFor(m => m.Password)
22             @Html.ValidationMessageFor(m => m.Password)
23         </div>
24         <input type="submit" id="logOnBtn" value="登陸" />
25     }
26 </div>

 

Controller層代碼如下：

 

 1  　　　　/// <summary>
 2         /// 用戶登陸
 3         /// </summary>
 4         /// <returns></returns>
 5         public ActionResult UserLogOn()
 6         {
 7             return View(new UserLogOnModel("郵箱", "密碼"));
 8         }
 9         [HttpPost]
10         public ActionResult UserLogOn(UserLogOnModel entity)
11         {
12             if (ModelState.IsValid)
13             {
14                 VM = user_InfoManager.UserLogOn(new User_Info { Email = entity.Email, Password = entity.Password });
15                 if (VM.IsComplete)
16                 {
17                     return RedirectToAction("Index", "Home");
18                 }
19                 else
20                 {
21                     VM.ToList().ForEach(i => ModelState.AddModelError("", i));
22                 }
23             }
24 
25             return View();
26         }

 

表單提交后，頁面效果如下：

需要注意的是，表單中的按鈕在異步表單中也是Submit類型，如果是異步表單，引入的ＪＳ文件需要有jquery.unobtrusive-ajax.min.js，在這項目的scripts目錄已經存在。

 

 

 

 

 

 

 

Ajax.BeginForm可用於異步提交表單。

＠using （Ajax.BeginForm（"AjaxFormPost"， "Home"，

    new { ID="11"， ClassName="FirstClass"}，

    new AjaxOptions

    {

        HttpMethod = "POST"，

        OnBegin="OnBeginPost（）"，

        OnComplete="OnEndPost（）"，

        OnSuccess="OnSuccessPost"，

        InsertionMode = InsertionMode.Replace

    }））

 AjaxFormPost為Action，Home為把握器，new {ID=“11”，ClassName="FirstClass"}為路由參數即Url參數

AjaxOptions

1.HttpMethod提交表單的體式格式。

2.onBegin表單提交前 客戶端Js的操縱。

3.OnSuccess表單提交后客戶端在此可以返回的操縱

4.OnComplete表單提交完成后的操縱

5.InsertionMode

    // 擇要:

    //     Enumerates the AJAX script ion modes.

    public enum InsertionMode

    {

        // 擇要:

        //     Replace the element.

        Replace = 0，

        //

        // 擇要:

        //     Insert before the element.

        InsertBefore = 1，

        //

        // 擇要:

        //     Insert after the element.

        InsertAfter = 2，

    }

 

    <div id="content">

        <table>

            <tr>

                <td>

                    ＠Html.Label（"lblName"， "姓名"）

                </td>

                <td>

                    ＠Html.TextBox（"TxtName"）

                </td>

            </tr>

            <tr>

                <td>

                    ＠Html.Label（"lblAge"， "春秋"）

                </td>

                <td>

                    ＠Html.TextBox（"TxtAge"）

                </td>

            </tr>

        </table>

        <input type="submit" value="提交" />

        </div>

 這是簡單的表單控件，一個Name，一個Age，和一個提交按鈕。

下面來看一下對應Home把握器中Action的操縱，此處只做測試，所以只進行取表單數據

        public string AjaxFormPost（string ID）

        {

            string ClassName = Request.QueryString["ClassName"];

            string Name = Request.Form["TxtName"];

            string Age = Request.Form["TxtAge"];

            return "姓名" + Name + "春秋" + Age;

        }

 ID為路由機制的參數。TxtName，TxtAge是經由過程表單進行獲取，前面設置為post體式格式，所以要用Request.Form的體式格式進行獲取響應的值。

然后返回一個字符串string，若是想在客戶端進行返回此字符串那么可以在上方AjaxOptions中的OnSuccess   

<script type="text/javascript">      function OnSuccessPost（e） {         alert（e+"提交成功!"）;     } </script>

 

當然若是想調用客戶端JavaScript還須要引用一個JavaScript庫。

 

<script src="＠Url.Content（"~/Scripts/jquery.unobtrusive-ajax.js"）" type="text/javascript"></script>


如許就可以進行調用測試