Ajax.BeginForm的非同步提交資料 簡介

來源:互聯網
上載者:User

標籤:des   style   blog   http   color   java   os   io   

 

 

Html.BeginForm與Ajax.BeginForm都是MVC架構中的表單元素,它們從字面上可以看到區別,即Html.BeginForm是普通的表單提交,而Ajax.BeginForm是支援非同步表單提交,這對於我們開發人員來說是一個福音,我們不用再自己去用JQ代碼了,直接用MVC自代的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 FormMethod14     {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,非同步更新模組ID為UserLogOnContainer 8  9  @using (Ajax.BeginForm("action", "controller", null,10     new AjaxOptions11     {12         UpdateTargetId = "UserLogOnContainer",13         HttpMethod = "Post",14         OnSuccess = " ",15     }))16     {} //提交到指定controller下的action,提交方式為Post,非同步更新模組ID為UserLogOnContainer

 

 

下面看一下Ajax.BeginForm的例子,一個使用者登陸的DEMO

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                 else20                 {21                     VM.ToList().ForEach(i => ModelState.AddModelError("", i));22                 }23             }24 25             return View();26         }

 

表單提交後,頁面效果如下:

需要注意的是,表單中的按鈕在非同步表單中也是Submit類型,如果是非同步表單,引入的JS檔案需要有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>

如許就可以進行調用測試
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.