[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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類