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 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,異步更新模塊ID爲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,異步更新模塊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 else 20 { 21 VM.ToList().ForEach(i => ModelState.AddModelError("", i)); 22 } 23 } 24 25 return View(); 26 }
表單提交後,頁面效果如下:
需要注意的是,表單中的按鈕在異步表單中也是Submit類型,如果是異步表單,引入的JS文件需要有jQuery.unobtrusive-ajax.min.js,在這項目的scripts目錄已經存在。