Blazorチートシート

Blazorで使われる記述を簡単にまとめてみました。

データバインド

変数のバインド

<p>@value</P>

inputタグへのバインド

<input @bind-value="<変数名>" />  @bind-<バインド先の属性名>
<input @bind="<変数名>" />

バインド先の属性名を省略した場合は、デフォルトの属性のバインドされる。

バインドタイミング

<input @bind="<変数名>" @bind:event="oninput"  /> 即時反映される。
<input @bind="<変数名>" @bind:event="onchange"  /> 入力確定時、Enter押下かフォーカスが外れたとき

スタイルへのバインド

<div @bind-style="fontsize" @bind-style:event="onchange" >フォントサイズを変更</div>
<div style="font-size: @(fontSize)pt" >フォントサイズを変更</div>

数値入力

<input type="number" @bind="<変数名>" />

項目選択

<select @bind="<変数名>">
    @foreach(var item in items)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>

チェックボックス

<input type="checkbox" @bind="<変数名>" />

コンポーネント関連

パラメーター付きの子コンポーネントの呼び出し

Razor

<Component Name="Name" Year="2021" />

C#

//コンポーネント側のプロパティに[Parameter]をつけておく
[Parameter]
public string Name { get; set; } 

[Parameter]
public int Year { get; set; }

親コンポーネントからリストの要素として呼ばれる際は、

[Parameter]
Public RednerFragment ChildContent {get; set;} //を作成しておく

属性スプラッティングでコンポーネントにデータを渡す

@foreach (var item in Items)
{
	Var attrs = new Dictionary<string, object>()
	{
		{ "Name", item.Name },
		{ "Value", item.Value },
	}
	<Component @attributes="attrs" />
	
	//使わない場合
	<Component Name=@item.Name Value=@item.Value />
}

C#とJavascriptの連携

C#からJavascriptを呼び出す

JSRuntimeをインジェクトする。

@page "/index"
@inject IJSRuntime JSRuntime;

Javascriptの関数を定義する

<script>
    window.jsFunctions = {
        changeValue: function (value, id) {
            $(`#${id}`).text(value);
        }
    }
</script>

C#からJavascriptの関数を呼び出す

private async void Method()
{
    await JSRuntime.InvokeVoidAsync("jsFUnctions.changeValue", "value", "id");
}

JavascriptからC#の処理を呼び出す

C#の処理

@code {
    [JSInvokable]
    public static void SomeMethod(string value) //staticである必要がある。
    {
        Console.WriteLine(value);
        return;
    }
}

JavascriptからC#のメソッドを呼び出す

DotNet.invokeMethod("<アセンブリ名>", "SomeMethod", "value");

コンポーネント間のデータバインド

親から子へのデータバインド

子コンポーネントに

[Parameter]
public EventCallBack<string> XXXXChanged { get; set; }

のような形でバインドするプロパティ名 + Changedのイベントを作成する。

親コンポーネントからの呼び出し

<ChildComponent @bind-XXXX="XXXX" />

子から親へのデータバインド

[Parameter] 
public EventCallBack<double> XXXXChanged {get; set;}

private async void clickSomething()
{
	await resultChanged.InvokeAsync(XXXX);
}

子のイベントを親に伝える

子コンポーネント実装

[Parameter]
public EventCallback<string> OnResultChanged {get; set;}
private async void SomeMethod()
{
	await OnResultChanged.InvkeAsync(XXXX);
}

親コンポーネントの実装

<ChildComponent OnResultChanged="@ChangeResult" />
@code {
	private void ChangeResult(string result)
	{
		this.XXX = result;
	}
}

イベント

クリックイベント

<button @onclick="onSubmit">登録</button>

ラムダ式の場合

<button @onclick="@(() => Message = "Some Message…")">登録</button>

KeyPressイベント

<input type="text" @bind="Text" @onkeypress="OnKeyPress" />

マウスムーブイベント

<rect @onmousemove="OnMouseMove"></rect>

ルーティング

ページパラメーター

@page "/param/{param1}/{param2}"

初期化

初期化処理（同期）

protected override void OnInitialized()
{
    ...
}

初期化処理（非同期）

protected override async Task OnInitializedAsync()
{
    await ...
}