无废话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         }