无废话MVC入门教程五[Control与View交互]
本文目标
1.熟练应用Control与View间的传递数据
本文目录
1.在Control中使用Model并传递给View
2.把View中的Model数据传递给Control
3.使用FormCollection接收客户端数据
0.前置条件
本文中使用的Model为"无废话MVC入门教程二[第一个小Demo]"中的UserModel
1.在Control中使用Model并传递给View
1.Control中的代码：
1 //UserDetail 2 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.运行效果
