Blazorチートシート

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

# データバインド

## 変数のバインド
```HTML
<p>@value</P>
```

## inputタグへのバインド
```HTML
<input @bind-value="<変数名>" />  @bind-<バインド先の属性名>
<input @bind="<変数名>" />
```
バインド先の属性名を省略した場合は、デフォルトの属性のバインドされる。

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

## スタイルへのバインド
```HTML
<div @bind-style="fontsize" @bind-style:event="onchange" >フォントサイズを変更</div>
<div style="font-size: @(fontSize)pt" >フォントサイズを変更</div>
```

## 数値入力
```HTML
<input type="number" @bind="<変数名>" />
```

## 項目選択
```HTML
<select @bind="<変数名>">
    @foreach(var item in items)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>
```

## チェックボックス
```HTML
<input type="checkbox" @bind="<変数名>" />
```

# コンポーネント関連

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

Razor

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

C\#

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

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

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

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

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

```HTML
@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をインジェクトする。

```C#
@page "/index"
@inject IJSRuntime JSRuntime;
```

Javascriptの関数を定義する

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

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

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

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

C#の処理

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

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

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



# コンポーネント間のデータバインド
## 親から子へのデータバインド

子コンポーネントに

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

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

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

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

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

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

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

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

### 子コンポーネント実装
```C#
[Parameter]
public EventCallback<string> OnResultChanged {get; set;}
private async void SomeMethod()
{
	await OnResultChanged.InvkeAsync(XXXX);
}
```

### 親コンポーネントの実装

```C#
<ChildComponent OnResultChanged="@ChangeResult" />
@code {
	private void ChangeResult(string result)
	{
		this.XXX = result;
	}
}
```
# イベント
## クリックイベント

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

### ラムダ式の場合
```HTML
<button @onclick="@(() => Message = "Some Message…")">登録</button>
```

## KeyPressイベント

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

## マウスムーブイベント

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

# ルーティング

## ページパラメーター
```HTML
@page "/param/{param1}/{param2}"
```

# 初期化

## 初期化処理（同期）
```C#
protected override void OnInitialized()
{
    ...
}
```

## 初期化処理（非同期）
```C#
protected override async Task OnInitializedAsync()
{
    await ...
}
```