MVC+EFCore 完整教程18 -- 升級分佈視圖至 View Component

以前咱們詳細介紹過度布視圖（partial view），在有一些更加複雜的場景下，.net core爲咱們提供了更增強大的組件 view  component.

能夠認爲view component是partial view的替代品。

 

我認爲view component是 .net core中很是重要的一個功能，除了跟partial view相似的特徵外，view component比較方便帶參數和業務邏輯，通常經過layout page調用。

一些典型的應用場景如動態導航菜單，登陸框，購物車等。

 

一個 view component 由兩部分組成：類（繼承 ViewComponent）和 渲染視圖

* 或者咱們能夠類比成微型的 controller和view

 

詳細步驟

首先咱們建立一個.net core 2.2項目做爲演示，以下一組圖。

 

 

咱們設置這麼一個場景：

傳遞不一樣參數，例如 柱狀圖、餅狀圖，返回不一樣的圖形。

* 僅做演示，咱們不返回真正的圖形，用文字說明代替。

 

咱們利用框架自帶的首頁（以下圖）來演示。

 

 

 

咱們前面說過，一個 view component 由兩部分組成：類（繼承 ViewComponent）和 渲染視圖，咱們先來建立這個類。

1、建立 view component 類：

建立ViewComponents 文件夾，在該文件夾下添加一個類 ChartViewComponent

 

 

注意：約定大於配置，這個類以 ViewComponent結尾 ，普通的view調用它時，會將這個後綴去掉。

添加以下方法：

 

 

 

2、建立 view component 視圖

一、新建文件夾： Views/Shared/Components ，約定大於配置，文件夾必須命名爲Components

二、新建文件夾： Views/Shared/Components/Chart ，約定大於配置，命名必須和以前的類ChartViewComponent去掉後綴後同樣，即 Chart

三、新建Razor view： Views/Shared/Components/Chart/Default.cshtml，約定大於配置，必須爲Default

 

 

添加以下代碼：

 

 

3、調用 view component

最後咱們打開 Views/Home/Index.cshtml ，在最後面添加以下調用代碼：

 

 

運行就能看到調用結果：

 

 

實用小貼士

1、直接經過controller調用調試

view component 有一個很方便的地方是能夠直接經過controller調用，這樣就能單獨顯示，方便咱們調試。

咱們打開 HomeController，添加以下方法，修改下參數，返回5個餅狀圖。

 

 

輸入以下地址 xxx/home/indexvc

 

 

2、同一個 view component, 根據不一樣條件返回多個視圖

咱們能夠在view component 的類方法中根據不一樣條件返回不一樣視圖。

一、以下圖，將Default.cshtml複製一份，修更名稱 AnotherChart.cshtml

 

 

增長下圖方框內容：

 

 

二、修改類方法，增長以下判斷：

 

 

經過 xxx/home/indexvc 來測試，發現已經跳轉到另一個視圖：

 

 

總結

1、咱們不深刻研究，從實用角度來講，能夠把view component 簡單理解爲微型的 controller和 view，注意兩點區別：

一、view component 的view不能直接經過 http調用

二、view component 的類方法不與她本身的view 模型綁定。典型的使用方式是：

Controller –>

調用controller的view –>

傳參數調用 view component 類方法InvokeAsync –>

調用 view component 的view

 

2、如今都推薦使用異步方法，同步的方法就不演示了，和以前的controller相似。

（* 本文中由於沒訪問數據庫，實際上仍是執行時仍是同步）

 

3、view component 中 view的查找順序，按照以下優先級

一、/Views/{Controller Name}/Components/{View Component Name}/{View Name}

二、/Views/Shared/Components/{View Component Name}/{View Name}

三、/Pages/Shared/Components/{View Component Name}/{View Name}

能夠看到，也能單獨爲每一個controller建Components的文件夾，不過通常來講咱們都在Shared的文件夾下面建，就不另做說明了。

 

咱們推薦view component的view 命名爲 Default.cshtml , 使用路徑爲Views/Shared/Components/{View Component Name}/{View Name}

 

祝 學習進步 ：）

 

P.S. 系列文章列表：http://www.javashuo.com/article/p-yaakbokp-y.html