第三节：Action向View传值的四种方式(ViewData、ViewBag、TempData、Model)

简介

　　在前面的章节中，我们已经很清楚，MVC工作模型的流程，Controller中的Action接收到客户端的请求，处理后要将数据返回给View，那么Action中是如何将数据返回给View的，二者之间打通的桥梁又是什么呢？

　　这些问题正是本章节需要解决的，下面先复习一下MVC的请求模型，如下图：

　(一). 先解决第一个问题，Action向View中传值有四种方式：ViewData、ViewBag、TempData、Model，随意选中一个点击F12查看源码，源码如下:

　　分析：ViewData和TempData分别是ViewDataDictionary类型和TempDataDictionary类型，而这两种类型均实现了IDictionary接口，所以ViewData和TemData均为字典类型。

　 我们再看一下ViewDataDictionary和TempDataDictionary两个类型源码，以ViewDataDictionary为例，代码如下：

　　分析可知赋值方式有两种： ViewData[" "]=XXX 和 ViewData.Add("key", value) ，TempData赋值方式与此类似。

　 (二). 接下来我们解决第二个问题，在前端页面选择ViewData点击F12，查看WebViewPage类源码，源码如下：这时候，应该都很清楚了。

　 (三). 总结一下结论：　　

　　A. ViewData：字典类型，在前端页面使用的时候，需要进行类型转换。

　　B. ViewBag：动态类型，运行时自动进行类型转换，不需要进行任何类型转换。

　　C：Model：实质就是ViewData.Model，前端页面通过Model.XXX进行调用，页面需要using引入程序集。

　　D：TempData：字典类型，前端页面使用时候，需要进行类型转换，但该类型更多的是作为临时变量应用于后台Action直接的传值，它内部是基于Session实现的，它可以存储一次，但是只能读取一次，再次使用，将为空。

1. 测试四种方式向页面传值

 1  　　public ActionResult PassValueIndex()
 2         {
 3             ViewData["num"] = 2;
 4             ViewData.Add("num2", 2);
 5 
 6             ViewBag.myNum = 2;
 7             TempData["myNum2"] = 2;
 8 
 9             Student stu = new Student()
10             {
11                 id="123456",
12                 name="ypf",
13                 sex="男"
14             };
15             return View(stu);
16         }

 1 @*使用Model赋值，需要引入下面的命名空间*@
 2 @using Ypf.MVC5.Models;
 3 @{
 4     Layout = null;
 5 }
 6 
 7 <!DOCTYPE html>
 8 
 9 <html>
10 <head>
11     <meta name="viewport" content="width=device-width" />
12     <title>PassValueIndex</title>
13 </head>
14 <body>
15     <div> 
16         <p>Model赋值：
17         @Model.id
18         @Model.name
19         @Model.sex
20         </p>
21         <p>ViewData(需要进行类型转换):@((int)ViewData["num"]+1) </p>
22         <p>ViewData(需要进行类型转换):@((int)ViewData["num2"] + 1) </p>
23 
24         <p>ViewBag(不需要进行类型转换):@(ViewBag.myNum+1)</p>
25         <p>TempData(需要进行类型转换):@((int)TempData["myNum2"]+1)</p>
26         <a href="TestTempData1">第二次调用TempData</a>
27     </div>
28 </body>
29 </html>

2. 测试TempData的时效性

　　从上面页面前端代码中点击，a标签，进入下面代码：

1      public ActionResult TestTempData1()
2         {
3             //第二次次测试使用TempData，因为PassValueIndex页面已经使用了一次，
4             //所以此处data1为空，很好的印证了TempData只能调用一次的结论
5             var data1 = TempData["myNum2"];
6             return Content("");
7         }

　　分析发现，这里的data1为null，印证了TempData使用一次后清空的结论。