blazor Dynamic Component

.NET6から、blazorのタグとして、<DynamicComponent>がサポートされた。

このタグはrazorコンポーネントを動的に指定して表示するものであり、ページ内で、表示するコンポーネントの切替などを行う事を想定していると思われる。

使い方は以下のような感じ

@page "/"

<PageTitle>Dynamic Component Test</PageTitle>
<br/>
<p>
    <DynamicComponent>のテスト<br/>
    下記からコンポーネントを選んで、そのコンポーネントを表示します。
</p>
コンポーネント:
<select @onchange="OnDropDownChange">
    <option value=""> </option>
    <option value="@nameof(Counter)">Counter</option>
    <option value="@nameof(FetchData)">Fetch Data</option>
</select><br/>
<hr/>
<div class="ComponentBody">
@if (ComponentType != null) {
    <DynamicComponent Type="@ComponentType" Parameters="@Params" />
}
</div>
@code {

    protected Type? ComponentType = null;
    protected IDictionary<string,object>? Params;

    protected void OnDropDownChange(ChangeEventArgs e) {
        if (e.Value?.ToString()?.Length != 0) {
            ComponentType = Type.GetType($"BlDynamic.Pages.{e.Value}");
            if (e.Value?.ToString() == nameof(Counter)) {
                Params = new Dictionary<string,object>() { {"InitialCount",5} };
            } else {
                Params = null;
            }
        } else {
            ComponentType = null;
        }
    }

}

表示するコンポーネントをselectタグで選んで、そのコンポーネントを表示する簡単な例となっている。使用しているコンポーネントはblazorプロジェクトを作成すると、自動的に生成される、Counter.razorとFetchData.razor。

Counterの方にはInitialCountと言うパラメータを追加して、この呼出し例では5を設定している。

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    [Parameter]
    public int InitialCount { get; set; } = 0;
    private int currentCount = 0;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        currentCount = InitialCount;
    }
    
    private void IncrementCount()
    {
        currentCount++;
    }
}
実行例1
実行例2
実行例3

このように、動的に表示するコンポーネントを変更することが可能。

何かに使えるかもしれないので、メモ。

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。 好きなことだけ拾って投稿しているので、内容にはあまり期待しないでねw
カテゴリー: .NET, asp.net core, Blazor, C#, 技術系 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください