ASP.NET Core Razor 視圖組件
視圖組件簡介
在新的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>