.Net MVC將Controller數(shù)據(jù)傳遞到View

更新時(shí)間：2022年03月14日 10:54:22 作者：.NET開發(fā)菜鳥

這篇文章介紹了.Net MVC將Controller數(shù)據(jù)傳遞到View的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、通過ViewData傳值

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

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

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

Controller代碼如下：

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

namespace MVCPassValue.Controllers
{
    public class ViewDataDemoController : Controller
    {
        // GET: ViewDataDemo
        public ActionResult Index(int? id)
        {
             //1、將字符串傳遞到View
             ViewData["Other"] = "通過ViewData傳遞字符串";
 
             // 2
             ViewData.Add(new KeyValuePair<string, object>("Id", id ?? -1));

             //3
             ViewData.Add("name", "tom");
             //4、將集合傳遞到View
             ViewData["Student"] = 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();
        }
    }
}

View視圖如下：

@using MVCPassValue.Models;
@{
    ViewBag.Title = "Index";
}
@{
    // 這里是使用的Razor語法，寫的C#代碼
    var stuViewData = ViewData["Student"] as List<Student>;//ViewData的value值是object類型的，這里需要進(jìn)行類型轉(zhuǎn)換
    var other = ViewData["Other"];
}

<div class="jumbotron">
    <p>
        <div style="background-color:darkgreen">
            <div>
                Controller通過ViewData向View傳遞數(shù)據(jù)
            </div>
            <div>
                1、傳遞字符串 other:@other;
            </div>
            <div>
                2、傳遞字符串 Id:@ViewData["Id"];
            </div>
            <div>
                3、傳遞字符串 name:@ViewData["name"];
            </div>
            <div>
                4、傳遞集合
                @foreach (var item in stuViewData)
                {
                    <div>
                        ID:@item.ID??Name:@item.Name??Age:@item.Age??Sex:@item.Sex??Email:@item.Email
                    </div>
                }
            </div>
        </div>
    </p>
</div>

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

二、通過ViewBag傳值

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

Controller代碼：

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

namespace MVCPassValue.Controllers
{
    public class ViewBagDemoController : Controller
    {
        // GET: ViewBagDemo
        public ActionResult Index(int? id)
        {
            //1、將字符串傳遞到View
            ViewData["Other"] = "通過ViewData傳遞字符串";

            // 2
            ViewData.Add(new KeyValuePair<string, object>("Id", id ?? -1));

            //3
            ViewData.Add("name", "tom");
            //4、將集合傳遞到View
            ViewData["Student"] = 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"
               }
             };


            #region 2、通過ViewBag傳值
            ViewBag.name = "ViewBag";
            ViewBag.Stu1 = new Student()
            {
                ID = 5,
                Name = "沙悟凈",
                Age = 567,
                Sex = "男",
                Email = "4567890345@qq.com"
            };
            #endregion
            return View();
        }
    }
}

Index視圖代碼：

@using MVCPassValue.Models;
@{
    ViewBag.Title = "Index";
}
@{
    var stuViewData = ViewData["Student"] as List<Student>;//ViewData的value值是object類型的，這里需要進(jìn)行類型轉(zhuǎn)換
    var other = ViewData["Other"];
}

@{
    var name = ViewBag.name;
    var stu = ViewBag.Stu1;//ViewBag是dynamic類型的，使用的時(shí)候不需要進(jìn)行類型轉(zhuǎn)換
    var stuList = ViewBag.Student;
}

<div class="jumbotron">
    <p>
        <div style="background-color:darkgreen">
            <div>
                Controller通過ViewData向View傳遞數(shù)據(jù)
            </div>
            <div>
                傳遞字符串 ViewData["name"]:@ViewData["name"];
            </div>
        </div>
    </p>

    <p>
        <div style="background-color:crimson">
            <div>
                Controller通過ViewBag向View傳遞數(shù)據(jù)
            </div>
            <div>
                1、傳遞字符串 ViewBag.name:@name;
            </div>
            <div>
                2、輸出stu
                <div>
                    ID:@stu.ID??Name:@stu.Name??Age:@stu.Age??Sex:@stu.Sex??Email:@stu.Email
                </div>
                3、輸出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>
    </p>
</div>

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

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

1、Controller里面沒有定義ViewBag.Student，為什么在這里可以使用呢？

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

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

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

三、通過TempData傳值

先來看看下面的代碼：

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

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

index視圖代碼：

@using MVCPassValue.Models;
@{
    ViewBag.Title = "Index";
}
@{
    var stu = TempData["Stu"] as Student;
}

<div class="jumbotron">
    <p>
        <div style="background-color:darkgreen">
            <div>
                傳遞字符串 ViewData["Name"]:@ViewData["Name"];
            </div>
        </div>
    </p>

    <p>
        <div style="background-color:crimson">
            <div>
                1、傳遞字符串 ViewBag.Name:@ViewBag.Name;
            </div>
        </div>
    </p>
    <p>
        <div style="background-color:crimson">
            <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>

允許結(jié)果：

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

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

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

            if (id == null)
                return RedirectToAction("TempDataTest");
            else
                return View();
        }

        public ActionResult TempDataTest()
        {
            return View();
        }
    }
}

TempDataTest視圖代碼：

@using MVCPassValue.Models;
@{
    ViewBag.Title = "TempDataTest";
}
@{
    var stu = TempData["Stu"] as Student;
}

<h2>TempDataTest</h2>
<h3>ViewData["id"]:@ViewData["Id"]</h3>
<h3>ViewData["Name"]:@ViewData["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>

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

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

TempData是基于session存儲(chǔ)的，單次請(qǐng)求數(shù)據(jù)不丟失（ViewData和ViewBag會(huì)丟失），后臺(tái)跨頁面?zhèn)髦?，只能用一?/p>

四、Model傳值

controller代碼：

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

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

index視圖代碼：

@{
    ViewBag.Title = "Index";
}
@Model Student;

<h2>Index</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é)果：