AntDesignBlazorを使ってコンボボックスのベースコンポーネントを作る

やりたいこと

• コンボボックスのベースコンポーネント作成する
• 各コンボボックスは、共通コンポーネントを継承して、データソースだけ変更し作成する

コード

CmbBase

<div>
    <Select 
        TItem="KeyValuePair<int,string>"
        TItemValue="KeyValuePair<int,string>"
        DataSource="@Source.ToList()"
        LabelName="@nameof(KeyValuePair<int, string>.Value)"
        @bind-value="@ChildValue"/>
</div>

@code {
    [Parameter]
    public Dictionary<int, string> Source { get; set; } = new();
    [Parameter] 
    public KeyValuePair<int, string> Value { get; set; }
    [Parameter]
    public KeyValuePair<int, string> ChildValue
    {
        get => Value;
        set => ValueChanged.InvokeAsync(value);
    }
    [Parameter]
    public EventCallback<KeyValuePair<int, string>> ValueChanged { get; set; }
}

CmbParamKey

<CmbBase Source="Source" @bind-value="@ChildValue"></CmbBase>

@code {
    [Parameter]
    public　int Value { get; set; }
    [Parameter]
    public KeyValuePair<int, string> ChildValue
    {
        get => Source.Where(s => s.Key == Value).First();
        set => ValueChanged.InvokeAsync(value.Key);
    }
    [Parameter]
    public EventCallback<int> ValueChanged { get; set; }

    protected Dictionary<int, string> Source = new();
}

CmbDemoA

@inherits CmbParamKey
@{
    base.BuildRenderTree(__builder);
}

@code {
    protected override void OnInitialized()
    {
        Source = new Dictionary<int, string>()
        {
            {0,"" },
            {1,"荒川" },
            {2,"碇川" },
            {3,"宇田川" },
        };
    }
}

Demo

@page "/Combobox"

<CmbDemoA @bind-Value="@model.A"></CmbDemoA>
<Button @onclick="@model.Log"/>

@code {
    public ViewModel model = new();
}

できたこと

コンボボックス(CmbDemoA)は、ベースコンポーネント(CmbParamKey)を継承し、データソースの設定にだけ注力すればよい。

分かったこと

• razorファイルでのロジックの継承には『@inherits』を使用する
• razorファイルでの表示の継承には『base.BuildRenderTree(__builder)』を使用する
  @layoutでは継承されない

参考情報

https://github.com/dotnet/aspnetcore/issues/21664