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 文件：

刷新頁面查看更改效果。

在進行開發時，使用 view components 能夠更好的查看頁面效果。若是再借助一些開發工具，還能夠大大提升開發效率。ComponentOne Studio for ASP.NET 是ASP.NET平臺上的一整套完備的開發工具包，包含的Web窗體控件、MVC scaffolding模板以及HTML5/JavaScript頁面組件，僅經過幾行代碼就能夠在系統中實現豐富的功能。

在MVC6中，更改controller（或其餘任何代碼）時，不須要從新編譯或從新運行應用，僅須要保存代碼而且刷新頁面便可。

以上即爲今天但願和你們分享的view components知識，下一篇文章咱們將介紹如下兩部份內容：

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

• 發佈應用到公有云方法。

敬請期待。

 

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