ASP.NET Core Blazor Webassembly 之 組件

来源:https://www.cnblogs.com/kklldog/archive/2020/05/27/blazor-webassembly-component.html
-Advertisement-
Play Games

關於組件 現在前端幾大輪子全面組件化。組件讓我們可以對常用的功能進行封裝，以便復用。組件這東西對於搞.NET的同學其實並不陌生，以前ASP.NET WebForm的用戶控制項其實也是一種組件。它封裝html代碼，封裝業務邏輯，對外提供屬性事件等信息，它完完全全就是個組件，只是用戶控制項跑在服務端，而現在 ...


關於組件

現在前端幾大輪子全面組件化。組件讓我們可以對常用的功能進行封裝，以便復用。組件這東西對於搞.NET的同學其實並不陌生，以前ASP.NET WebForm的用戶控制項其實也是一種組件。它封裝html代碼，封裝業務邏輯，對外提供屬性事件等信息，它完完全全就是個組件，只是用戶控制項跑在服務端，而現在的組件大多數直接跑在前端。現在Blazor Webassembly微軟正式把組件帶到前端，讓我們看看它是怎麼玩的。

第一個組件

廢話不多說下麵開始構建第一個組件。這個組件很簡單就是綠色的面板加一個標題的容器，我們就叫它GreenPanel吧。

新建Blazor Webassembly項目

前幾天的build大會，Blazor Webassembly已經正式release了。我們更新最新版的Core SDK就會安裝正式版的模板。
tCTG2F.md.png
新建項目選Blazor Webassembly App項目模板

新建GreenPanel組件

在pages命令下新建一個文件夾叫做components，在文件夾下新建一個razor組件，命名為GreenPanel.razor。

註意：組件的命名必須大寫字母開頭

tCTubn.md.png
添加代碼如下：

<div class="green-panel">
    <div class="title">
        Green panel
    </div>
    <div class="content">
    </div>
</div>

<style>
    .green-panel{
        background-color: green;
        height:400px;
        width:400px;
    }
    .green-panel .title {
        border-bottom:1px solid #333;
        height:30px;
    }
    .green-panel .content {
    }
</style>

@code { override void OnInitialized()
        {
            base.OnInitialized();
        }
}

一個組件主要是由html，style ，code等組成。html，style用來控制ui表現層，code用來封裝邏輯。

註意：Blazor目前沒有樣式隔離技術，所以寫在組件內的style有可能會影響其他html元素

使用組件

使用組件跟其他框架大體是相同的，直接在需要使用的地方使用以我們組件名作為一個html元素插入：
如果不在同一層目錄下，則需要導入命名空間。在_Imports.razor文件內引用組件的命名空間：

...
@using BlazorWasmComponent.Components

在index頁面使用組件：

<GreenPanel></GreenPanel>

運行一下：
tCbQUI.md.png

組件類

每個組件最後都會編譯成一個C#類，讓我們用ILSPy看看一眼長啥樣：

// BlazorWasmComponent.Components.GreenPanel
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

public class GreenPanel : ComponentBase
{
	protected override void BuildRenderTree(RenderTreeBuilder __builder)
	{
		__builder.AddMarkupContent(0, "<div class=\"green-panel\">\r\n    <div class=\"title\">\r\n        Green panel\r\n    </div>\r\n    <div class=\"content\">\r\n    </div>\r\n</div>\r\n\r\n");
		__builder.AddMarkupContent(1, "<style>\r\n    .green-panel{\r\n        background-color: green;\r\n        height:400px;\r\n        width:400px;\r\n    }\r\n    .green-panel .title {\r\n        border-bottom:1px solid #333;\r\n        height:30px;\r\n    }\r\n    .green-panel .content {\r\n    }\r\n</style>");
	}

	protected override void OnInitialized()
	{
		base.OnInitialized();
	}
}

GreenPanel組件會編譯成一個GreenPanel類，繼承自ComponentBase基類。裡面有幾個方法：

  1. BuildRenderTree 用來構建html，css等ui元素
  2. 其它code部分會也會被合併到這個類裡面

生命周期

瞭解組件聲明周期對我們使用組件有很大的幫助。一個組件的聲周期主要依次以下幾個階段：

  1. OnInitialized、OnInitializedAsync
  2. OnParametersSet、OnParametersSetAsync
  3. OnAfterRender、OnAfterRenderAsync
  4. Dispose

如果要在每個生命階段插入特定的邏輯，請重寫這些方法：

@implements IDisposable

@code {
    protected override void OnInitialized()
    {
        Console.WriteLine("OnInitialized");
        base.OnInitialized();
    }
    protected override Task OnInitializedAsync()
    {
        Console.WriteLine("OnInitializedAsync");
        return base.OnInitializedAsync();
    }
    protected override void OnParametersSet()
    {
        Console.WriteLine("OnParametersSet");
        base.OnParametersSet();
    }
    protected override Task OnParametersSetAsync()
    {
        Console.WriteLine("OnParametersSetAsync");

        return base.OnParametersSetAsync();
    }
    protected override void OnAfterRender(bool firstRender)
    {
        Console.WriteLine("OnAfterRender");
        base.OnAfterRender(firstRender);
    }
    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        Console.WriteLine("OnAfterRenderAsync");
        return base.OnAfterRenderAsync(firstRender);
    }

    public void Dispose()
    {
        Console.WriteLine("Dispose");
    }
}

註意：組件預設並不繼承IDisposable介面，如果要重寫Dispose方法請手工使用@implements方法繼承介面IDisposable

運行一下，並且切換一下頁面，使組件銷毀，可以看到所有生命周期方法依次執行：
tCO5in.md.png

組件屬性

我們定義組件總是免不了跟外部進行交互，比如從父組件接受參數，或者把自身的數據對外暴露。我們可以使用[Parameter]來定義一個組件的屬性。這裡叫做Parameter，估計是為了跟C#里的屬性（property，attribute）進行區分。
對我們的GreenPanel組件進行改進，支持從外部定義標題的內容：

<div class="green-panel">
    <div class="title">
        @Title
    </div>
    <div class="content">
    </div>
</div>

<style>
    .green-panel {
        background-color: green;
        height: 400px;
        width: 400px;
    }

        .green-panel .title {
            border-bottom: 1px solid #333;
            height: 30px;
        }

        .green-panel .content {
        }
</style>

@code {

    [Parameter]
    public string Title { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

}

在父組件使用：

@page "/"

<GreenPanel Title="Panel A"></GreenPanel>

運行一下：
tFRHvd.png

上面傳遞的是簡單類型String，下麵讓我們試試傳遞複雜類型的數據進去。我們繼續對GreenPanel改造。改造成ColorPanel，它接受一個Setting對象來設置標題跟背景顏色。
定義Setting類：

  public class PanelSetting
    {
        public string Title { get; set; }

        public string BgColor { get; set; }
    }

定義ColorPanel：

<div class="green-panel">
    <div class="title">
        @Setting.Title
    </div>
    <div class="content">
    </div>
</div>

<style>
    .green-panel {
        background-color: @Setting.BgColor;
        height: 400px;
        width: 400px;
    }

        .green-panel .title {
            border-bottom: 1px solid #333;
            height: 30px;
        }

        .green-panel .content {
        }
</style>

@using BlazorWasmComponent.models;
@code {

    [Parameter]
    public PanelSetting Setting { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

}

在父組件使用：

@page "/"

<p>@PanelSetting.Title</p>
<p>@PanelSetting.BgColor</p>

<ColorPanel Setting="PanelSetting"></ColorPanel>

@using BlazorWasmComponent.models;
@code{  

    public PanelSetting PanelSetting { get; set; }

    protected override void OnInitialized()
    {
        PanelSetting = new PanelSetting
        {
            BgColor = "Red",
            Title = "Panel RED"
        };

        base.OnInitialized();
    }
}

運行一下：
tFhaDA.png

註意：上一篇WebAssembly初探里有個錯誤，當時認為這個屬性是單向數據流，經過試驗子組件對父組件傳入的數據源進行修改的時候其實是會反應到父組件的，只是如果你使用@符號綁定數據的時候並不會像angularjs，vue等立馬進行刷新。關於這個事情感覺可以單獨寫一篇，這裡就不細說了。

組件事件

我們的組件當然也可以提供事件，已供外部訂閱，然後從內部激發來通知外部完成業務邏輯，實現類似觀察者模式。繼續改造ColorPanel，當點擊時候對外拋出事件。
使用EventCallback、EventCallback< T > 來定義事件：

<div class="green-panel" @onclick="DoClick">
    <div class="title">
        @Setting.Title
    </div>
    <div class="content">
    </div>
</div>

<style>
    .green-panel {
        background-color: @Setting.BgColor;
        height: 400px;
        width: 400px;
    }

        .green-panel .title {
            border-bottom: 1px solid #333;
            height: 30px;
        }

        .green-panel .content {
        }
</style>

@using BlazorWasmComponent.models;
@code {

    [Parameter]
    public PanelSetting Setting { get; set; }
    [Parameter]
    public EventCallback OnClick { get; set; }

    protected override void OnInitialized()
    {

        base.OnInitialized();
    }

    public void DoClick()
    {
        OnClick.InvokeAsync(null);
    }
}

父組件訂閱事件：

@page "/"

<p>
    子組件點擊次數：@ClickCount
</p>
<ColorPanel Setting="PanelSetting" OnClick="HandleClick"></ColorPanel>

@using BlazorWasmComponent.models;
@code{  

    public PanelSetting PanelSetting { get; set; }

    public int ClickCount { get; set; }

    protected override void OnInitialized()
    {
        PanelSetting = new PanelSetting
        {
            BgColor = "Red",
            Title = "Panel RED"
        };

        base.OnInitialized();
    }

    private void HandleClick()
    {
        ClickCount++;
    }
}

運行一下，並點擊子組件，父組件的計數器會被+1：
tFTkSf.png

子內容

當我們定義容器級別的組件時往往需要往組件內傳遞子內容。比如我們的ColorPanel明顯就有這種需求，這個Panel內部會被放上其它元素或者其它組件，這個時候我們可以使用ChildContent屬性來實現。

<div class="green-panel" @onclick="DoClick">
    <div class="title">
        @Setting.Title
    </div>
    <div class="content">
        @ChildContent
    </div>
</div>

<style>
    .green-panel {
        background-color: @Setting.BgColor;
        height: 400px;
        width: 400px;
    }

        .green-panel .title {
            border-bottom: 1px solid #333;
            height: 30px;
        }

        .green-panel .content {
        }
</style>

@using BlazorWasmComponent.models;
@code {

    [Parameter]
    public PanelSetting Setting { get; set; }
    [Parameter]
    public EventCallback OnClick { get; set; }

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

    protected override void OnInitialized()
    {

        base.OnInitialized();
    }

    public void DoClick()
    {
        OnClick.InvokeAsync(null);
    }
}

定義一個類型為RenderFragment名稱為ChildContent的屬性，然後在html內使用@ChildContent來指代它。這樣子內容就會被替換到指定的位置。
父組件使用，我們給ColorPanel的內部設置一個文本框吧：

@page "/"

<p>
    子組件點擊次數：@ClickCount
</p>
<ColorPanel Setting="PanelSetting" OnClick="HandleClick">

   輸入框： <input />

</ColorPanel>

@using BlazorWasmComponent.models;
@code{  

    public PanelSetting PanelSetting { get; set; }

    public int ClickCount { get; set; }

    protected override void OnInitialized()
    {
        PanelSetting = new PanelSetting
        {
            BgColor = "Red",
            Title = "Panel RED"
        };

        base.OnInitialized();
    }

    private void HandleClick()
    {
        ClickCount++;
    }
}

運行一下看看我們的文本框會不會出現在panel內部：
tF7tv8.png

@ref

因為我們的組件使用是在html內，當你在@code內想要直接通過代碼操作子組件的時候可以給子組件設置@ref屬性來直接獲取到子組件的對象。繼續改造ColorPanel，在它初始化的時候生產一個ID。

<div class="green-panel" @onclick="DoClick">
    <div class="title">
        @Setting.Title
    </div>
    <div class="content">
        @ChildContent
    </div>
</div>

<style>
    .green-panel {
        background-color: @Setting.BgColor;
        height: 400px;
        width: 400px;
    }

        .green-panel .title {
            border-bottom: 1px solid #333;
            height: 30px;
        }

        .green-panel .content {
        }
</style>

@using BlazorWasmComponent.models;
@code {

    public string ID { get; set; }

    [Parameter]
    public PanelSetting Setting { get; set; }
    [Parameter]
    public EventCallback OnClick { get; set; }

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

    protected override void OnInitialized()
    {
        ID = Guid.NewGuid().ToString();
        base.OnInitialized();
    }

    public void DoClick()
    {
        OnClick.InvokeAsync(null);
    }
}

修改父組件，添加一個按鈕，當點擊的時候直接獲取子組件的Id：

@page "/"

<p>
    子組件ID：@subId
</p>
<ColorPanel Setting="PanelSetting" OnClick="HandleClick" @ref="colorPanel">
   輸入框： <input />
</ColorPanel>
<button @onclick="GetSubComponentId" class="btn btn-info">獲取子組件ID</button>

@using BlazorWasmComponent.models;
@code{  

    private string subId;

    private ColorPanel colorPanel;

    public PanelSetting PanelSetting { get; set; }

    public int ClickCount { get; set; }

    protected override void OnInitialized()
    {
        PanelSetting = new PanelSetting
        {
            BgColor = "Red",
            Title = "Panel RED"
        };

        base.OnInitialized();
    }

    private void HandleClick()
    {
        ClickCount++;
    }

    private void GetSubComponentId ()
    {
        this.subId = colorPanel.ID;
    }
}

運行一下：
tFLFsK.png

@key

當使用迴圈渲染組件的時候請在組件上使用@key來加速Blazor的diff演算法。有了key就可以快速的區分哪些組件是可以復用的，哪些是要新增或刪除的，特別是在對迴圈列表插入對象或者刪除對象的時候特別有用。如果使用過vue就應該很容易明白有了key可以降低虛擬dom演算法的複雜度，在這裡猜測blazor內部應該也是類似的演算法。

@page "/"


@foreach (var key in List)
{
    <ColorPanel @key="key" Setting="PanelSetting"></ColorPanel>
}

@using BlazorWasmComponent.models;
@code{  

    public List<String> List = new List<string>
    {
        Guid.NewGuid().ToString(),
         Guid.NewGuid().ToString(),
          Guid.NewGuid().ToString()
    };

    public PanelSetting PanelSetting { get; set; }


    protected override void OnInitialized()
    {
        PanelSetting = new PanelSetting
        {
            BgColor = "Red",
            Title = "Panel RED"
        };

        base.OnInitialized();
    }

}

太晚了就這樣吧，喜歡的話請點個贊，謝謝！

相關內容：
ASP.NET Core Blazor 初探之 Blazor WebAssembly
ASP.NET Core Blazor 初探之 Blazor Server


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

-Advertisement-
Play Games
更多相關文章
  • Python基礎-08數據嵌套
    8.數據嵌套 在Python中，各種數據是可以相互嵌套的，如列表中嵌套元組、整型、字典等，字典中也可以嵌套元組、列表等，甚至可以嵌套自身。使用起來非常靈活。這種嵌套可以在實際項目中靈活運用各種數據類型進行嵌套。示例如下所示： a=[ 1, 23.45, "name", ("name","age"), ...
  • 一起學scala--Map&Tuple
    一個經典的程式猿名言是：”如果只能有一種數據結構，那就用哈希表吧。“ ...
  • Python基礎-07集合
    7.集合 集合的主要特性如下所示： 1.集合中不會存在重覆元素，天生自帶去重功能 2.集合可使用{item1,item2,...itemn}或set()進行定義，如果要定義一個空的集合，必須使用set()函數 3.使用set()函數定義集合時，裡面的參數必須為列表或元組 4.集合是無序的 7.1 常 ...
  • 第六章第三十七題（格式化整數）(Format an integer) - 編程練習題答案
    6.37（格式化整數）使用下麵的方法頭編寫一個方法，用於將整數格式化為指定寬度： public static String format(int number, int width) 方法為數字number返回一個帶有一個或多個以0作為首碼的字元串。字元串的位數就是寬度。比如，format(34,4 ...
  • 1.下載/安裝Visual Studio
    天下武功，唯快不破，雖然支持C/C++ 開發工具(俗稱：IDE)有很多，但是在團隊項目開發中使用最多的還是Visual Studio（簡稱VS），好用而且功能強大，畢竟親爸爸是微軟！ 現在Visual Studio 已經更新到VS2019，VS 支持開發人員編寫跨平臺的應用程式，從 Windows ...
  • akka-typed(0) - typed-actor, typed messages
    akka 2.6.x正式發佈以來已經有好一段時間了。核心變化是typed-actor的正式啟用，當然persistence,cluster等模塊也有較大變化。一開始從名稱估摸就是把傳統any類型的消息改成強類型消息，所以想拖一段時間看看到底能對我們現有基於akka-classic的應用軟體有什麼深層 ...
  • Visual Studio2015 打包C# ActiveX控制項
    由於開發中發現以前的Activex控制項功能不夠用，沒辦法需要下載源碼重新增加功能。。。。 這個項目最開始也不我寫的，而我也是個小白，花了半天改好了代碼，然後打包用了一天半。-0- 各種百度，各種找。。。。準備用 InstallShield 2015打包，結果怎麼下打包好了就提示啥啥啥試用版。。。。最 ...
  • 如何將圖像的RGB三個通道分離
    格式轉換convert：轉換圖像的模式transpose：轉換圖像的格式convert之前已經使用過了，這裡就簡單演示一下transpose的作用，transpose主要傳入一些Image中的常量： from PIL import Image# 打開圖像im = Image.open('nnz.jp ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類