.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

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM