ASP.NET MVC 5 Web編程5 -- 頁面傳值的方式

本篇文章將講述MVC的頁面傳值方式，具體包括：後端向前端傳值(Controller向View傳值)；前端向後端傳值(View向Controller傳值)；Action與Action之間的傳值。

回顧

咱們回顧下在ASP.NET WebForms中，頁面之間最經常使用的傳值方式，有如下幾種：

a). QueryString(也叫URL傳值)

b). Session

c). Cookie

d). Application 

e). Server.Transfer

這裏再也不講述這幾種傳值方式的用法和利弊，在本章後面將用MVC的傳值方式與之對比，並展開一些探討。

下面正式開始MVC的頁面傳值方式

Controller向View傳值

1. ViewBag

用法：

在Controller中書寫

ViewBag.Test123 = "Hello World.";

前臺接收

@ViewBag.Test123

說明： ViewBag是dynamic動態類型，上面例子中的key => Test123能夠指定任何類型。

 

2. ViewData

用法：

在Controller中書寫

ViewData["Test123"] = "Hello World. This is ViewData";

前臺接收

@ViewData["Test123"]

說明：ViewData是字典類型，繼承自IDictionary<string,object>接口

 

3. TempData

用法：

在Controller中書寫

TempData["tmpData"] = "I am TempData...";

前臺接收

@TempData["tmpData"]

說明：TempData也是字典類型，繼承自IDictionary<string,object>接口

 

4. Model 

這是初學者最常使用的傳值方式。在上一篇文章中， 咱們在Razor視圖的頁面代碼中有這樣一句：

@model IEnumerable<MVC5Demo.Models.UserInfoViewModel>

而後咱們的信息列表是這樣：

<tbody>
                    @foreach (var item in Model) { 
                    <tr>
                        <td>@Html.DisplayFor(p => item.UserName)</td>
                        <td>@(item.Sex == 0 ? "女" : "男")</td>
                        <td>@Html.DisplayFor(p => item.Age)</td>
                        <td>@Html.DisplayFor(p => item.Dept)</td>
                        <td>@Html.ActionLink("編輯", "Edit", "UserInfo", new { id=item.UserID.ToString() },null) @Html.ActionLink("刪除", "Delete", "UserInfo", new { id = item.UserID.ToString() }, new { onclick="return confirm('確認刪除"+item.UserName+"的記錄？');" })</td>
                    </tr>
                    }
                </tbody>

如代碼所示，由於咱們的Model是一個泛型集合，這裏就能夠很方便的取出集合中的數據。

在後臺Controller中，是怎麼書寫的呢？

        public ActionResult Index()
        {
            return View("UserInfo", GetTestData());//GetTestData()返回泛型集合
        }

如代碼所示，只需返回視圖時，同時指定視圖的數據對象。

View向Controller傳值

1. 使用Html.BeginForm(...)方法提交表單

    @using(Html.BeginForm("actionName","controllerName"))
    {
        <div>表單內容</div>
        <div>...</div>
        <input type="submit" value="提交表單" />
    }

說明：將 <form> 開始標記寫入響應。在用戶提交窗體時，將由某個操做方法(指定Controller的某個Action)處理該請求。

(使用using關閉form，下面再也不說明。)

 

2. 使用Html.BeginRouteForm(...)方法提交表單

    @Html.BeginRouteForm("路由名稱", new { controller = "userinfo", action="save", userID = Model.UserID, userName = Model.UserName }, FormMethod.Post)
    {
        <div>表單內容</div>
        <div>...</div>
        <input type="submit" value="提交表單" />
    }

說明：同Html.BeginForm(),但使用路由方式提交表單，同時參數也不一樣。

 

3. 傳統Form表單的Action屬性提交

    <form id="postForm" action="@Url.Action("Save")" method="post">
            <div>表單內容</div>
            <div>...</div>
            <input type="submit" value="提交表單" />
    </form>

說明：使用傳統html form原生標記。

 

4. 使用Ajax方式提交表單, Ajax.BeginForm(...)

    @Ajax.BeginForm("actionName", new AjaxOptions { Url="",OnSuccess="",HttpMethod="get" })
    {
        <div>表單內容</div>
        <div>...</div>
        <input type="submit" value="提交表單" />
    }

說明：使用異步方式提交form表單。

 

5. Jquery和Ajax提交表單

    省略... 不在文章討論範圍。

6. 表單參數傳遞

    6.1 全參數傳遞

[HttpPost]
public ActionResult Save(string username,int sex,int age,string dept)

    說明：html標籤name和參數名需相同。

    6.2 實體傳參

[HttpPost]
public ActionResult Save(UserInfoViewModel item)

    說明：頁面使用@model綁定類型

    6.3 表單集合傳參

[HttpPost]
public ActionResult Save(FormCollection fc)

    說明：需解析FormCollection,如：

UserInfoViewModel userInfo = new UserInfoViewModel();
TryUpdateModel<UserInfoViewModel>(userInfo, fc);

    6.4 傳統方式

    使用HttpContext,在MVC中咱們一樣可使用如下對象：

    Application,Server,Session,Request,Response,Cache ...

Controller向Controller傳值(Action之間傳值)

1. RedirectToAction

  1.1 傳遞實體對象

        public ActionResult Index()
        {
            return RedirectToAction("Index", "Home", new UserInfoViewModel { UserID = Guid.NewGuid(), UserName = "zhangsan", Sex = 1, Age = 20, Dept = "hr" });
        }

說明：在UserInfoController中，在頁面加載時，新建一個實體類型，並跳轉至首頁。

接收：

    public class HomeController : Controller
    {
        public ActionResult Index(UserInfoViewModel model)
        {
            //處理model的值
            //...

  1.2 傳遞普通參數

        public ActionResult Index()
        {
            return RedirectToAction("Index", "Home", new { UserID = Guid.NewGuid(), UserName = "zhangsan"});
        }

接收：

    public class HomeController : Controller
    {
        public ActionResult Index(string userID,string userName)
        {
            //處理userID, userName的值
            //...

2. TempData

            TempData["userName"] = "zhangsan";
            return RedirectToAction("Index2");

在Index2中接收：

string userName = TempData["userName"].ToString();

說明：TempData能夠在同Controller中不一樣Action之間傳遞，而且具備‘一次訪問’的特質。使用時要特別注意。

與WebForms傳值的對比

1. 後臺不能經過非提交方式獲取某個頁面元素的值，由於沒有‘服務器控件’；MVC使用原生Http，是【無狀態】的。

2. 不能使用(也沒有)ViewState。

3. 使用特有的機制傳值（ViewData，ViewBag...等等）。

一個簡單的入門級Demo

效果圖：

開發工具： VS2013

功能點：用戶信息列表，實現對用戶信息的 增，刪，改，查功能。

點我下載

總結

本文主要對ASP.NET MVC5的頁面傳值方式作整體介紹。並提供了一個簡單的Demo供須要的朋友參考學習。

因爲本人水平有限，如文章有錯誤處還請各位指出，並不吝賜教！做者在這裏先行表示感謝。

本章是ASP.NET MVC5「入門」階段的最後一篇，後續文章將側重進階技術和一些技巧性或存疑的問題。敬請期待~

但願本文對你有幫助。