MVC5+EF6 入門完整教程六

標籤：style   blog   http   io   ar   os   使用   sp   on   

原文:MVC5+EF6 入門完整教程六

本篇我們談談分部視圖（Partial View）。

上篇文章提到過Partial和Action這兩個helper, 本篇文章主要就結合這兩個helper來講解分部視圖（Partial View）的應用。

文章提綱

• 理論基礎
• 詳細步驟
• 總結

理論基礎 – 分部視圖

Partial View指可以應用於View中以作為其中一部分的View的片段(類似於之前的user control), 可以像類一樣，編寫一次， 然後在其他View中被反覆使用。

一般放在"Views/Shared"檔案夾中以共用。

建立Partial View：一般直接右鍵"Views/Shared"檔案夾添加分部視圖。

使用Partial View有兩類helper ：

Html.Partial / Html.RenderPartial

Html.Action / Html.RenderAction

詳細步驟

大概五年前我開發過一個iPortal(類似於以前的iGoogle，現在iGoogle已經關閉), 其他類似的參考網站：http://dropthings.omaralzabir.com/

裡面有一個個可以自訂的widget，下面我們就開發一個簡單的widget來說明Partial View的用法。

建立分部視圖

如，建立 _PartialPageWidget.cshtml

我們做一個簡陋的widget.

參考下面的圖，定義widget的HTML結構。

借用了bootstrap中panel的樣式，結構如下。

通過Html.Partial / Html.RenderPartial 使用

直接應用Html.Partial或Html.RenderPartial輔助方法比較簡單。

開啟之前建好的Views/MVCDemo/Index.cshtml檔案，添加如下內容：

顯示結果：

通過Html.Action / Html.RenderAction 使用

通過Html.Action/Html.RenderAction使用稍微複雜一點，分成兩步。

1. 在要顯示的View所對應的Controller中心增加一個Action.

   還用上面這個頁面，我們在MVCDemoController.cs中增加一個Action

   做個簡單的說明：

   1. [ChildActionOnly] 表示這個Action只應作為子操作進行調用。也就是說直接通過 controller/action這樣的網址是不能訪問的，會提示只能由子請求訪問的錯誤。
   2. 必須返回一個PartialView
2. 在View中添加相關代碼

   顯示結果和上一種方法一樣

兩種使用方式小結

當View中引用了一個或多個分部視圖時，此View與各分部視圖預設得到一樣的資料，也就是說View及其中所有的Partial View預設情況下共用View中的ViewData和ViewBag.

需要使View和其中引入的Partial View有不同的資料，需要通過Html.Action/Html.RenderAction輔助方法， 並在對於被調用的Action中設定對應的資料。

另外還有幾點需要注意：

1. XXX和RenderXXX的區別在於，一個是直接返回字串，另外一個是直接寫入到相應輸出資料流，因此不能直接放在代碼錶達式中，必須放在代碼塊中。

   前面的樣本中兩種寫法是等價的。RenderXXX有輕微的效能優勢，在大量的RenderXXX運行時，才能反映出效能上的優勢。

2. Partial/RenderPartial通常在單獨的檔案夾中應用視表徵圖記來協助View渲染視圖模型的一部分。

   Action/RenderAction執行單獨Controller中的Action來顯示結果，提供了更多的靈活性，例如利用單獨的Controller傳遞不同值。文章最後我們會舉個例子說明。

3. Partial/RenderPartial和Action/RenderAction的參數分別是 partialView和 Action的名字。當然還有其他的重載函數，我們只說最常用的。應用時可以按照我們前面舉的例子。

Html.Partial和Html.Action差異舉例

最後我們舉個例子說明兩種用法的差別。

1. 建立一個Partial View

2. Controller中建立兩個Action，SharedDateDemo和PartialViewDate.

   根據SharedDateDemo產生主View, PartialViewDate供Html.Action調用

3. 主View: SharedDateDemo.cshtml分別顯示

   主View的時間；

   用Html.Partial調用Partial View的時間；

   用Html.Action調用Partial View的時間。

   顯示結果：

   上面結果可以清晰的看到：

   1. View及其中所有的Partial View預設情況下共用View中的ViewData和ViewBag
   2. 可以通過Html.Action， 配合被調用的Action改變傳遞不同的資料

總結

本次我們主要講解了Partial View這一實用功能的使用。

Html.Partial使用方便，在不需要改變資料內容時非常方便。

Html.Action 使用更加靈活，可以根據業務要求按需定製Partial View顯示內容。

請充分理解本篇文章所講的幾個例子。

好了，今天就到這裡。

歡迎大家多多評論，讓下一篇文章更好 ：）

MVC5+EF6 入門完整教程六