無廢話MVC入門教程五[Control與View互動]
阿新 • • 發佈：2018-12-27
MVC入門系列教程-視訊版本，已入駐51CTO學院，文字+視訊學效果更好哦。視訊連結地址如下： 點我檢視視訊。另外，針對該系列教程博主提供有償技術支援，群號：226090960，群內會針對該教程的問題進行及時解答，公用性問題統一講解。
學習.NET MVC 只看在《無廢話系列》足夠了，《無廢話系列》簡單、快速、直接。
學習.NET MVC 只看在《無廢話系列》足夠了，《無廢話系列》簡單、快速、直接。
本文目標
1.熟練應用Control與View間的傳遞資料
本文目錄
1.在Control中使用Model並傳遞給View
2.把View中的Model資料傳遞給Control
3.使用FormCollection接收客戶端資料
0.前置條件
1.在Control中使用Model並傳遞給View
1.Control中的程式碼：
1 //UserDetail2 public ActionResult UserDetail() 3 { 4 Models.UserModel userModel = new Models.UserModel(); 5 userModel.UserName = "使用者名稱"; 6 userModel.Password = "密碼"; 7 userModel.Sex = 0; 8 userModel.Age = 30; 9 userModel.Height = 170; 10 userModel.Weight = 70; 11 userModel.Graduated = "畢業院校"; 12 return View(userModel); 13 }
2.View中的程式碼：
1 @model MVC3.Demo.Models.UserModel 2 @{ 3 Layout = null; 4 } 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title>使用者詳細</title> 9 </head> 10 <body> 11 <div> 12 使用者名稱：@Model.UserName 13 </div> 14 <div> 15 密碼：@Model.Password 16 </div> 17 <div> 18 性別： 19 @if (Model.Sex == 0) 20 { 21 @:男 22 } 23 else 24 { 25 @:女 26 } 27 </div> 28 <div> 29 年齡：@Model.Age 歲 30 </div> 31 <div> 32 身高：@Model.Height CM 33 </div> 34 <div> 35 體重：@Model.Weight KG 36 </div> 37 <div> 38 畢業院校：@Model.Graduated 39 </div> 40 </body> 41 </html>
說明：@model 是Razor的一個指令，實現檢視對強型別的引用。
3.效果如下：
2.把View中的Model資料傳遞給Control
1.View中的程式碼
1 @model MVC3.Demo.Models.UserModel 2 @{ 3 Layout = null; 4 } 5 <!DOCTYPE html> 6 <html> 7 <head> 8 <title>使用者編輯</title> 9 </head> 10 <body> 11 @using (@Html.BeginForm()) 12 { 13 <div> 14 使用者名稱：@Html.TextBoxFor(model => model.UserName, new { @style = "width:200px" }) 15 </div> 16 <div> 17 密碼：@Html.PasswordFor(user => user.Password) 18 </div> 19 <div> 20 性別： 男 @Html.RadioButtonFor(user => user.Sex, 0, new { @name = "sex", @checked = "true" }) 21 女 @Html.RadioButtonFor(user => user.Sex, 1, new { @name = "sex" }) 22 </div> 23 <div> 24 年齡：@Html.TextBoxFor(user => user.Age) 歲 25 </div> 26 <div> 27 身高：@Html.TextBoxFor(user => user.Height) CM 28 </div> 29 <div> 30 體重：@Html.TextBoxFor(user => user.Weight) KG 31 </div> 32 <div> 33 畢業院校：@Html.TextBoxFor(user => user.Graduated) 34 </div> 35 <div> 36 <input type="submit" value="提交" /></div> 37 } 38 </body> 39 </html>
2.Control中的程式碼：
1 //UserEdit 2 public ActionResult UserEdit() 3 { 4 Models.UserModel userModel = new Models.UserModel(); 5 userModel.UserName = "使用者名稱"; 6 userModel.Age = 10; 7 //其他.... 8 return View(userModel); 9 } 10 11 [HttpPost]//UserEdit 12 public ActionResult UserEdit(Models.UserModel userModel) 13 { 14 Response.Write(userModel.UserName); 15 Response.Write("<br />"); 16 Response.Write(userModel.Password); 17 Response.Write("<br />"); 18 Response.Write(userModel.Sex); 19 Response.Write("<br />"); 20 Response.Write(userModel.Age); 21 Response.Write("<br />"); 22 Response.Write(userModel.Height); 23 Response.Write("<br />"); 24 Response.Write(userModel.Weight); 25 Response.Write("<br />"); 26 Response.Write(userModel.Graduated); 27 Response.Write("<br />"); 28 return View(); 29 }
3.執行效果：
3.使用FormCollection接收客戶端資料
常用於富客戶端的B/S應用程式，如客戶端使用：ExtJs和JqueryUI等
1.View中的程式碼
1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <title>使用者編輯</title> 8 </head> 9 <body> 10 @using (@Html.BeginForm()) 11 { 12 <div> 13 使用者名稱：@Html.TextBox("UserName", null, new { @style = "width:200px" }) 14 </div> 15 <div> 16 密碼：@Html.Password("Password") 17 </div> 18 <div> 19 <input type="submit" value="提交" /></div> 20 } 21 </body> 22 </html>
2.Control中的程式碼
1 //UserEdit 2 public ActionResult UserEdit_01() 3 { 4 return View(); 5 } 6 7 [HttpPost]//UserEdit 8 public ActionResult UserEdit_01(FormCollection form) 9 { 10 Response.Write(form["UserName"]); 11 Response.Write("<br />"); 12 Response.Write(form[1]); 13 Response.Write("<br />"); 14 return View(); 15 }
3.執行效果
