ASP.NET MVC教程四：ASP.NET MVC中頁面傳值的幾種方式

時間 2019-11-06

標籤 asp.net asp mvc 教程頁面幾種方式欄目 ASP 简体版

原文原文鏈接

準備

在Models文件夾裏面新添加Student實體類，用來模擬從Controller向View傳遞數據，Student類定義以下：瀏覽器

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; }
    }
}

1、經過ViewData傳值

MVC從開始版本就一直支持使用ViewData將Controller裏面的數據傳遞到View。ViewData定義以下：session

從上面的截圖中能夠看出，ViewData裏面存的是字典類型的數據，在查看ViewDataDictionary的定義：spa

注意：ViewDataDictionary繼承自IDictionary等接口，因此ViewData裏面的Value值類型是object的，使用的時候須要進行類型轉換。

新建Controller，並命名爲ViewDataDemo，該Controller用來模擬經過ViewData向View傳遞數據3d

Controller代碼以下：code

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>
        /// 經過ViewData向對應的View傳遞數據
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            // 一、將字符串傳遞到View
            ViewData["Other"] = "經過ViewData向View傳遞字符串";
            // 二、經過KeyValuePair添加
            ViewData.Add(new KeyValuePair<string, object>("name","tom"));
            // 三、直接添加
            ViewData.Add("age", 23);
            // 四、傳遞集合到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();
        }
    }
}

對應的View視圖代碼以下：blog

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "Index";
    // 這裏使用的是Razor語法，寫的是後臺C#代碼
    // ViewData的Value值是Object類型的，須要進行類型轉換
    // 常規寫法是先在這裏進行類型轉換
    var list = ViewData["Data"] as List<Student>;
}

<h2>經過ViewData向View傳遞數據</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&nbsp;&nbsp;Name:@item.Name&nbsp;&nbsp;Age:@item.Age&nbsp;&nbsp;Sex:@item.Sex&nbsp;&nbsp;Email:@item.Email
                    </div>
                }
            </div>
            <div>
                5、傳遞集合方式二
                @foreach (var item in ViewData["Data"] as List<Student>)
                {
                    <div>
                        ID:@item.ID&nbsp;&nbsp;Name:@item.Name&nbsp;&nbsp;Age:@item.Age&nbsp;&nbsp;Sex:@item.Sex&nbsp;&nbsp;Email:@item.Email
                    </div>
                }
            </div>
        </div>
</div>

運行結果：繼承

2、經過ViewBag傳值

ViewBag是在MVC3中出現的，ViewBag是動態（dynamic）類型的。接口

新建Controller，並命名爲ViewBagDemo，該Controller用來模擬經過ViewBag向View傳遞數據。字符串

Controller代碼：get

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>
        /// 經過ViewBag向View傳遞數據
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            // 經過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"
               }
            };

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

對應的Index視圖代碼：

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "Index";
    // ViewBag是dynamic類型的，使用的時候不須要進行類型轉換
    var stu = ViewBag.StudentData;
    var stuList = ViewBag.Data;
}

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

運行結果；

看了上面的運行結果，你可能會提出以下的兩個疑問：

一、Controller裏面沒有定義ViewBag.Data，爲何在這裏可使用呢？

這是由於ViewBag是從MVC3版本纔開始出現的，爲了兼容之前的ViewData，因此這裏雖然沒有定義ViewBag.Student，可是ViewBag可使用ViewData裏面定義的Data數據。

二、ViewData["name"]和ViewBag.name的值是同樣的

在控制器裏面明明設置的兩個值是不一樣的，可是爲何這裏都變成同樣的了呢？這是由於ViewData和ViewBag的屬性是重疊的，二者都是字典類型的，一切之後面定義的屬性爲準，即後面定義的會覆蓋前面定義的。

修改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>
        /// 經過ViewBag向View傳遞數據
        /// </summary>
        /// <returns></returns>
        public ActionResult Index()
        {
            // 經過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"
               }
            };

            // 經過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視圖顯示效果：

這時會發現，Index視圖裏面顯示的都是ViewData的值了。

3、經過TempData傳值

新建Controller，並命名爲TempDataDemo，該Controller用來模擬經過TempData向View傳遞數據。

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();
        }
    }
}

對應的Index視圖代碼：

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

<h2>經過TempData向View傳遞數據</h2>
<div class="jumbotron">
    <p>
        <div>
            <div>
                經過ViewData傳遞字符串 ViewData["Name"]:@ViewData["Name"];
            </div>
        </div>
    </p>

    <p>
        <div>
            <div>
                經過ViewBag傳遞字符串 ViewBag.Name:@ViewBag.Name;
            </div>
        </div>
    </p>
    <p>
        <div>
            <div>
                1、傳遞字符串 TempData["Name"]:@TempData["Name"];
            </div>
            2、輸出stu
            <div>
                ID:@stu.ID&nbsp;&nbsp;Name:@stu.Name&nbsp;&nbsp;Age:@stu.Age&nbsp;&nbsp;Sex:@stu.Sex&nbsp;&nbsp;Email:@stu.Email
            </div>
        </div>
    </p>
</div>

運行結果：

從上面的結果中能夠看出：TempData的屬性值不會覆蓋上面定義的屬性值。那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)
            {
                // 跳轉到TempDataTest方法
                return RedirectToAction("TempDataTest");
            }
            else
            {
                // 返回同名視圖
                return View();
            }          
        }

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

TempDataTest視圖代碼：

@*引入Student的命名空間*@
@using MVCStudyDemo.Models;
@{
    ViewBag.Title = "TempDataTest";
    // 類型轉換
    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&nbsp;&nbsp;Name:@stu.Name&nbsp;&nbsp;Age:@stu.Age&nbsp;&nbsp;Sex:@stu.Sex&nbsp;&nbsp;Email:@stu.Email</h3>

在瀏覽器裏面輸入下面的URL地址：http://localhost:9080/TempDataDemo/index，這就表示傳遞的id是null值，運行結果：

你會發現這時ViewData和ViewBag都取不到數據了，只有TempData能夠取到數據，能夠得出TempData和ViewData、ViewBag的區別：

TempData是基於session存儲的，單次請求數據不丟失（ViewData和ViewBag會丟失），後臺跨頁面傳值，只能用一次

4、Model傳值

在Action放過裏面的View上面F12轉到定義：

能夠看到View有不少重載，其中一種能夠直接傳遞model，如上面截圖中紅框所示。

新建Controller，並命名爲ModelDemo，該Controller用來模擬經過Model向View傳遞數據。

對應的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";
}

<h2>經過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>

運行結果：