[ASP.NET MVC] Html.Partial() 和 Html.Action()

ASP.NET MVC 的 View 中可以有 Partial View (部份檢視），而且可以繫結不一樣的 Model，例如 View 繫結叫做 VM_Big 的物件，可以在 Partial View 繫結叫做 QM_Small 的物件，下面是專案 prjMvc 下的 ~/Models 裡的兩個類別：

VM_Big

  namespace prjMVC.Models
  {
    public class VM_Big
    {
      public QM_Small Small { get; set; }
    }
  }

和 QM_Small

  namespace prjMVC.Models
  {
    public class QM_Small
    {
      public DateTime Time { get; set; }
      public string Description { get; set; }
    }
  }

這裡讓 VM_Big 類別下有一個屬性，是 QM_Small 物件，而 QM_Small 類別下有時間物件 Time 和字串 Description，然後在 Controller 中寫一個 Action 叫 Index：

  using prjMVC.Models;
  namespace prjMVC.Controllers
  {
    public class DemoController : Controller
    {
      public ActionResult Index()
      {
        VM_Big big = new VM_Big();
        big.Small = new QM_Small();
        big.Small.Time = DateTime.Now;
        big.Small.Description = "現在時間";
        return View(big);
      }
    }
  }

程式碼如上，實體化一個 VM_Big 的物件叫 big，並將他的屬性 Small 用 QM_Small 實體化，並指定屬性時間物件 Time 為 DateTime.Now，指定屬性字串為 "現在時間"，將 big 物件傳去 View。然後新增檢視 Index 的 View，繫結 Model 為 VM_Big：

於 Index 的 View 中寫兩行：

  @model prjMVC.Models.VM_Big      // 主畫面 Index View 繫結 VM_Big

  <h2>Index</h2>


  @Html.Partial("pView", Model.Small)

  <hr />

  @Html.Action("pView", Model.Small)
  

以上的 @Html.Partial() 和 @Html.Action() 方法，第一個引數是字串，分別是指定哪個部份檢視 Partial View 和指定哪個動作 Action，第二個引數是 route value 即要傳入的物件，這裡都是將繫結的 VM_Big 物件下的 Small 屬性傳入。

要產生部份檢視有兩個方法，一個是在 View 資料夾下的所在 Controller 名稱的資料夾滑鼠右鍵，加入檢視，如下圖：

另一個方法是在 Controller 寫 Action，

  using prjMVC.Models;

  namespace prjMVC.Controllers
  {
    public class DemoController : Controller
    {
      public ActionResult pView(QM_Small small)
      {
        small.Time = small.Time.AddDays(15);
        small.Description = "十五天後";
        return PartialView(small);
      }
    }
  }

然後滑鼠右鍵新增檢視，但要勾選「建立成部份檢視」：

這兩個方法都會產生部份檢視頁面，但不同呼叫的結果會有點不同。以上 Partial View 繫結 QM_Small 物件：

  @model prjMVC.Models.QM_Small           // 部份檢視 pView 繫結 QM_Small

  <div style="border: 1px solid blue; margin: 10px; padding: 10px;">
    @Model.Time
  </div>
  <div style="border: 1px solid red; margin: 10px; padding: 10px">
    @Model.Description
  </div>

Index View 的結果會是：

會有這個差異的原因是：

• @Html.Partial() 方法是呈現 Partial View ，而 route value 傳送的物件單純是 Index 主 View 傳入的 @Model.Small，所以時間物件 Time 的值是 Controller 傳給 Index View 時的 DateTime.Now，且字串 Description 是 "現在時間"。
• @Html.Action() 方法是呼叫該名稱的動作，會將傳入的 route value 帶去 Controller 跑一次.AddDays(15) 和改變 Description 字串的內容為 "十五天後"，再將 QM_Small 物件 small 傳入 Partial View，完成後附加到 Index 主 View。

由此可見如果傳給 Partial View 物件要在後端處理資料，就使用 @Html.Action() 方法；如果使用 @Html.Partial() 就不會經過 Controller 就要用 JavaScript 處理，甚至要 Ajax 處理資料。