ASP.NET 5系列教程 (三)：view components介紹

標籤：

在ASP.NET MVC 6中，view components (VCs) 功能類似於虛擬視圖，但是功能更加強大。 VCs兼顧了視圖和控制器的優點，你可以把VCs 看作一個Mini 控制器。它負責控制應用中的某一功能模組，例如：

• 動態導覽功能表

• 標籤雲

• 登入面板

• 購物車

• 最近文章

• 部落格側邊欄

假如使用VC 建立了登入面板，可以在很多情境中調用，例如：

• 使用者沒有登入

• 使用者已登入，需要退出使用其他帳號登入或者管理其他帳號。

• 如果當前登入角色為管理員，渲染管理員登入面板

你可以根據使用者的需求萃取資料進行渲染。添加VC到需要該視圖控制項的頁面。

VC 包含兩部分，類 (一般繼承於ViewComponent) 和調用VC類中方法的Razor 視圖。類似於ASP.NET 控制器, VC 可以作為POCO使用，但是更多使用者傾向於使用從 VewComponent中繼承而來的方法和屬性。

 

VC的建立方式有:

• 繼承ViewComponent.

• 擁有 [ViewComponent] 屬性，或者從擁有 [ViewComponent]屬性派生的類。

• 建立名稱已ViewComponent為尾碼的類。

和controllers相同，VCs 必須是公開、非嵌套和非抽象的類。

添加view component 類

1. 建立名為ViewComponents的檔案夾，View component 類可以包含在工程中的任何檔案夾下。

2. 在ViewComponents 檔案夾下建立PriorityListViewComponent.cs 類。.

3. 使用以下代碼替代PriorityListViewComponent.cs 檔案原有代碼:

  = IViewComponentResult Invoke( items = db.TodoItems.Where(x => x.IsDone ==  &&<=

代碼注釋：

· 因為PriorityListViewComponent 類繼承於ViewComponent，運行時將通過字串"PriorityList" 從View中引用該類。在後續章節將會進行詳細闡述。

· [ViewComponent] 屬性用於設定引用VC的別名，例如，建立名稱為XYZ的類，我們可以通過以下代碼設定其引用別名:

[ViewComponent(Name =   XYZ : ViewComponent

· 組件使用構造注入器使資料內容生效，類似於 Todo 控制器的功能。

· 調用View中的公開方法，可以傳遞任意數量的參數。在非同步版本中， InvokeAsync是可用的。在後續章節中我們將提及InvokeAsync 和多參數的使用方法。在之前的代碼中，公開方法的傳回值為代辦事項（ToDoItems），優先順序不低於maxPriority。

添加視圖控制項

1. 在Views\Todo 檔案夾下建立Components檔案夾，注意這個檔案夾需要命名為Components。

2. 在Views\Todo\Components 檔案夾下建立PriorityList 檔案夾。檔案夾名稱必須和view component 類名稱一致。或者類名去除尾碼名稱(如果在建立類時遵循慣例使用ViewComponent 作為尾碼)。如果使用了ViewComponent屬性。

3. 在Views\Todo\Components\PriorityList  檔案夾下建立Default.cshtml Razor 視圖，添加以下標記：

@model IEnumerable<TodoList.Models.TodoItem><h3>Priority Items</h3><ul> todo <li>@todo.Title</li></ul>

 

Razor 視圖包含並且顯示了 TodoItems。如果 VC 調用方法沒有傳遞視圖的名稱 (如例子中所示)，那麼預設情況下則調用視圖名稱對於方法。在後續的文章中，將闡述如何傳遞視圖名稱。

在views\todo\index.cshtml 視圖底部添加包含有調用PriorityListViewComponent的div：

@model IEnumerable<TodoList.Models.TodoItem><h3>Priority Items</h3><ul> todo <li>@todo.Title</li></ul>

 

標記 @await Component.InvokeAsync() 表示該文法用於調用VC。第一個參數是我們要調用的組件名稱。其餘參數參數傳遞給該VC。在這個例子中，我們傳遞“1”作為過濾的優先順序。InvokeAsync 方法可以包含任意數量的參數。

以片顯示了優先順序列表：

= <div =>  <h1>ASP.NET vNext</h1></div><div =>  <div =>== <h4>No Todo Items</h4><table>        <tr><th>TODO</th><th></th></tr> todo <tr>            <td>@todo.Title </td>            <td>, , ,  { id = todo.Id }) |, , ,  { id = todo.Id }) |, , ,  { id =</td>          </tr></table><div>@Html.ActionLink(, , ) </div>  </div>  <div =>, </div></div>

注意： VC通常被添加到 Views\Shared 檔案夾下，因為它並不僅僅是controller。

 

添加InvokeAsync 到優先順序組件

通過以下代碼更新PriorityListViewComponent類：

  =                  Task<IViewComponentResult> InvokeAsync( maxPriority,  MyView =              (maxPriority >  && isDone == =  items =  Task<IQueryable<TodoItem>> GetItemsAsync( maxPriority,  IQueryable<TodoItem> GetItems( maxPriority,  items = db.TodoItems.Where(x => x.IsDone == isDone &&<= msg =  + maxPriority.ToString() +                          +=

注意: 這裡移除了用於同步的Invoke 方法，使用更加強大的asynchronous方法替代。

修改 VC 視圖顯示優先順序資訊：

@model IEnumerable<TodoList.Models.TodoItem><h4>@ViewBag.PriorityMessage</h4><ul> todo <li>@todo.Title</li></ul>

最後，更新 views\todo\index.cshtml 視圖檔案：

@* Markup removed  brevity. *<div =>, , </div></div>

以片展示了PriorityListViewComponent類和Index視圖的修改效果：

  指定視圖名稱

一些複雜的VC在某些情況下也許需要去指定特定的視圖，以下代碼是通過InvokeAsync 方法指定視圖的方法：

  Task<IViewComponentResult> InvokeAsync( maxPriority,  MyView =      (maxPriority >  && isDone == =  items =

 

更改 Views\Todo\Components\PriorityList\Default.cshtml 為 Views\Todo\Components\PriorityList\PVC.cshtml 視圖。更改PVC視圖控制項來驗證它的使用：

@model IEnumerable<TodoList.Models.TodoItem><h2> PVC Named Priority Component View</h2><h4>@ViewBag.PriorityMessage</h4><ul> todo <li>@todo.Title</li></ul>

最後，需要更新 Views\Todo\Index.cshtml 檔案：

重新整理頁面查看更改效果。

 

在MVC6中，更改controller（或其他任何代碼）時，不需要重新編譯或重新運行應用，僅需要儲存代碼並且重新整理頁面即可。

以上即為今天希望和大家分享的view components知識，下一篇文章我們將介紹以下兩部分內容：

• 向視圖中添加服務方法。

• 發布應用到公用雲端方法。

敬請期待。

 

原文連結：http://www.asp.net/vnext/overview/aspnet-vnext/vc

ASP.NET 5系列教程 (三)：view components介紹