愛上MVC3系列(lie)~Html.BeginForm與Ajax.BeginForm
Html.BeginForm與Ajax.BeginForm都是(shi)MVC架構中的(de)表(biao)單元素,它們(men)(men)從字面上可以(yi)(yi)看(kan)到區別(bie),即Html.BeginForm是(shi)普通的(de)表(biao)單提(ti)交(jiao),而Ajax.BeginForm是(shi)支持異步的(de)表(biao)單提(ti)交(jiao),這對于(yu)我們(men)(men)開(kai)發(fa)者來說是(shi)一個福音,我們(men)(men)不用(yong)再自(zi)己去用(yong)JQ代(dai)碼了(le),直接用(yong)MVC自(zi)代(dai)的(de)Ajax.BeginForm就可以(yi)(yi)很容易的(de)完成一個異步的(de)表(biao)單提(ti)交(jiao)動作(zuo)。
Html.BeginForm的原型解釋:
1 @using (Html.BeginForm()) {} //提交到當前頁面 2 3 @using (Html.BeginForm(new {} )) {} //提交到當前頁面,并可以傳遞參(can)數 4 5 @using (Html.BeginForm("action","controller")) {} //提(ti)交到指定controller下的action中 6 7 @using (Html.BeginForm("action","controller",FormMethod.POST)) {} //提(ti)交到指(zhi)定controller下(xia)的action中,并(bing)指(zhi)定提(ti)交方(fang)式 8 9 FormMethod枚舉如下: 10 11 // 摘(zhai)要(yao): 12 // 枚舉窗體(ti)的(de) HTTP 請求(qiu)類型。 13 public enum FormMethod 14 { 15 // 摘(zhai)要(yao): 16 // 指定 GET 請求(qiu)。 17 Get = 0, 18 // 19 // 摘(zhai)要: 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 })){} //提交到當(dang)前頁面,提交方式為(wei)Post,異步更新模塊ID為(wei)UserLogOnContainer 8 9 @using (Ajax.BeginForm("action", "controller", null, 10 new AjaxOptions 11 { 12 UpdateTargetId = "UserLogOnContainer", 13 HttpMethod = "Post", 14 OnSuccess = " ", 15 })) 16 {} //提(ti)(ti)交到指定controller下的action,提(ti)(ti)交方式(shi)為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="登陸(lu)" /> 25 } 26 </div>
Controller層代碼如下:
1 /// <summary> 2 /// 用戶登陸 3 /// </summary> 4 /// <returns></returns> 5 public ActionResult UserLogOn() 6 { 7 return View(new UserLogOnModel("郵箱(xiang)", "密碼")); 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 }
表單提交后,頁面(mian)效果如下:
需要注意的是,表單中的按鈕在異步表單中也是Submit類型,如果是異步表單,引入的JS文件需要有jquery.unobtrusive-ajax.min.js,在這項目的scripts目錄已經存在。