.Net Core組件化視圖（部分視圖）

.Net Core組件化視圖（部分視圖）

1.背景

     1.以前我們使用.Net的時候使用部分視圖的方式在，.Net Core 中能在單獨處理邏輯的部分視圖沒有了，但是我們還是想使用現在的.Net Core換了一種方式，將視圖組件化了。

2.視圖組件介紹

   1.可以將我們的視圖重覆的部分分離出來，達到可復用。

    2.可以編寫業務邏輯，參數傳遞，單獨測試，使用簡單。

    3.將複雜的頁面，簡單化。

3.視圖組件特點

   1.派生自ViewComponent使用 [ViewComponent] 屬性裝飾類，或從具有 [ViewComponent] 屬性的類派生像控制器一樣，視圖組件必須是 public ，非嵌套和非抽象類。

      視圖組件名稱是刪除了 ViewComponent 尾碼的類名，可以使用 ViewComponentAttribute.Name 屬性顯示指定。

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

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

    總之，視圖組件有以下特點：

1.   定義一個 InvokeAsync 方法並返回 IViewComponentResult。
2.  通常通過調用  ViewComponent View 方法初始化模型並將其傳遞給視圖。
3.  參數來自調用方法，而不是 HTTP，沒有模型綁定。
4. 不能直接作為 HTTP 端點訪問，它是從你的代碼（通常在視圖中）調用的。視圖組件不處理請求。
5. 在簽名上重載，而不是當前 HTTP 請求的任何細節。

4.視圖組件路徑

     /Views/Home/Components/Header/Index.cshtml

     /Views/Shared/Components/Header/Index.cshtml

     /Pages/Shared/Components/Header/Index.cshtml

     1.只能放在這3個位置，規則在下麵。

　　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>

這個就是放錯了，提示我放到正確的位置。

5.視圖組件的使用

      1.後臺代碼

　　　　視圖組件類可以在項目的任何文件夾中。 [ViewComponent] 特性可以更改用於引用視圖組件的名稱。

[ViewComponent(Name = "Header")]
    public partial class HeaderController : ViewComponent
    {
        //調用非同步方法
        public async Task<IViewComponentResult> InvokeAsync(int id) {
            //返回參數，Inex是自己定義的視圖名稱，如果沒有就是default
            //第二個是返回參數，和之前的view()的參數一樣。
            return  View("Index",id);
        }
    }

　　　　繼承於ViewComponent返回IViewComponentResult。

         還可以這樣

        /// <summary>
        /// 控制器調用
        /// </summary>
        /// <returns></returns>
        public IActionResult Info() {
            return ViewComponent("Header", 5);
        }

        2.前臺代碼

@await Component.InvokeAsync("Header", new { id=123})

效果

參考代碼：https://gitee.com/D_C_L/Test_ViewComponent.git

參考地址： https://www.cnblogs.com/afei-24/p/11317885.html