无废话MVC入门教程五[Control与View交互]

424 篇文章 1 订阅
348 篇文章 0 订阅

无废话MVC入门教程五[Control与View交互]

同学习共进步,微信扫描下面二维码。
CnCoder.me
mvc技术交流,欢迎加群: 程序员俱乐部-WCF(4群)群号:529597507

本文目标

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

版权:http://www.cnblogs.com/iamlilinfeng

活到老,学到老,练到老...
37
1
« 上一篇: 无废话MVC入门教程四[视图中的Layout使用]
» 下一篇: 无废话MVC入门教程六[Model中的验证规则]
posted on 2013-03-01 15:43 李林峰的园子 阅读( 23295) 评论( 12) 编辑 收藏

  
#1楼 2013-04-17 09:45 | dotnetgeek  
我有个问题,为什么视图声明为强类型的时候
@model MVC3.Demo.Models.UserModel
model为小写,然后view中使用这个model的时候,却有大写Model
MVC是怎么识别出来的?有人甚至直接用m字母来代表这个强类型。
http://pic.cnblogs.com/face/u257851.jpg?id=25085236
  
#2楼 [ 楼主] 2013-04-17 10:12 | 李林峰的园子  
@ dotnetgeek
小写的model是关键字,我在后面的教程里有讲。
大写的时候直接指定页面的强类型,也可以这样用。
m是个匿名类型,可以使用任意可命名的字符。
https://i-blog.csdnimg.cn/blog_migrate/d568646f1722f913788488a47c28f72c.gif
  
#3楼 2013-12-27 16:49 | flyher  
@ 李林峰的园子
引用 @dotnetgeek
小写的model是关键字,我在后面的教程里有讲。
大写的时候直接指定页面的强类型,也可以这样用。
m是个匿名类型,可以使用任意可命名的字符。

我发现,这里的View中的user换成Model,请教一下,user那儿来的?MVC怎么能给知道就是这个user呢,
http://pic.cnblogs.com/face/u218282.jpg
  
#4楼 [ 楼主] 2013-12-30 14:32 | 李林峰的园子  
@ flyher
view里只能有一个类。
https://i-blog.csdnimg.cn/blog_migrate/d568646f1722f913788488a47c28f72c.gif
  
#5楼 2014-04-10 22:54 | weblogical  
你好!
请教个问题,MVC4 下 用Jquery Ajax 提交表单 上传多个文件

Controller Request.Files 一直是null,请问该怎么解决呢?
  
#6楼 2014-10-25 12:10 | LUCKYZHOUSTAR  
向大神致敬学习
  
#7楼 2014-12-09 22:25 | 杨清轩  
我想问一下,view中的model拿到表单中数据后通过什么方式转到控制器的?控制器怎么使用表中的数据?那个提交按钮什么作用?没有对它有什么处理吗?
  
#8楼 [ 楼主] 2014-12-10 09:28 | 李林峰的园子  
@ 杨清轩
类<==数据
return view(类);

view中使用
https://i-blog.csdnimg.cn/blog_migrate/d568646f1722f913788488a47c28f72c.gif
  
#9楼 2015-04-29 17:20 | 只为骄傲的活着  
Response.Write(form[1]) 为什么Response.Write(form["Password"]);是根据form表单索引获取的吗?
  
#10楼 2015-07-14 14:19 | 小小五  
  
#11楼 2015-08-06 16:47 | 落忆无痕  
@ 只为骄傲的活着
是的。。。
public ActionResult UserEdit_01(FormCollection form)
你监控一下这个form就知道了
  
#12楼 3242613 2015/8/6 16:49:21 2015-08-06 16:49 | 落忆无痕  
@ 李林峰的园子
使用FormCollection接收客户端数据
常用于富客户端的B/S应用程序,如客户端使用:ExtJs和JqueryUI等

请问这二者是怎么个关联,能不能帮说明一下。感谢


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值