您的位置：首页 > 其它

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

2013-03-01 15:43 507 查看
mvc技术交流，欢迎加群:

群号：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中的代码：

//UserDetail
public ActionResult UserDetail()
{
Models.UserModel userModel = new Models.UserModel();
userModel.UserName = "用户名";
userModel.Password = "密码";
userModel.Sex = 0;
userModel.Age = 30;
userModel.Height = 170;
userModel.Weight = 70;
userModel.Graduated = "毕业院校";
return View(userModel);
}


2.View中的代码：

@model MVC3.Demo.Models.UserModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>用户详细</title>
</head>
<body>
<div>
用户名：@Model.UserName
</div>
<div>
密码：@Model.Password
</div>
<div>
性别：
@if (Model.Sex == 0)
{
@:男
}
else
{
@:女
}
</div>
<div>
年龄：@Model.Age 岁
</div>
<div>
身高：@Model.Height CM
</div>
<div>
体重：@Model.Weight KG
</div>
<div>
毕业院校：@Model.Graduated
</div>
</body>
</html>


说明：@model 是Razor的一个指令，实现视图对强类型的引用。

3.效果如下：



2.把View中的Model数据传递给Control

1.View中的代码

@model MVC3.Demo.Models.UserModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>用户编辑</title>
</head>
<body>
@using (@Html.BeginForm())
{
<div>
用户名：@Html.TextBoxFor(model => model.UserName, new { @style = "width:200px" })
</div>
<div>
密码：@Html.PasswordFor(user => user.Password)
</div>
<div>
性别： 男 @Html.RadioButtonFor(user => user.Sex, 0, new { @name = "sex", @checked = "true" })
女 @Html.RadioButtonFor(user => user.Sex, 1, new { @name = "sex" })
</div>
<div>
年龄：@Html.TextBoxFor(user => user.Age) 岁
</div>
<div>
身高：@Html.TextBoxFor(user => user.Height) CM
</div>
<div>
体重：@Html.TextBoxFor(user => user.Weight) KG
</div>
<div>
毕业院校：@Html.TextBoxFor(user => user.Graduated)
</div>
<div>
<input type="submit" value="提交" /></div>
}
</body>
</html>


2.Control中的代码：

//UserEdit
public ActionResult UserEdit()
{
Models.UserModel userModel = new Models.UserModel();
userModel.UserName = "用户名";
userModel.Age = 10;
//其他....
return View(userModel);
}

[HttpPost]//UserEdit
public ActionResult UserEdit(Models.UserModel userModel)
{
Response.Write(userModel.UserName);
Response.Write("<br />");
Response.Write(userModel.Password);
Response.Write("<br />");
Response.Write(userModel.Sex);
Response.Write("<br />");
Response.Write(userModel.Age);
Response.Write("<br />");
Response.Write(userModel.Height);
Response.Write("<br />");
Response.Write(userModel.Weight);
Response.Write("<br />");
Response.Write(userModel.Graduated);
Response.Write("<br />");
return View();
}


3.运行效果：



3.使用FormCollection接收客户端数据

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

1.View中的代码

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>用户编辑</title>
</head>
<body>
@using (@Html.BeginForm())
{
<div>
用户名：@Html.TextBox("UserName", null, new { @style = "width:200px" })
</div>
<div>
密码：@Html.Password("Password")
</div>
<div>
<input type="submit" value="提交" /></div>
}
</body>
</html>


2.Control中的代码

//UserEdit
public ActionResult UserEdit_01()
{
return View();
}

[HttpPost]//UserEdit
public ActionResult UserEdit_01(FormCollection form)
{
Response.Write(form["UserName"]);
Response.Write("<br />");
Response.Write(form[1]);
Response.Write("<br />");
return View();
}


3.运行效果


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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航