ASP.NET MVC 5 入門教程 (4) View和ViewBag

文章來源： Slark.NET-博客園 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html

上一節：ASP.NET MVC 5 入門教程 (3) 路由Route

下一節：ASP.NET MVC5 + EF6 入門教程 (5) Model和Entity Framework

源碼下載：點我下載

View(視圖)用來顯示被controller處理好的數據。本節我們就來看看如何通過controller訪問一個View頁面，如何從controller向View傳值。

打開Controllers文件夾下的FirstController.cs，我們把其中的代碼從返回一個字符串改成返回一個View。代碼如下：

using System.Web.Mvc;
namespace SlarkInc.Controllers
{
    public class FirstController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

這里表示名為First的Controller的Index Action執行后返回一個View。

FirstController對應的View都在Views文件夾下的First文件夾內。其Index Action對應的View應該是First文件夾內的Index.cshtml文件。因此，我們首先刪除掉First文件夾內的文件。然后右鍵點擊First文件夾選擇添加->帶有布局的 MVC 5視圖頁。

在彈出的項目名中輸入Index，點擊確定。

在選擇布局頁中保持默認並點擊確定。

這樣，一個View就創建好了，文件名為Index.cshtml。

文件內容如下：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

這段代碼表示應用了這個路徑下的模板。

右鍵點擊Index.cshtml文件並選擇在瀏覽器中查看。

運行結果如下圖所示。注意下圖的URL，由前兩節控制器、路由以及本節的知識，我們可以總結出這個頁面的調用流程：

瀏覽器通過url：“http://localhost:57231/First/Index”發出請求。由RouteConfig.cs解析路由，匹配規則url: "{controller}/{action}/{id}"，得出要訪問First Controller下的Index Action。然后Index Action返回一個View，其對應的View是在Views文件夾下的First文件夾里的Index.cshtml文件。此文件又加載"~/Views/Shared/_Layout.cshtml"模板，因此返回如下頁面，頁面中的內容就是模板的內容。

如果View不接受任何參數，那么這個頁面只能是一個靜態頁面。想要在Controller調用View時向其傳遞參數，就要用到ViewBag。

ViewBag是一個很神奇的東西，它是一個動態對象。簡單點說就是你可以給它添加任何屬性，這個屬性可以是任何類型。

ViewBag的主要用途就是在Controller里給ViewBag添加屬性值，並在View中讀取這些值並顯示出來。

第一步，我們在FirstController.cs中添加一些數據進ViewBag。這些數據類型各不相同。

using System.Collections.Generic;
using System.Web.Mvc;
namespace SlarkInc.Controllers
{
    public class FirstController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Number = 8;
            ViewBag.Message = "This is index Page";
            ViewBag.Slarks = new List<string> { "Slark1", "Slark2", "Slark3" };
            return View();
        }
    }
}

然后再Index.cshtml中讀取這些數據：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<p>Number: @ViewBag.Number</p>
<p>Message: @ViewBag.Message</p>
@{
    foreach (string slark in ViewBag.Slarks){
        <p>@slark</p>
    }
}

從上面代碼中可以看到兩種不同的代碼，一種是帶@{}的Razor代碼，另一種是HTML代碼。在一個cshtml中，Razor包裹的C#代碼會在服務器端執行，執行完畢后再把輸出的HTML頁面返回到客戶端。運行結果如下。

可以看到ViewBag傳來的值在View中都顯示出來了。

您的推薦和留言是我寫作動力，謝謝。

下一節：ASP.NET MVC5 + EF6 入門教程 (5) Model和Entity Framework