視圖組件簡介

在新的ASP.NET Core MVC中，視圖組件類似於局部視圖，但它們更強大。視圖組件不使用模型綁定，僅依賴於您在調用時提供的數據。

視圖組件特性：

• 呈現頁面響應的某一部分而不是整個響應
• 包括在控制器和視圖之間發現的關註分離和可測試性優勢
• 可以具有參數和業務邏輯
• 通常在頁面布局中調用

視圖組件是在任何地方可重用的呈現邏輯，對於局部視圖來說相對復雜，例如：

• 動態導航菜單
• 標簽雲（查詢數據庫）
• 登錄面板
• 購物車
• 最近發表的文章
• 典型博客上的側邊欄內容
• 將在每個頁面上呈現的登錄面板，並顯示要註銷或登錄的鏈接，具體取決於用戶的登錄狀態

視圖組件由兩部分組成：類（通常繼承自ViewComponent）和返回的結果（通常是視圖）。像控制器一樣，視圖組件可以是POCO，但大多數開發人員都希望利用從ViewComponent

創建視圖組件

此部分包含創建視圖組件的高級功能。在本文的後面，我們將詳細介紹每一個步驟，並創建一個視圖組件。

視圖組件類

視圖組件類可以通過以下任何方式來創建：

• 繼承自 ViewComponent 類
• 使用[ViewComponent]特性來標記一個類，或者繼承自具有[ViewComponent]特性的類
• 創建類的名稱以 ViewComponent 後綴結尾

與控制器一樣，視圖組件必須是公共、非嵌套、非抽象類。視圖組件名稱是刪除“ViewComponent”後綴的類名稱，也可以使用ViewComponentAttribute.Name屬性顯式指定名稱。

視圖組件類特性：

• 完美支持構造函數依賴註入
• 不參與控制器生命周期，這意味著您不能在視圖組件中使用過濾器

視圖組件方法

視圖組件在InvokeAsync方法中定義邏輯，並返回IViewComponentResult類型。參數直接來自視圖組件的調用，而不是模型綁定；視圖組件從不直接處理請求；通常視圖組件會初始化模型，並通過調用View方法將其傳遞給視圖。總而言之，視圖組件方法特性：

• 定義一個返回IViewComponentResult的InvokeAsync方法
• 通常會初始化一個模型，並通過調用ViewComponent類型的View方法將其傳遞給視圖
• 參數來自調用方法，而不是HTTP請求，沒有模型綁定
• 不能直接通過HTTP請求訪問，它們通常在視圖中通過代碼調用；視圖組件永遠不會處理請求
• 在方法簽名上重載，而不是當前HTTP請求的任何詳細信息

查找視圖路徑

運行時在以下路徑中搜索視圖：

• Views/<controller_name>/Components/<view_component_name>/<view_name>
• Views/Shared/Components/<view_component_name>/<view_name>

視圖組件的視圖名稱默認為Default，這意味著您的視圖文件通常將命名為Default.cshtml。創建視圖組件結果或調用View方法時，可以指定不同的視圖名稱。

我們建議您視圖文件命名為Default.cshtml，並使用Views/Shared/Components/<view_component_name>/ <view_name>.cshtml路徑。此示例中使用的PriorityList視圖組件，視圖的路徑是Views/Shared/Components/PriorityList/Default.cshtml。

調用視圖組件

要使用視圖組件，請在視圖中調用以下代碼：

    @Component.InvokeAsync("Name of view component", <anonymous type containing parameters>)

參數將被傳遞給InvokeAsync方法，在本文中編寫的PriorityList視圖組件在Views/Todo/Index.cshtml視圖文件中調用。在下文中，使用兩個參數調用InvokeAsync方法：

    @await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

通過標簽幫助器調用視圖組件

對於ASP.NET Core 1.1及更高版本，您可以將視圖組件作為標簽幫助器（Tag Helper）進行調用：

    <vc:priority-list max-priority="2" is-done="false">
    </vc:priority-list>