ASP.NET MVC 框架（三）：ViewData 傳遞方式全解析——從 ViewDataDictionary 到強型別 ViewModel

系列第三篇，深入探討 Controller 向 View 傳遞資料的三種主要方式：ViewDataDictionary、ViewData.Model (強型別)、TempData，並說明各自適用場景與最佳實踐。

前情提要：MVC 核心分工

• Controller：處理請求、執行商業邏輯、準備資料。
• View：純粹呈現邏輯，從 Controller 取得資料產生 HTML。
• ViewData：Controller 與 View 之間的資料傳遞容器。

簡單產品列表場景

方式一：ViewDataDictionary (弱型別字典)

public ActionResult Index()
{
    var products = _repo.GetAll();
    ViewData["Products"] = products; // key-value 存放
    ViewData["PageTitle"] = "產品目錄";
    return View();
}

View 中取用：

<h1><%= ViewData["PageTitle"] %></h1>
<% foreach (var p in (IEnumerable<Product>)ViewData["Products"]) { %>
    <div><%= p.Name %> - <%= p.Price.ToString("C") %></div>
<% } %>

缺點：需型別轉換、無 IntelliSense、拼字錯誤執行時才發現。

方式二：強型別 ViewData.Model (推薦)

public ActionResult Index()
{
    var products = _repo.GetAll();
    return View(products); // 直接傳遞模型，隱含存入 ViewData.Model
}

View 頁面宣告模型型別：

<%@ Page Inherits="System.Web.Mvc.ViewPage<IEnumerable<Product>>" %>
<h1>產品目錄</h1>
<% foreach (var p in Model) { %> <!-- 直接使用 Model，IntelliSense 完整支援 --%>
    <div><%= p.Name %> - <%= p.Price.ToString("C") %></div>
<% } %>

優點：編譯時期型別檢查、完整 IntelliSense、重構安全、程式碼可讀性高。

方式三：ViewModel 模式 (複雜頁面最佳實踐)

當 View 需要多個不相關資料集 (如：產品列表 + 分類導航 + 使用者資訊 + 廣告)，建立專用 ViewModel：

public class ProductListViewModel
{
    public IEnumerable<Product> Products { get; set; }
    public IEnumerable<Category> Categories { get; set; }
    public UserProfile CurrentUser { get; set; }
    public Advertisement BannerAd { get; set; }
}

public ActionResult Index()
{
    var vm = new ProductListViewModel
    {
        Products = _repo.GetAll(),
        Categories = _repo.GetCategories(),
        CurrentUser = GetCurrentUser(),
        BannerAd = _adRepo.GetRandomBanner()
    };
    return View(vm);
}

View 繼承 `<%@ Page Inherits=\"ViewPage\" %>`，單一模型承載所有所需資料。

TempData：跨請求暫存資料

• 儲存於 Session，讀取後自動刪除 (或標記 Keep)。
• 適用場景：PRG 模式下跨 Redirect 傳遞成功訊息、驗證錯誤。

[HttpPost]
public ActionResult Create(Product product)
{
    if (ModelState.IsValid)
    {
        _repo.Add(product);
        TempData["SuccessMessage"] = "產品已新增";
        return RedirectToAction("Index");
    }
    return View(product);
}

// Index View
<% if (TempData["SuccessMessage"] != null) { %>
    <div class="alert-success"><%= TempData["SuccessMessage"] %></div>
<% } %>

總結比較

最佳實踐建議

1. 預設使用 強型別 View(Model)。
2. 頁面資料來源超過 1-2 個 → 建立 ViewModel。
3. 跨 Redirect 需傳遞提示訊息 → TempData。
4. 避免在 View 中進行型別轉換或商業邏輯判斷。

1. 上一篇文章： ASP.NET MVC 框架（四）：表單編輯與提交場景完整實作——產品 CRUD 範例
2. 下一篇文章： ASP.NET MVC 框架（二）：深入解析 URL 路由機制

關於ASP.NET

WinCE 資料通訊實戰（二）：SQL Server CE 2.0 RDA 合併複寫完整架構與環境配置

WinCE 5.0 + SQL Server CE 2.0

ASP.NET AJAX：在客戶端腳本中擴充 UpdateProgress 控制項

前言 UpdateProgress 顯示非同步回發進度。本教

ASP.NET 2.0 行動開發列表控制項完整比較：SelectionList、List、ObjectList 特性與適用場景

ASP.NET 2.0 行動控制項工具箱提供三種列表控制項：

ASP.NET 自訂控件（二）：可自訂樣式的星級控件——TableItemStyle 集合取代零散屬性

需求：文字顯示位置（左/下）、顏色、字型等樣式持續擴充。若每