ASP.NET MVC 入门5: Control 与 View的交互



http://www.cnblogs.com/iamlilinfeng/archive/2013/03/01/2938134.html


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

ASP.NET MVC 入门5: Control 与 View的交互_第1张图片

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("
"); 16 Response.Write(userModel.Password); 17 Response.Write("
"); 18 Response.Write(userModel.Sex); 19 Response.Write("
"); 20 Response.Write(userModel.Age); 21 Response.Write("
"); 22 Response.Write(userModel.Height); 23 Response.Write("
"); 24 Response.Write(userModel.Weight); 25 Response.Write("
"); 26 Response.Write(userModel.Graduated); 27 Response.Write("
"); 28 return View(); 29 }
复制代码

3.运行效果:
ASP.NET MVC 入门5: Control 与 View的交互_第2张图片

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("
"); 12 Response.Write(form[1]); 13 Response.Write("
"); 14 return View(); 15 }
复制代码

3.运行效果ASP.NET MVC 入门5: Control 与 View的交互_第3张图片

你可能感兴趣的:(.net)