ASP.NET MVC中Controller控制器向View視圖傳值的幾種方式

更新時(shí)間：2022年03月18日 09:38:04 作者：.NET開(kāi)發(fā)菜鳥(niǎo)

這篇文章介紹了ASP.NET MVC中Controller控制器向View視圖傳值的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、準(zhǔn)備工作

創(chuàng)建一個(gè)ASP.NET MVC程序，然后在Models文件夾里面新添加Student實(shí)體類(lèi)，用來(lái)模擬從Controller向View傳遞數(shù)據(jù)，Student類(lèi)定義如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCStudyDemo.Models
{
    public class Student
    {
        public int ID { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }

        public string Sex { get; set; }

        public string Email { get; set; }
    }
}

二、通過(guò)ViewData傳值

MVC從開(kāi)始版本就一直支持使用ViewData將Controller里面的數(shù)據(jù)傳遞到View。ViewData定義如下：

從上面的截圖中可以看出，ViewData里面存的是字典類(lèi)型的數(shù)據(jù)，在查看ViewDataDictionary的定義：

注意：ViewDataDictionary繼承自IDictionary等接口，所以ViewData里面的Value值類(lèi)型是object的，使用的時(shí)候需要進(jìn)行類(lèi)型轉(zhuǎn)換。

新建Controller，并命名為ViewDataDemo，該Controller用來(lái)模擬通過(guò)ViewData向View傳遞數(shù)據(jù)

Controller代碼如下：

using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCStudyDemo.Controllers
{
    public class ViewDataDemoController : Controller
    {
        // GET: ViewDataDemo
        /// <summary>
        /// 通過(guò)ViewData向?qū)?yīng)的View傳遞數(shù)據(jù)
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            // 1、將字符串傳遞到View
            ViewData["Other"] = "通過(guò)ViewData向View傳遞字符串";
            // 2、通過(guò)KeyValuePair添加
            ViewData.Add(new KeyValuePair<string, object>("name","tom"));
            // 3、直接添加
            ViewData.Add("age", 23);
            // 4、傳遞集合到View
            ViewData["Data"] = new List<Student>()
            {
                new Student
               {
                 ID = 1,
                 Name = "唐僧",
                 Age = 34,
                 Sex = "男",
                 Email = "747976523@qq.com"
               },
               new Student
               {
                 ID = 2,
                 Name = "孫悟空",
                 Age = 635,
                 Sex = "男",
                 Email = "sunwukong@163.com"
               },
               new Student
               {
                 ID = 3,
                 Name = "白骨精",
                 Age = 4532,
                 Sex = "女",
                 Email = "74345523@qq.com"
               }
            };

            // 返回同名的視圖
            return View();
        }
    }
}

對(duì)應(yīng)的View視圖代碼如下：

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "Index";
    // 這里使用的是Razor語(yǔ)法，寫(xiě)的是后臺(tái)C#代碼
    // ViewData的Value值是Object類(lèi)型的，需要進(jìn)行類(lèi)型轉(zhuǎn)換
    // 常規(guī)寫(xiě)法是先在這里進(jìn)行類(lèi)型轉(zhuǎn)換
    var list = ViewData["Data"] as List<Student>;
}

<h2>通過(guò)ViewData向View傳遞數(shù)據(jù)</h2>
<div class="jumbotron">
        <div>
            <div>
                1、傳遞字符串 other:@ViewData["Other"];
            </div>
            <div>
                2、傳遞字符串 name:@ViewData["name"];
            </div>
            <div>
                3、傳遞字符串 age:@ViewData["age"];
            </div>
            <div>
                4、傳遞集合方式一
                @foreach (var item in list)
                {
                    <div>
                        ID:@item.ID??Name:@item.Name??Age:@item.Age??Sex:@item.Sex??Email:@item.Email
                    </div>
                }
            </div>
            <div>
                5、傳遞集合方式二
                @foreach (var item in ViewData["Data"] as List<Student>)
                {
                    <div>
                        ID:@item.ID??Name:@item.Name??Age:@item.Age??Sex:@item.Sex??Email:@item.Email
                    </div>
                }
            </div>
        </div>
</div>

運(yùn)行結(jié)果：

三、通過(guò)ViewBag傳值

ViewBag是在MVC3中出現(xiàn)的，ViewBag是動(dòng)態(tài)（dynamic）類(lèi)型的。

新建Controller，并命名為ViewBagDemo，該Controller用來(lái)模擬通過(guò)ViewBag向View傳遞數(shù)據(jù)。

Controller代碼：

using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCStudyDemo.Controllers
{
    public class ViewBagDemoController : Controller
    {
        // GET: ViewBagDemo
        /// <summary>
        /// 通過(guò)ViewBag向View傳遞數(shù)據(jù)
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            // 通過(guò)ViewData傳值
            ViewData["name"] = "ViewData";
            // 傳遞集合到View
            ViewData["Data"] = new List<Student>()
            {
                new Student
               {
                 ID = 1,
                 Name = "唐僧",
                 Age = 34,
                 Sex = "男",
                 Email = "747976523@qq.com"
               },
               new Student
               {
                 ID = 2,
                 Name = "孫悟空",
                 Age = 635,
                 Sex = "男",
                 Email = "sunwukong@163.com"
               },
               new Student
               {
                 ID = 3,
                 Name = "白骨精",
                 Age = 4532,
                 Sex = "女",
                 Email = "74345523@qq.com"
               }
            };

            // 通過(guò)ViewBag傳值
            ViewBag.Name = "ViewBag";
            ViewBag.StudentData = new Student()
            {
                ID = 5,
                Name = "沙悟凈",
                Age = 567,
                Sex = "男",
                Email = "4567890345@qq.com"
            };
            // 返回同名視圖
            return View();
        }
    }
}

對(duì)應(yīng)的Index視圖代碼：

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "Index";
    // ViewBag是dynamic類(lèi)型的，使用的時(shí)候不需要進(jìn)行類(lèi)型轉(zhuǎn)換
    var stu = ViewBag.StudentData;
    var stuList = ViewBag.Data;
}

<h2>通過(guò)ViewBag向View傳遞數(shù)據(jù)</h2>
<div class="jumbotron">
    <div>
        <div>
            Controller通過(guò)ViewBag向View傳遞數(shù)據(jù)
        </div>
        <div>
            1、通過(guò)ViewData傳遞字符串 ViewData["name"]:@ViewData["name"];
        </div>
        <div>
            2、通過(guò)ViewBag傳遞字符串 ViewBag.name:@ViewBag.Name;
        </div>
        <div>
            3、輸出stu
            <div>
                ID:@stu.ID??Name:@stu.Name??Age:@stu.Age??Sex:@stu.Sex??Email:@stu.Email
            </div>
            4、輸出stuList
            @foreach (var item in stuList)
            {
                <div>
                    ID:@item.ID??Name:@item.Name??Age:@item.Age??Sex:@item.Sex??Email:@item.Email
                </div>
            }
        </div>
    </div>
</div>

運(yùn)行結(jié)果；

看了上面的運(yùn)行結(jié)果，你可能會(huì)提出如下的兩個(gè)疑問(wèn)：

1、Controller里面沒(méi)有定義ViewBag.Data，為什么在這里可以使用呢？

這是因?yàn)閂iewBag是從MVC3版本才開(kāi)始出現(xiàn)的，為了兼容以前的ViewData，所以這里雖然沒(méi)有定義ViewBag.Student，但是ViewBag可以使用ViewData里面定義的Data數(shù)據(jù)。

2、ViewData["name"]和ViewBag.name的值是一樣的

在控制器里面明明設(shè)置的兩個(gè)值是不同的，但是為什么這里都變成一樣的了呢？這是因?yàn)閂iewData和ViewBag的屬性是重疊的，兩者都是字典類(lèi)型的，一切以后面定義的屬性為準(zhǔn)，即后面定義的會(huì)覆蓋前面定義的。

修改Controller代碼，將ViewData的順序放到ViewBag后面：

using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCStudyDemo.Controllers
{
    public class ViewBagDemoController : Controller
    {
        // GET: ViewBagDemo
        /// <summary>
        /// 通過(guò)ViewBag向View傳遞數(shù)據(jù)
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            // 通過(guò)ViewData傳值
            //ViewData["name"] = "ViewData";
            // 傳遞集合到View
            ViewData["Data"] = new List<Student>()
            {
                new Student
               {
                 ID = 1,
                 Name = "唐僧",
                 Age = 34,
                 Sex = "男",
                 Email = "747976523@qq.com"
               },
               new Student
               {
                 ID = 2,
                 Name = "孫悟空",
                 Age = 635,
                 Sex = "男",
                 Email = "sunwukong@163.com"
               },
               new Student
               {
                 ID = 3,
                 Name = "白骨精",
                 Age = 4532,
                 Sex = "女",
                 Email = "74345523@qq.com"
               }
            };

            // 通過(guò)ViewBag傳值
            ViewBag.Name = "ViewBag";
            ViewBag.StudentData = new Student()
            {
                ID = 5,
                Name = "沙悟凈",
                Age = 567,
                Sex = "男",
                Email = "4567890345@qq.com"
            };
            // 把ViewData的順序放到ViewBag后面
            ViewData["name"] = "ViewData";
            // 返回同名視圖
            return View();
        }
    }
}

在查看Index視圖顯示效果：

這時(shí)會(huì)發(fā)現(xiàn)，Index視圖里面顯示的都是ViewData的值了。

四、通過(guò)TempData傳值

查看TempData的定義：

我們發(fā)現(xiàn)TempData也是字典類(lèi)型的。

新建Controller，并命名為T(mén)empDataDemo，該Controller用來(lái)模擬通過(guò)TempData向View傳遞數(shù)據(jù)。

Controller代碼：

using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCStudyDemo.Controllers
{
    public class TempDataDemoController : Controller
    {
        // GET: TempDataDemo
        public ActionResult Index()
        {
            // ViewData
            ViewData["Name"] = "tom";
            // ViewBage
            ViewBag.Name = "Jon";
            // TempData
            TempData["Name"] = "Andi";
            TempData["Stu"] = new Student()
            {
                ID = 5,
                Name = "沙悟凈",
                Age = 567,
                Sex = "男",
                Email = "4567890345@qq.com"
            };

            // 返回同名視圖
            return View();
        }
    }
}

對(duì)應(yīng)的Index視圖代碼，TempData也是字典類(lèi)型的，所以在View頁(yè)面中使用的時(shí)候也需要進(jìn)行類(lèi)型轉(zhuǎn)換：

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "Index";
}
@{
    // 類(lèi)型轉(zhuǎn)換
    var stu = TempData["Stu"] as Student;
}

<h2>通過(guò)TempData向View傳遞數(shù)據(jù)</h2>
<div class="jumbotron">
    <p>
        <div>
            <div>
                通過(guò)ViewData傳遞字符串 ViewData["Name"]:@ViewData["Name"];
            </div>
        </div>
    </p>

    <p>
        <div>
            <div>
                通過(guò)ViewBag傳遞字符串 ViewBag.Name:@ViewBag.Name;
            </div>
        </div>
    </p>
    <p>
        <div>
            <div>
                1、傳遞字符串 TempData["Name"]:@TempData["Name"];
            </div>
            2、輸出stu
            <div>
                ID:@stu.ID??Name:@stu.Name??Age:@stu.Age??Sex:@stu.Sex??Email:@stu.Email
            </div>
        </div>
    </p>
</div>

運(yùn)行結(jié)果：

從上面的結(jié)果中可以看出：TempData的屬性值不會(huì)覆蓋上面定義的屬性值。那TempData還有什么作用呢？在看下面的代碼：

using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCStudyDemo.Controllers
{
    public class TempDataDemoController : Controller
    {
        // GET: TempDataDemo
        public ActionResult Index(int? id)
        {
            // ViewData
            ViewData["Name"] = "tom";
            // ViewBage
            ViewBag.Name = "Jon";
            // TempData
            TempData["Name"] = "Andi";
            TempData["Stu"] = new Student()
            {
                ID = 5,
                Name = "沙悟凈",
                Age = 567,
                Sex = "男",
                Email = "4567890345@qq.com"
            };

            if(id==null)
            {
                // 跳轉(zhuǎn)到TempDataTest方法
                return RedirectToAction("TempDataTest");
            }
            else
            {
                // 返回同名視圖
                return View();
            }          
        }

        public ActionResult TempDataTest()
        {
            // 返回同名視圖
            return View();
        }
    }
}

TempDataTest視圖代碼：

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "TempDataTest";
    // 類(lèi)型轉(zhuǎn)換
    var stu = TempData["Stu"] as Student;
}

<h2>TempDataTest</h2>
<h3>ViewData["Name"]:@ViewData["Name"]</h3>
<h3>ViewBage.Name:@ViewBag.Name</h3>
<h3>TempData["Name"]:@TempData["Name"];</h3>
<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，根據(jù)代碼，會(huì)顯示Index視圖：

我們看到：ViewData、ViewBag和TempData都可以取到值。

在瀏覽器里面輸入下面的URL地址：http://localhost:9080/TempDataDemo/index，這就表示傳遞的id是null值，根據(jù)代碼，會(huì)返回TempDataTest視圖，運(yùn)行結(jié)果：

從結(jié)果會(huì)發(fā)現(xiàn)這時(shí)ViewData和ViewBag都取不到數(shù)據(jù)了，只有TempData可以取到數(shù)據(jù)，可以得出TempData和ViewData、ViewBag的區(qū)別：

ViewData和ViewBag不能跨Action方法使用，TempData可以跨Action方法使用，因?yàn)門(mén)empData是基于session存儲(chǔ)的。
TempData只能跨Action方法訪(fǎng)問(wèn)一次，再次訪(fǎng)問(wèn)數(shù)據(jù)也會(huì)丟失。

五、Model傳值

在Action放過(guò)里面的View上面F12轉(zhuǎn)到定義：

可以看到View有很多重載，其中一種可以直接傳遞model，如上面截圖中紅框所示。

新建Controller，并命名為ModelDemo，該Controller用來(lái)模擬通過(guò)Model向View傳遞數(shù)據(jù)。

對(duì)應(yīng)的controller代碼：

using MVCStudyDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCStudyDemo.Controllers
{
    public class ModelDemoController : Controller
    {
        // GET: ModelDemo
        public ActionResult Index()
        {
            Student student = new Student()
            {
                ID = 5,
                Name = "沙悟凈",
                Age = 567,
                Sex = "男",
                Email = "4567890345@qq.com"
            };
            // 返回model
            return View(student);
            // 或者直接返回
            //return View(new Student()
            //{
            //    ID = 5,
            //    Name = "沙悟凈",
            //    Age = 567,
            //    Sex = "男",
            //    Email = "4567890345@qq.com"
            //});
        }
    }
}

Index視圖代碼：

@{
    ViewBag.Title = "Index";
}
@*不需要進(jìn)行類(lèi)型轉(zhuǎn)換*@
<h2>通過(guò)Model向View傳值</h2>
<h3>ID:@Model.ID</h3>
<h3>Name:@Model.Name</h3>
<h3>Age:@Model.Age</h3>
<h3>Sex:@Model.Sex</h3>
<h3>Email:@Model.Email</h3>

運(yùn)行結(jié)果：