愛上MVC3系列~RenderAction與RenderPartial及(ji)一個頁面多個表單提交
今天做項目的(de)時候(hou)發現了(le)個問題,是關(guan)于RenderAction和(he)RenderPartial的(de),它(ta)們(men)在(zai)MVC2的(de)時候(hou)就出現了(le),不是MVC3的(de)新(xin)東西,那為什么要拿出來(lai)說呢,其主要原因在(zai)于,我對它(ta)們(men)的(de)了(le)解在(zai)MVC3時代有了(le)更上一層的(de)認識,呵呵。
先說一下他(ta)們的作用(yong):
RenderAction:渲染(ran)分部視圖(tu)到頁面(mian)上,他(ta)要求(qiu)你提供一下Action的名(ming)稱(cheng)和(he)Controller的名(ming)稱(cheng)
RenderPartial:渲染分(fen)(fen)部(bu)視圖(tu)到頁面上,他要(yao)求(qiu)你提(ti)代一個分(fen)(fen)部(bu)視圖(tu)的名稱,即它的路徑,如果(guo)是當然Controller下或者Shared下的頁面,直接寫(xie)它的名稱即可
再說一下(xia)他們(men)的區別:
RenderAction:它是走controller下的(de)action方法的(de),即走[HttpGet]特性(xing)的(de)方法(默認(ren)下就是HttpGet)
RenderPartial:他不(bu)走controller下的(de)action方法(fa),即(ji)使你有這個方法(fa),他也不(bu)會(hui)走,但一般使用(yong)RenderPartial時,都是(shi)把數據寫在頁(ye)面上的(de),它的(de)action方法(fa)完(wan)全多(duo)余。
下面是(shi)一個表單(dan)提(ti)交的(de)實(shi)現(xian)(xian),它是(shi)使用分部視圖完成的(de)表單(dan)模塊,它有(you)兩個action,以便去實(shi)現(xian)(xian)GET請(qing)求和POST請(qing)求,看(kan)代碼:
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 }
而在頁(ye)面視圖上,通過(guo)視圖模型UserLogOnModel進行(xing)頁(ye)面元素(su)的填(tian)充(chong)及(ji)表單(dan)驗(yan)證(zheng),在默(mo)認情況下,我們把(ba)模型賦了默(mo)認值(zhi)(就是表單(dan)元素(su)input上的value)
1 /// <summary> 2 /// 用戶登(deng)陸 3 /// </summary> 4 public class UserLogOnModel 5 { 6 public UserLogOnModel() 7 { 8 this.Email = "登陸(lu)名"; 9 this.Password = "密(mi)碼"; 10 } 11 [Required] 12 [DataType(DataType.EmailAddress)] 13 [Display(Name = "郵(you)箱")] 14 public string Email { get; set; } 15 [Required] 16 [DataType(DataType.Password)] 17 [Display(Name = "密碼")] 18 public string Password { get; set; } 19 }
當頁面上(shang)觸發POST事(shi)件后,就會到HTTPOST對應的action上(shang),進行處理,ModelState是指視圖模型的狀態,如(ru)果驗證(zheng)不通(tong)過,它的IsValid屬性為false,并且它會自動(dong)綁定(ding)到表單元(yuan)素(su)
上,這一樣都是基于MVC的,前臺代碼可能是這樣:
1 @model TsingDa.Ask.Models.UserLogOnModel 2 @{Layout = "";} 3 @using (Html.BeginForm("UserLogOn", "Home", FormMethod.Post, new { id = "LogOn" })) 4 { 5 @Html.ValidationSummary(true) 6 <div class="editor-field"> 7 @Html.TextBoxFor(m => m.Email) 8 @Html.ValidationMessageFor(m => m.Email) 9 </div> 10 <div class="editor-field"> 11 @Html.TextBoxFor(m => m.Password) 12 @Html.ValidationMessageFor(m => m.Password) 13 </div> 14 <input type="button" id="logOnBtn" value="登陸" /> 15 } 16 <script type="text/javascript"> 17 $("#logOnBtn").click(function () { 18 $.ajax({ 19 url: "/Home/UserLogOn", 20 data: $("#LogOn").serialize(), 21 type: "POST", 22 success: function (data) { 23 $("#LogOn").html(data); 24 } 25 }); 26 }); 27 </script>
注意,如果有(you)多個視圖中的表單(dan)分(fen)別有(you)提(ti)交(jiao)動作,必須使(shi)用(yong)AJAX方(fang)法(fa),不能使(shi)用(yong)表單(dan)自(zi)己的SUBMIT方(fang)式(shi),否則mvc會分(fen)不清你到底提(ti)交(jiao)給誰,這也很正常。