ASP.NETMVC中controller和view相互传值的⽅式
ASP.NET MVC中Controller向view传值的⽅式:
1. ViewBag、ViewData、TempData
2. 单个值的传递
3. Json
4. 匿名类型
5. ExpandoObject
6. Cookie
7. ViewModel(向普通View页⾯传个Model对象、向强类型页⾯传⼀个Model对象、⽤⼀个ViewModel对象解决所有问题)
ASP.NET MVC中view向Controller传值的⽅式
1. QueryString
2. RouteData
3. Model Binding(form、使⽤和Action参数同名的变量进⾏传递)
4. Cookie
在MVC中ViewBag的作⽤是数据的传递。在MVC3开始,视图数据能够通过ViewBag属性访问。在MVC2中则是使⽤ViewData。MVC3中保留了ViewData的使⽤。ViewBag是动态类型的(dynamic),ViewData是⼀个字典型的(Dictionary)。
MVC3中ViewBag和ViewData的差别:
ViewBag不再是字典的键值对结构,⽽是dynamic动态类型的。它会在程序执⾏的时候动态解析。
所以在视图中获取它的数据时候不须要进⾏类型转换
ViewData ViewBag
它是Key/Value字典集合它是类型对像
从Asp MVC 1 就有了ASP.NET MVC3 才有
基于Asp 3.5 framework基于Asp 4.0与 framework
ViewData⽐ViewBag快ViewBag⽐ViewData慢
在ViewPage中查询数据时须要转换合适的类型在ViewPage中查询数据时不须要类型转换
有⼀些类型转换代码可读性更好
View向Controller中传递数据的⽅式
QueryString
View中代码:
<div>
<button id="btn">提交</button>
</div>
<script>
$(function () {
$('#btn').click(function () {
//url不区分⼤⼩写
location.href = "/home/getvalue?method=querystring";
});
});
</script>
Controller中代码:
public void GetValue()
{
//Request属性可⽤来获取querystring,form表单以及cookie中的值
var querystring = Request["method"];
}
使⽤querystring向后台传递属于http协议中的get⽅式,即数据会暴露在url中,安全性不⾼(可通过浏览器历史记录看到发送的数据)且传递的数据量有⼤⼩限制。
点击提交按钮后浏览器地址栏中的地址:localhost:57625/home/getvalue?method=querystring。程序执⾏结果如下:
RouteData
路由可以让我们写出可读性较⾼的url,使⽤路由传递数据,⾸先要配置合适的路由:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}"
);
前端代码只需要将location.href的值改为和路由匹配的url即可,本⽰例中为"/home/getvalue/100"
Controller中的代码:
public void GetValue()
{
var value = RouteData.Values["id"];
}
获取的值是object类型:
获取路由参数的另外⼀种⽅式是给Action设置⼀个和路由模板中指定的参数名⼀致(不区分⼤⼩写)的参数即可,代码如下:
public void GetValue(int id)
{
}
注意,这⾥不仅获取了路由数据,⽽且⾃动将数据类型转换为int类型:
querystring和路由均是通过url进⾏数据的传递,若数据中包含中⽂应进⾏Encode操作。此外,url的长度是有限制的,使⽤url不可传递过多的数据。url传递参数属于Http协议中的Get请求,若要发送⼤量数据可以使⽤Post请求。
ModelBinding
1. Form
form表单形式是常见的向后端发送数据的⽅式,但是在提交数据是只会提交form表单内部具有name属性的input,textarea,select标签的value 值。
View中的代码:
<form action="/home/getvalue" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" name="button" value="提交" />
</form>
Controller中的代码:
public void GetValue()
{
var name = Request["username"];
var age = Request["age"];
var btn = Request["button"];
}
获取到的数据均为string类型:
现在我们创建⼀个和form表单对应的类:
public class User
{
public string UserName { set; get; }
public int Age { set; get; }
}
修改Action的代码如下:
public void GetValue(User user)
{
}
然后运⾏程序,可以看到MVC以将表单中的数据映射为User类实例的属性值,且进⾏了相应的数据类型的转换。
2. 使⽤和Action参数同名的变量进⾏传递
View中的代码:
<button id="btn">传递数据</button>
<script>
$(function () {
$('#btn').click(function () {
$.ajax({
'type': 'post', 'url': '/home/getdata',
//传递的数据也可以是序列化之后的json格式数据
//如,上⾯使⽤form表单提交数据就可以使⽤jquery中的serialize()⽅法将表单进⾏序列化之后在提交
//data:$('#form').serialize()
'data': { username: '雪飞鸿', age: '24' },
error: function (message) {
alert('error!');
}
});
})
})
</script>
Controller中的代码:
public void GetData(string username, int age)
{
mvc的controller}
在Action中成功获取到了对应的参数值,且数据类型也根据Action中参数的类型进⾏了相应的转换。
体现在从当前请求提取相应的数据绑定到⽬标Action⽅法的同名参数中。对于这样的⼀个Action,如果
是Post请求,MVC会尝试将Form(注意,这⾥的Form不是指html中的<form>表单,⽽是Post⽅法发送数据的⽅式,若我们使⽤开发者⼯具查看Post⽅式发送的请求信息,会看到Form Data⼀栏)中的值赋值到Action参数中,如果是get请求,MVC会尝试将QueryString的值赋值到Action参数中。
Cookie
这⾥引⽤kie插件来进⾏cookie的操作
<body>
<button id="btn">提交</button>
<script>
$(function () {
//向cookie中写⼊值
$.cookie('key', 'jscookie');
$('#btn').click(function () {
location.href = "/home/getvalue";
});
})
</script>
</body>
public void GetValue()
{
var cookie = Request["key"];
}
Controller向View中传值
单个值的传递
public ActionResult Index()
{
//注意,传递的值不能是string类型,否则会执⾏View(string viewName)⽅法⽽导致得不到正确结果 return View(100);
}
<body>
<p>@Model</p>
</body>
程序执⾏结果如下:
Json
public ActionResult Index()
{
return View();
}
public JsonResult SendData()
{
return Json(new { UserName = "雪飞鸿", Age = 24 });
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<p id="message"></p>
<button id="btn">获取数据</button>
<script>
$(function () {
$('#btn').click(function () {
$.ajax({
'url': '/home/senddata', 'type': 'post',
success: function (data) {
$('#message').html('⽤户名:' + data.UserName + "<br/>年龄:" + data.Age);
},
error: function (message) {
alert('error:' + message.statusText);
}
});
});
});
</script>
</body>
</html>
程序执⾏结果如下:
匿名类型
public ActionResult Index()
{
//使⽤匿名类向View中传递数据
return View(new { UserName = "雪飞鸿", Age = 24 });
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<p>⽤户名:@Model.UserName</p>
<p>年龄:@Model.Age</p>
</body>
</html>
因为匿名类型的类型名由编译器⽣成,并且不能在源代码级使⽤。所以,直接使⽤匿名类型向View中传递数据,在前台页⾯是⽆法访问到匿名类型中的属性的。执⾏上⾯代码程序会出现错误:
针对上述问题,使⽤Newtonsoft将匿名类型转换为json格式即可解决该问题。
使⽤NuGet引⼊Newtonsoft.Json包,然后修改代码如下:
public ActionResult Index()
{
string json = JsonConvert.SerializeObject(new { UserName = "雪飞鸿", Age = 24 });
//也可以直接序列化JSON格式的字符串
//dynamic jsonObj = JsonConvert.DeserializeObject("{ UserName : \"雪飞鸿\", Age : 24 }");
dynamic jsonObj = JsonConvert.DeserializeObject(json);
return View(jsonObj);
}
程序执⾏结果如下:
ExpandoObject
上⾯提到,直接使⽤匿名类型向View中传递数据是⾏不通的,可以使⽤ExpandoObject类型对象来替代匿名类型
public ActionResult Index()
{
dynamic user = new ExpandoObject();
user.UserName = "雪飞鸿";
user.Age = 24;
return View(user);
}
程序执⾏结果如下:
ViewBag、ViewData、
public ActionResult Index()
{
ViewBag.Title = "数据传递";
ViewData["key"] = "传递数据";
//默认情况下TempData中的数据只能使⽤⼀次
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论