一、准备工作
创建一个ASP.NET MVC程序,然后在Models文件夹里面新添加Student实体类,用来模拟从Controller向View传递数据,Student类定义如下:
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 namespace MVCStudyDemo.Models 7 { 8 public class Student 9 { 10 public int ID { get; set; } 11 12 public string Name { get; set; } 13 14 public int Age { get; set; } 15 16 public string Sex { get; set; } 17 18 public string Email { get; set; } 19 } 20 }
二、通过ViewData传值
MVC从开始版本就一直支持使用ViewData将Controller里面的数据传递到View。ViewData定义如下:
从上面的截图中可以看出,ViewData里面存的是字典类型的数据,在查看ViewDataDictionary的定义:
注意:ViewDataDictionary继承自IDictionary等接口,所以ViewData里面的Value值类型是object的,使用的时候需要进行类型转换。
新建Controller,并命名为ViewDataDemo,该Controller用来模拟通过ViewData向View传递数据
Controller代码如下:
1 using MVCStudyDemo.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCStudyDemo.Controllers 9 { 10 public class ViewDataDemoController : Controller 11 { 12 // GET: ViewDataDemo 13 /// <summary> 14 /// 通过ViewData向对应的View传递数据 15 /// </summary> 16 /// <returns></returns> 17 public ActionResult Index() 18 { 19 // 1、将字符串传递到View 20 ViewData["Other"] = "通过ViewData向View传递字符串"; 21 // 2、通过KeyValuePair添加 22 ViewData.Add(new KeyValuePair<string, object>("name","tom")); 23 // 3、直接添加 24 ViewData.Add("age", 23); 25 // 4、传递集合到View 26 ViewData["Data"] = new List<Student>() 27 { 28 new Student 29 { 30 ID = 1, 31 Name = "唐僧", 32 Age = 34, 33 Sex = "男", 34 Email = "747976523@qq.com" 35 }, 36 new Student 37 { 38 ID = 2, 39 Name = "孙悟空", 40 Age = 635, 41 Sex = "男", 42 Email = "sunwukong@163.com" 43 }, 44 new Student 45 { 46 ID = 3, 47 Name = "白骨精", 48 Age = 4532, 49 Sex = "女", 50 Email = "74345523@qq.com" 51 } 52 }; 53 54 // 返回同名的视图 55 return View(); 56 } 57 } 58 }
对应的View视图代码如下:
1 @*引入Student的命名空间*@ 2 @using MVCStudyDemo.Models; 3 @{ 4 ViewBag.Title = "Index"; 5 // 这里使用的是Razor语法,写的是后台C#代码 6 // ViewData的Value值是Object类型的,需要进行类型转换 7 // 常规写法是先在这里进行类型转换 8 var list = ViewData["Data"] as List<Student>; 9 } 10 11 <h2>通过ViewData向View传递数据</h2> 12 <div class="jumbotron"> 13 <div> 14 <div> 15 1、传递字符串 other:@ViewData["Other"]; 16 </div> 17 <div> 18 2、传递字符串 name:@ViewData["name"]; 19 </div> 20 <div> 21 3、传递字符串 age:@ViewData["age"]; 22 </div> 23 <div> 24 4、传递集合方式一 25 @foreach (var item in list) 26 { 27 <div> 28 ID:@item.ID Name:@item.Name Age:@item.Age Sex:@item.Sex Email:@item.Email 29 </div> 30 } 31 </div> 32 <div> 33 5、传递集合方式二 34 @foreach (var item in ViewData["Data"] as List<Student>) 35 { 36 <div> 37 ID:@item.ID Name:@item.Name Age:@item.Age Sex:@item.Sex Email:@item.Email 38 </div> 39 } 40 </div> 41 </div> 42 </div>
运行结果:
三、通过ViewBag传值
ViewBag是在MVC3中出现的,ViewBag是动态(dynamic)类型的。
新建Controller,并命名为ViewBagDemo,该Controller用来模拟通过ViewBag向View传递数据。
Controller代码:
1 using MVCStudyDemo.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCStudyDemo.Controllers 9 { 10 public class ViewBagDemoController : Controller 11 { 12 // GET: ViewBagDemo 13 /// <summary> 14 /// 通过ViewBag向View传递数据 15 /// </summary> 16 /// <returns></returns> 17 public ActionResult Index() 18 { 19 // 通过ViewData传值 20 ViewData["name"] = "ViewData"; 21 // 传递集合到View 22 ViewData["Data"] = new List<Student>() 23 { 24 new Student 25 { 26 ID = 1, 27 Name = "唐僧", 28 Age = 34, 29 Sex = "男", 30 Email = "747976523@qq.com" 31 }, 32 new Student 33 { 34 ID = 2, 35 Name = "孙悟空", 36 Age = 635, 37 Sex = "男", 38 Email = "sunwukong@163.com" 39 }, 40 new Student 41 { 42 ID = 3, 43 Name = "白骨精", 44 Age = 4532, 45 Sex = "女", 46 Email = "74345523@qq.com" 47 } 48 }; 49 50 // 通过ViewBag传值 51 ViewBag.Name = "ViewBag"; 52 ViewBag.StudentData = new Student() 53 { 54 ID = 5, 55 Name = "沙悟净", 56 Age = 567, 57 Sex = "男", 58 Email = "4567890345@qq.com" 59 }; 60 // 返回同名视图 61 return View(); 62 } 63 } 64 }
对应的Index视图代码:
1 @*引入Student的命名空间*@ 2 @using MVCStudyDemo.Models; 3 @{ 4 ViewBag.Title = "Index"; 5 // ViewBag是dynamic类型的,使用的时候不需要进行类型转换 6 var stu = ViewBag.StudentData; 7 var stuList = ViewBag.Data; 8 } 9 10 <h2>通过ViewBag向View传递数据</h2> 11 <div class="jumbotron"> 12 <div> 13 <div> 14 Controller通过ViewBag向View传递数据 15 </div> 16 <div> 17 1、通过ViewData传递字符串 ViewData["name"]:@ViewData["name"]; 18 </div> 19 <div> 20 2、通过ViewBag传递字符串 ViewBag.name:@ViewBag.Name; 21 </div> 22 <div> 23 3、输出stu 24 <div> 25 ID:@stu.ID Name:@stu.Name Age:@stu.Age Sex:@stu.Sex Email:@stu.Email 26 </div> 27 4、输出stuList 28 @foreach (var item in stuList) 29 { 30 <div> 31 ID:@item.ID Name:@item.Name Age:@item.Age Sex:@item.Sex Email:@item.Email 32 </div> 33 } 34 </div> 35 </div> 36 </div>
运行结果;
看了上面的运行结果,你可能会提出如下的两个疑问:
1、Controller里面没有定义ViewBag.Data,为什么在这里可以使用呢?
这是因为ViewBag是从MVC3版本才开始出现的,为了兼容以前的ViewData,所以这里虽然没有定义ViewBag.Student,但是ViewBag可以使用ViewData里面定义的Data数据。
2、ViewData["name"]和ViewBag.name的值是一样的
在控制器里面明明设置的两个值是不同的,但是为什么这里都变成一样的了呢?这是因为ViewData和ViewBag的属性是重叠的,两者都是字典类型的,一切以后面定义的属性为准,即后面定义的会覆盖前面定义的。
修改Controller代码,将ViewData的顺序放到ViewBag后面:
1 using MVCStudyDemo.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCStudyDemo.Controllers 9 { 10 public class ViewBagDemoController : Controller 11 { 12 // GET: ViewBagDemo 13 /// <summary> 14 /// 通过ViewBag向View传递数据 15 /// </summary> 16 /// <returns></returns> 17 public ActionResult Index() 18 { 19 // 通过ViewData传值 20 //ViewData["name"] = "ViewData"; 21 // 传递集合到View 22 ViewData["Data"] = new List<Student>() 23 { 24 new Student 25 { 26 ID = 1, 27 Name = "唐僧", 28 Age = 34, 29 Sex = "男", 30 Email = "747976523@qq.com" 31 }, 32 new Student 33 { 34 ID = 2, 35 Name = "孙悟空", 36 Age = 635, 37 Sex = "男", 38 Email = "sunwukong@163.com" 39 }, 40 new Student 41 { 42 ID = 3, 43 Name = "白骨精", 44 Age = 4532, 45 Sex = "女", 46 Email = "74345523@qq.com" 47 } 48 }; 49 50 // 通过ViewBag传值 51 ViewBag.Name = "ViewBag"; 52 ViewBag.StudentData = new Student() 53 { 54 ID = 5, 55 Name = "沙悟净", 56 Age = 567, 57 Sex = "男", 58 Email = "4567890345@qq.com" 59 }; 60 // 把ViewData的顺序放到ViewBag后面 61 ViewData["name"] = "ViewData"; 62 // 返回同名视图 63 return View(); 64 } 65 } 66 }
在查看Index视图显示效果:
这时会发现,Index视图里面显示的都是ViewData的值了。
四、通过TempData传值
查看TempData的定义:
我们发现TempData也是字典类型的。
新建Controller,并命名为TempDataDemo,该Controller用来模拟通过TempData向View传递数据。
Controller代码:
1 using MVCStudyDemo.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCStudyDemo.Controllers 9 { 10 public class TempDataDemoController : Controller 11 { 12 // GET: TempDataDemo 13 public ActionResult Index() 14 { 15 // ViewData 16 ViewData["Name"] = "tom"; 17 // ViewBage 18 ViewBag.Name = "Jon"; 19 // TempData 20 TempData["Name"] = "Andi"; 21 TempData["Stu"] = new Student() 22 { 23 ID = 5, 24 Name = "沙悟净", 25 Age = 567, 26 Sex = "男", 27 Email = "4567890345@qq.com" 28 }; 29 30 // 返回同名视图 31 return View(); 32 } 33 } 34 }
对应的Index视图代码,TempData也是字典类型的,所以在View页面中使用的时候也需要进行类型转换:
1 @*引入Student的命名空间*@ 2 @using MVCStudyDemo.Models; 3 @{ 4 ViewBag.Title = "Index"; 5 } 6 @{ 7 // 类型转换 8 var stu = TempData["Stu"] as Student; 9 } 10 11 <h2>通过TempData向View传递数据</h2> 12 <div class="jumbotron"> 13 <p> 14 <div> 15 <div> 16 通过ViewData传递字符串 ViewData["Name"]:@ViewData["Name"]; 17 </div> 18 </div> 19 </p> 20 21 <p> 22 <div> 23 <div> 24 通过ViewBag传递字符串 ViewBag.Name:@ViewBag.Name; 25 </div> 26 </div> 27 </p> 28 <p> 29 <div> 30 <div> 31 1、传递字符串 TempData["Name"]:@TempData["Name"]; 32 </div> 33 2、输出stu 34 <div> 35 ID:@stu.ID Name:@stu.Name Age:@stu.Age Sex:@stu.Sex Email:@stu.Email 36 </div> 37 </div> 38 </p> 39 </div>
运行结果:
从上面的结果中可以看出:TempData的属性值不会覆盖上面定义的属性值。那TempData还有什么作用呢?在看下面的代码:
1 using MVCStudyDemo.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCStudyDemo.Controllers 9 { 10 public class TempDataDemoController : Controller 11 { 12 // GET: TempDataDemo 13 public ActionResult Index(int? id) 14 { 15 // ViewData 16 ViewData["Name"] = "tom"; 17 // ViewBage 18 ViewBag.Name = "Jon"; 19 // TempData 20 TempData["Name"] = "Andi"; 21 TempData["Stu"] = new Student() 22 { 23 ID = 5, 24 Name = "沙悟净", 25 Age = 567, 26 Sex = "男", 27 Email = "4567890345@qq.com" 28 }; 29 30 if(id==null) 31 { 32 // 跳转到TempDataTest方法 33 return RedirectToAction("TempDataTest"); 34 } 35 else 36 { 37 // 返回同名视图 38 return View(); 39 } 40 } 41 42 public ActionResult TempDataTest() 43 { 44 // 返回同名视图 45 return View(); 46 } 47 } 48 }
TempDataTest视图代码:
1 @*引入Student的命名空间*@ 2 @using MVCStudyDemo.Models; 3 @{ 4 ViewBag.Title = "TempDataTest"; 5 // 类型转换 6 var stu = TempData["Stu"] as Student; 7 } 8 9 <h2>TempDataTest</h2> 10 <h3>ViewData["Name"]:@ViewData["Name"]</h3> 11 <h3>ViewBage.Name:@ViewBag.Name</h3> 12 <h3>TempData["Name"]:@TempData["Name"];</h3> 13 <h3>ID:@stu.ID Name:@stu.Name Age:@stu.Age Sex:@stu.Sex Email:@stu.Email</h3>
我们先在浏览器里面输入下面的地址:http://localhost:1098/TempDataDemo/index/12 ,这里给id传值12,根据代码,会显示Index视图:
我们看到:ViewData、ViewBag和TempData都可以取到值。
在浏览器里面输入下面的URL地址:http://localhost:9080/TempDataDemo/index,这就表示传递的id是null值,根据代码,会返回TempDataTest视图,运行结果:
从结果会发现这时ViewData和ViewBag都取不到数据了,只有TempData可以取到数据,可以得出TempData和ViewData、ViewBag的区别:
- ViewData和ViewBag不能跨Action方法使用,TempData可以跨Action方法使用,因为TempData是基于session存储的。
- TempData只能跨Action方法访问一次,再次访问数据也会丢失。
五、Model传值
在Action放过里面的View上面F12转到定义:
可以看到View有很多重载,其中一种可以直接传递model,如上面截图中红框所示。
新建Controller,并命名为ModelDemo,该Controller用来模拟通过Model向View传递数据。
对应的controller代码:
1 using MVCStudyDemo.Models; 2 using System; 3 using System.Collections.Generic; 4 using System.Linq; 5 using System.Web; 6 using System.Web.Mvc; 7 8 namespace MVCStudyDemo.Controllers 9 { 10 public class ModelDemoController : Controller 11 { 12 // GET: ModelDemo 13 public ActionResult Index() 14 { 15 Student student = new Student() 16 { 17 ID = 5, 18 Name = "沙悟净", 19 Age = 567, 20 Sex = "男", 21 Email = "4567890345@qq.com" 22 }; 23 // 返回model 24 return View(student); 25 // 或者直接返回 26 //return View(new Student() 27 //{ 28 // ID = 5, 29 // Name = "沙悟净", 30 // Age = 567, 31 // Sex = "男", 32 // Email = "4567890345@qq.com" 33 //}); 34 } 35 } 36 }
Index视图代码:
1 @{ 2 ViewBag.Title = "Index"; 3 } 4 @*不需要进行类型转换*@ 5 <h2>通过Model向View传值</h2> 6 <h3>ID:@Model.ID</h3> 7 <h3>Name:@Model.Name</h3> 8 <h3>Age:@Model.Age</h3> 9 <h3>Sex:@Model.Sex</h3> 10 <h3>Email:@Model.Email</h3>
运行结果:
六、总结
最后总结一下ViewData和ViewBag的区别: