• 心源   2014/7/26 12:11:00
  • MVC入门教程-实现Control与View的交互
  • 关键字: MVC 视图 控制器 数据交互
  • 前置条件

    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.效果如下:

    把View中的Model数据传递给Control

    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>

    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.运行效果:


    使用FormCollection接收客户端数据

    常用于富客户端的B/S应用程序,如客户端使用:ExtJs和JqueryUI等

    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>

    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.运行效果