初めまして、アキちゃんです。
備忘録をかねてブログを書くことにしました。
今回はBlazor+RadzenでUserControlについて書きます。
それでは早速・・・Blazor＋RadzenでUserControl！
Lesson.1 事の発端
Blazor+RadzenでUserControl作ろうとしたらデータバインドでだいぶ苦戦しました。
なので書き残しておこうと思います。
Lesson.2 コンポーネントの作成
Blazorでは、UserControlという名称は出てきません。
代わりにコンポーネントというそうです、なので新しい項目の追加からRazorコンポーネントを追加します。
今回は外部から値を入力・出力だけするシンプルなものを作ろうと思うので追加したコンポーネントに以下の追加・修正をします。
<RadzenTextBox Value=@Note></RadzenTextBox>
@code {
string _note;
[Parameter]
public string Note
{
get => _note;
set
{
if (_note != value)
{
_note = value;
NoteChanged.InvokeAsync(value);
}
else
{
return;
}
}
}
[Parameter]
public EventCallback<string> NoteChanged { get; set; }
}
みそなのは属性として[Parameter]を追加しているところと、値が変わったときに宣言したコールバックを読んでいることです。
コールバックを呼ぶことで変更通知が発行されコンポーネントの値が変更されます。
Lesson.3 コンポーネントを使う
作成したコンポーネントはほかのコンポーネントと同様に扱えます。
適当なページ（今回はIndex.razor）を以下のように修正します。
@page "/"
<SampleComponent @bind-Note=@value></SampleComponent>
<RadzenTextBox @bind-Value=@input></RadzenTextBox>
<RadzenButton Text="転送" Click=OnClick></RadzenButton>
@code {
string value = string.Empty;
string input = string.Empty;
async Task OnClick()
{
value = input;
}
}
コンポーネントの中で宣言した[Parameter]属性を持つ変数は上記のように"@bind-[コンポーネント変数名]=@ページ内変数"でバインドし使うことができます。
ここまできたら実行してまず右側のテキストボックスに文字を入力し、転送ボタンを押下します。
すると左側のテキストボックスに入力した文字が入力されるとおもいます。
Lesson.4 あとがき
以上！
