之前我們詳細介紹過分佈檢視（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）和 渲染檢視，我們先來建立這個類。
一、建立 view component 類：
建立ViewComponents 資料夾，在該資料夾下新增一個類 ChartViewComponent
注意：約定大於配置，這個類以 ViewComponent結尾 ，普通的view呼叫它時，會將這個字尾去掉。
新增如下方法：
二、建立 view component 檢視
1、新建資料夾： Views/Shared/Components ，約定大於配置，資料夾必須命名為Components
2、新建資料夾： Views/Shared/Components/Chart ，約定大於配置，命名必須和之前的類ChartViewComponent去掉字尾後一樣，即 Chart
3、新建Razor view： Views/Shared/Components/Chart/Default.cshtml，約定大於配置，必須為Default
新增如下程式碼：
三、呼叫 view component
最後我們開啟 Views/Home/Index.cshtml ，在最後面新增如下呼叫程式碼：
執行就能看到呼叫結果：
實用小貼士
一、直接通過controller呼叫除錯
view component 有一個很方便的地方是可以直接通過controller呼叫，這樣就能單獨顯示，方便我們除錯。
我們開啟 HomeController，新增如下方法，修改下引數，返回5個餅狀圖。
輸入如下地址 xxx/home/indexvc
二、同一個 view component, 根據不同條件返回多個檢視
我們可以在view component 的類方法中根據不同條件返回不同檢視。
1、如下圖，將Default.cshtml複製一份，修改名稱 AnotherChart.cshtml
增加下圖方框內容：
2、修改類方法，增加如下判斷：
通過 xxx/home/indexvc 來測試，發現已經跳轉到另外一個檢視：
總結
一、我們不深入研究，從實用角度來說，可以把view component 簡單理解為微型的 controller和 view，注意兩點區別：
1、view component 的view不能直接通過 http呼叫
2、view component 的類方法不與她自己的view 模型繫結。典型的使用方式是：
Controller –>
呼叫controller的view –>
傳引數呼叫 view component 類方法InvokeAsync –>
呼叫 view component 的view
二、現在都推薦使用非同步方法，同步的方法就不演示了，和之前的controller類似。
（* 本文中因為沒訪問資料庫，實際上還是執行時還是同步）
三、view component 中 view的查詢順序，按照如下優先順序
1、/Views/{Controller Name}/Components/{View Component Name}/{View Name}
2、/Views/Shared/Components/{View Component Name}/{View Name}
3、/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. 系列文章列表：https://www.cnblogs.com/miro/p/3777960.html