[AspNetCore 3.0 ] Blazor 服務端組件 Render, RenderFragment ，RenderTreeBuilder, CascadingValue/CascadingParameter 等等

来源:https://www.cnblogs.com/cerl/archive/2019/11/12/11834510.html
-Advertisement-
Play Games

一、組件 支撐Blazor的是微軟的兩大成熟技術，Razor模板和SignalR，兩者的交匯點就是組件。通常，我們從ComponentBase派生的類型，或者創建的.razor 文件，就可以稱作組件。基於這兩大技術，組件也就具備了兩大功能，1、生成html片段；2、維護組件狀態。這裡我們來說一下組件 ...


一、組件

支撐Blazor的是微軟的兩大成熟技術，Razor模板和SignalR，兩者的交匯點就是組件。通常，我們從ComponentBase派生的類型，或者創建的.razor 文件，就可以稱作組件。基於這兩大技術，組件也就具備了兩大功能，1、生成html片段；2、維護組件狀態。這裡我們來說一下組件最基本的功能，生成html片段。

二、RenderTreeBuilder，RenderFragment

我們知道，瀏覽器處理HTML 文檔時會將所有的標簽都掛到一顆文檔樹中，無論一段HTML來自哪裡，總會被這棵樹安排的明明白白。換句話說，如果有根線的話，我們可以依靠這棵樹把所有的標簽都串起來，而在Blazor組件中也有這麼一根線，這根線就是RenderTreeBuilder，拿這根線的人就是Blazor框架。

備註一下：以下涉及的代碼如果沒有特別說明，都是指寫在.cs文件中，繼承 Microsoft.AspNetCore.Components.ComponentBase 的組件類。

下麵用代碼看看這根線。 新建一個Blazor 應用 項目，新增 一個c#類，MyComp 繼承 Microsoft.AspNetCore.Components.ComponentBase，然後override 一下，找到如下方法：

 protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);//加斷點
        }

加個斷點，在項目的 Pages\Index.razor 裡加上一行。<MyComp />
如果不想代碼執行兩次，就在Pages_Host.cshtml 里修改一下rendermode

 @(await Html.RenderComponentAsync<App>(RenderMode.Server))

F5跑起來，雖然沒有任何輸出，但是斷點命中了，RenderTreeBuilder這根線確實串起了我們的組件。
現在讓我們看看，RenderTreeBuilder 可以做什麼。

  protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.AddMarkupContent(0, "<span> BuildRenderTree  使用 AddMarkupContent 輸出 Html 。</span>");
           // base.BuildRenderTree(builder);
        }

再次跑起來，我們發現頁面上多了我們加的span.也就是說HTML的輸出，靠的是調用RenderTreeBuilder上的各種方法加上的。組件的基本原理也就是這樣，一個RenderTreeBuilder 進入不同組件的 BuildRenderTree 方法，方法內 通過RenderTreeBuilder上的add.. open.. 方法把我們想要輸出的部分，掛載到builder上，最終輸出到瀏覽器。

接下來，我們考察一下BuildRenderTree方法， 用委托描述一下，我們發現這就是一個Action<RenderTreeBuilder>.

在標題里我們提到了RenderFragment， 查看一下它的定義。

public delegate void RenderFragment(RenderTreeBuilder builder);//還是一個 Action<RenderTreeBuilder>，或者說，BuildRenderTree 就是一個RenderFragment

我們發現和前面的BuildRenderTree 在簽名上一模一樣，既然blazor會使用RenderTreeBuilder 去調用BuildRenderTree 方法，那麼RenderFragment會不會也被調用？

讓我們暫時離開組件MyComp,轉到Index.razor 內加一段code

 @code{
     RenderFragment MyRender=(builder) => builder.AddMarkupContent(0, "<span>當前輸出來自：Index.razor 組件， MyRender 欄位。 </span>");
        
}

在之前我們聲明 MyComp組件之後，再加一行調用 @MyRender.
完整的Index.razor

@page "/"

<MyComp />

 @MyRender

@code{
     
    RenderFragment MyRender = (builder) => builder.AddMarkupContent(0, "<div>當前輸出來自：Index.razor 組件， MyRender 欄位。 </div>");

}

兩段信息，如願輸出，證明blazor能夠識別出模板中的 RenderFragment ，並自動調用。
既然我們在組件模板中(Index.razor)書寫RenderFragment ，當然有其他方式可以不用拼湊字元串。

 RenderFragment AnotherRender =@<div>模板寫法的RenderFragment</div>;

加上調用 @AnotherRender，跑起來，三段信息。

至此，我們對RenderFragment 有了一個大概的瞭解，它是一個函數，內部打包了我們的輸出內容。在模板中我們可以使用，@xxxrender將其就地展開輸出，在c#環境下我們可以通過 xxxrender(builder)的形式進行調用（比如在BuildRenderTree方法內調用）。又因為其本身就是一個委托函數，因此我們即可以在組件內使用，也可以自由的在組件之間傳遞， 完成對輸出內容及邏輯的復用。
同時，為了更好的配合RenderFragment 使用，Blazor中還提供了一個工廠委托，RenderFragment , 即 Func<TValue,RenderFragment> 用法一般如下

//模板中(Index.razor)
RenderFragment<object> RenderValue =value=> @<div> render value :@value</div>;

調用 @RenderValue (123) 如果在c#代碼中,比如在BuildRenderTree 方法內， RenderValue (123)(builder)。

vs中*.razor在編譯時會生成對應的.g.cs代碼，位置在obj/debug/netcoreapp3.0/ razor 下，可以多打開看看。

三、RenderFragment 的一些用法

1、html中，我們可以在一對標簽內添加 內容，比如 <div>123</div>,組件預設是不支持此類操作的，這時我們就需要RenderFragment來包裝標簽內的內容。

讓我們回到MyComp組件類中，增加一個屬性

[Parameter] public RenderFragment ChildContent{ get; set; }

Index.razor

<MyComp><div> 組件標記內部</div></MyComp>

此時直接運行的話，組件不會輸出內部信息，需要在BuildRenderTree 中執行一下

  protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
          ChildContent?.Invoke(builder);
          
            base.BuildRenderTree(builder);
        }

組件標記內的片段被打包進了 ChildContent，已經變成了獨立的一個片段，因此需要我們顯式的調用一下。
ChildContent 是特殊名稱

2、組件上有多個RenderFragment

   [Parameter] public RenderFragment Fragment1 { get; set; }
        [Parameter] public RenderFragment Fragment2 { get; set; }

此時調用需要調整一下,不然框架不知道把內容片段打包進哪個屬性里

 <MyComp>
        <Fragment1>

            <div> Fragment1 </div>
        </Fragment1>
        <Fragment1>
            <div> Fragment1.1  </div>

        </Fragment1>
        <Fragment2>
            <div> Fragment2  </div>

        </Fragment2>
  
    </MyComp>

這裡故意重覆處理了Fragment1，可以看看結果。

3、帶參數的RenderFragment
code:

[Parameter] public RenderFragment<MyComp> ChildContent { get; set; }

調用及傳參

  <MyComp Context="self" > //<ChildContent>
       @self.GetType()
      
    </MyComp>  //</ChildContent>

4、打開的組件聲明標記內部，除了可以使用RenderFragment 參數屬性外，其他的razor 語法基本都支持，也包括另外一個組件。
比如

  <MyComp>
         <CompA />
          <CompB> ...... </CompB>
</MyComp>

或者

  <MyComp>
       <Fragment1>
         <CompA />
      </Fragment1>

          <Fragment2>
          <CompB> ...... </CompB>
          </Fragment2>
</MyComp>

雖然看上去，聲明標記的代碼很相似，但卻有著實質上的不同。
當我們使用 標記聲明一個參數屬性時，我們是在生成RenderFragment，隨後將其賦值給對應的屬性。
當我們使用標記聲明一個組件時，我們是在構造一個組件實例，然後調用它，將組件輸出插入到組件所在位置。
參數屬性（RenderFragment ）屬於組件，是組件的一個屬性，互相關係是明確的類型《=》成員關係。
組件內部的其他組件標記很多時候只是為了復用一些輸出片段，如果不通過代碼進行一些處理的話，是無法明確知道組件之間關係的。

四、CascadingValue/CascadingParameter

組件多起來之後，組件之間的數據共用和傳遞以及組件間的關係就會變的很麻煩，數量少的時候，還可以使用@ref 手工指定，多起來之後@ref明顯不是一個好方法。 組件CascadingValue和對應的特性[CascadingParameter]就是為瞭解決這一問題而出現。

一個CascadingValue 內的所有組件 包括子級，只要組件屬性上附加了[CascadingParameter]特性，並且值內容可以相容，此屬性就會被賦值。

比如給組件定義 屬性接收CascadingValue

        [CascadingParameter] public  int Value { get; set; }
        [CascadingParameter] public string SValue { get; set; }

//修改下輸出
    protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.AddMarkupContent(0, $"<div>CascadingValue: {Value},{SValue} </div>");// 一個int，一個string
            ChildContent?.Invoke(this)(builder);//載入下級組件
            base.BuildRenderTree(builder);
        }

在razor頁中

 <CascadingValue Value="123"> //int
      <MyComp>
                         <MyComp></MyComp>
                     </MyComp>
</CascadingValue >

執行後我們就會發現，兩個組件都捕獲到了int 值 123.
現在再加一個CascadingValue

 <CascadingValue Value="123"> //int
<CascadingValue Value="@("aaaa")"> //string
      <MyComp>
                         <MyComp></MyComp>
                     </MyComp>
</CascadingValue >
</CascadingValue >

分屬兩個CascadingValue 的兩個不同類型值，就被每個組件的兩個屬性捕獲到，方便、強大而且自身不產生任何HTML輸出，因此使用場景非常廣泛。比如官方Forms組件中就是藉助CascadingValue/Parameter 完成model的設置，再比如，組件預設沒有處理父子、包含關係的介面，這時就可以簡單的定義一個[CascadingParameter] public ComponentBase Parent{get;set;}專門接收父級組件，處理類似Table/Columns之類的組件關係。

五、總結

組件是為其自身的 BuildRenderTree方法 （ RenderFragment ）服務的，組件上的各種屬性方法，都是為了給RenderFragment 做環境準備，因此組件實質上是個RenderFragment的包裝類。組件系統則通過一個RenderTreeBuilder依次調用各組件，收集輸出內容，最終交給系統內部完成輸出。
1、.Razor文件會被編譯為一個組件類（obj/debug/netcore3.0/razor/...)
2、組件系統創建RenderTreeBuilder，將其交給組件實例
3、組件實例使用 RenderTreeBuilder，調用自身 BuildRenderTree。
4、等待組件狀態變化，再次輸出。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C#以對象為成員的例子
    using System; using System.Collections.Generic; using System.Text; namespace test { class Program { static void Main(string[] args) { Date birthday = ...
  • C#構造函數、屬性的應用
    using System; using System.Collections.Generic; using System.Text; namespace test { class Program { static void Main(string[] args) { Time test1 = new ...
  • 建議收藏備用：.net core使用QRCoder生成普通二維碼和帶Logo的二維碼詳細使用教程，源碼已更新至開源模板
    隨著互聯網越來越生活化，二維碼的使用越來越普遍，不論是掃碼支付還是掃碼關註引流，似乎我們總是離不開二維碼，那麼很多需要推廣的文章或社區想要自己的二維碼，那麼你是不是需要在網站直接提供給用戶呢？很多開發者就在網上百度解決方案，邊做邊踩坑，甚至很多人寫的開發案例都是截圖或者類庫引用都沒說清楚，在這個摸索 ...
  • C#在迴圈中使用Random時生成的隨機數相同的解決辦法
    場景 在迴圈中使用 Random y = new Random(); 生成隨機數時每次迴圈生成的數是一樣的。 for (int i = 1; i < 20000;i++ ) { Random y = new Random(); PointPairList list1 = new PointPairL ...
  • Winform中自定義ZedGraph右鍵複製成功後的提示
    場景 Winform中實現ZedGraph中曲線右鍵顯示為中文： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100115292 在上面對郵件菜單進行漢化後效果 但是此時的右鍵複製後提示依然為中文 怎樣將複製成功的提示修改為自定 ...
  • C#中巧用Lambda進行數據的篩選查詢等處理
    場景 有一個Record對象的list，如果要根據其某個屬性CycleIndex進行分組，類似於sql的group by分組查詢。 如果要在這個這個list中查找出符合某種條件的數據，類似於sql的where條件查詢。 註： 博客主頁：https://blog.csdn.net/badao_lium ...
  • Winform中設置ZedGraph的X軸的刻度根據曲線獲取
    場景 Winforn中設置ZedGraph曲線圖的屬性、坐標軸屬性、刻度屬性： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100112573 在對ZedGraph進行添加曲線時，需要對X軸的刻度進行賦值，需要一個string的 ...
  • C#中在定義事件委托時怎樣跨窗體傳遞參數
    場景 C#中委托與事件的使用-以Winform中跨窗體傳值為例： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100150700 參照上文在定義事件時傳遞參數為簡單的string，如果要傳遞比較複雜的參數，那麼就可以使用對象將參 ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類