Blazor

値を保持する

・AppState docs.microsoft.com

子Componentから親に値を引き渡す

子側で引数付きのイベントを起こし、親はそのイベントを購読する。 ●手順 <<Component側>> ①子側でイベントコールバックを定義 [Parameter] public EventCallback<引き渡す値の型> 任意のイベント名 { get; set; } ②値を渡したいタイミングでイベントを起こす イベントは</component側>…

Navigation

コードからページを遷移する場合、NavigationManagerを使う。 (*)DIして使用すればよい。 ■アプリケーションのルートページに遷移する例 @inject NavigationManager NavigationManage; this.NavigationManager .NavigateTo("./");

コンポーネントにコンテンツを渡す

■RenderFragment ・コンポーネントにHTMLなどのコンテンツを渡すことを可能とするもの。 ・コンポーネント側Codeでは、RenderFragment型で、コンテンツを受け取る パラメータを定義 ・コンポーネント側razorでは、受け取ったコンテンツを表示したい場所に、 …

Component間のデータ授受(属性スプラッティング)

コンポーネントに複数のパラメータを一括で渡すことができる。 (*)ただし、一つのコンポーネントに渡せるパラメータのまとまりは一種だけ。 ・CaptureUnmatchedValues属性を定義し、Dictionary型でパラメータを定義する。 ■Component側(パラメータを受ける…

Task,async,await

■Task ・処理したい仕事のまとまり:Task(=複数のメソッド)を保持して、 それを実行開始するもの。手順書。 ・Task.Runは、Taskのインスタンス化と実行を同時にするもの。 ・Task.Runは内部のメソッドを非同期で実行開始だけするもの。 よって、処理が終わ…

DIのやりかた

①Program.csのMainメソッド内にDIするクラス名を設定。 ex)builder.Services.AddScoped<クラス名>(); ②DI先となるコンポーネント(XX.razor)の行頭で、以下の通りInjectする。 @inject クラス名 変数名 ③使用する際は、this.変数名.xxxで使用。 (*)Injectする…

子Componentから親への受渡まとめ

基本的に、以下の2のやり方だけやっていればよいのではないか? ■子側 子側はやり方は一つだけ。 ①[Parameter]属性付きでEventCallbackを定義する。 ②渡したいタイミングで、定義したイベントを起こす。 ① [Parameter] public EventCallback<渡す値の型> イ…

Razor記法‐制御構文

■IF @if(条件) { <div>Trueの場合です</div> } else { <div>Falseの場合です</div> } ■ForEach @foreach(var 変数 in コレクション) { <div>変数</div> }

Razor記法‐基本

■基本 ①HTMLとC#の切り替えは[@]で始まり、半角スペースや改行で終わる。 ex)私は @name です。 この例では変数nameを@nameと指定し、nameプロパティの値を表示している。 (*)@nameの前後には半角スペースが必須! 前に半角スペースがない場合@nameという文…

Component間のデータ授受(子⇒親)②

■子で起こした引数有のイベントを親で購読する。 ●親 @page "/ParentBmi3" <BlazorBmi.Components.BmiChild3 OnResultChanged="@ChanegResult" /> BMI:@Bmi @code{ public double Bmi { get; set; } private void ChanegResult(double result) { this.Bmi = result; } } ●子 <div>子のイベントを親でハンドル</div> <div>身長:</div></blazorbmi.components.bmichild3>

Component間のデータ授受(子⇒親)①

■子での変更を親に伝えたい場合、Event経由で行う必要がある。 ■親(呼び出し側)<PJ名.Components.コンポーネント名 Weight ="@Weight" Height ="@Height" @bind-Result="Result" /> //親から子への引き渡しはbindは不要 @code{ public double Weight { get; set; } = 60; public double Height { get; set; } = 170; public double Result { get; set; } = 0;}</pj名.components.コンポーネント名>…

Component間のデータ授受(親⇒子)

■ロード時に1回だけ親から子に渡すケース ●親 <PJ名.Components.コンポーネント名 Param名①="test" Param名②="2021" /> 親(コンポーネントを使う側)では、"パラメータ名:値"という形で コンポーネントに値を渡す。パラメータ名は、子で定義した[Parameter]属性 付きのプロパティ名 ●子 <div">Copyright 2020 by @Name @Year</div> @code { [Pa…

bindする場合としない場合

■bindする場合としない場合 ①<input type="text" @bind=変数 /> ②<input type="text" @value=変数 /> ①も②もどちらも変数の値がセットされるが、 ・bindした場合は、テキストの値を画面で変更時、変更値がCode側の変数に格納され、 変数の値をCode側で変更時、画面に反映される。(双方向) ・bindしない場合は、Code側での値変更…

双方向データバインディング

■値を別の要素に表示する @*テキストボックスで入力*@ <input class="form-control" @bind="Title"/> @*入力値が保存されるプロパティ*@ private string Title { get; set; } @*入力値をラベルに表示*@ <label class="col-form-label">@Title</label> ■即時反映する 上記例の場合、ロストフォーカス時にラベルに反映される。 入力値を即時反映す…

Child Components

■Components ・Blazorで作る一つ一つの要素(Pageなど)をComponentsという。 機能ごとに個別にComponentsを作り、それを適宜ページで呼び出す ことでシステムを構築していくことができる ■Child Cpomponents ・Pageの任意の場所から呼び出すComponentをChild …

Using

■Using .razorの場合、Using句は先頭、ルーティング(@page)より前に書く。 どのページでも使うようなものの場合、「_Imports.razor」ファイルに書く。

既定のイベント

■OnInitialized ・ページ表示時に最初に呼ばれるイベント。 オーバーライド可能。 protected override void OnInitialized() { base.OnInitialized(); }

ルーティング

コンポーネント(.razor)の戦闘に以下のように記載する。 ①Current ・@page "/" http://ホスト名/を指定した時に開かれるページ ②Current以下 ・@page "/sample" http://ホスト名/sampleと指定した時に開かれるページ ③クエリ文字列 ・@page "/sample/{param1…

タグ

■button <button class="btn btn-primary" @onclick="IncrementCount"> @onclickに、紐づくCodeのメソッド名を書く ■input <input @bind="@変数など" /> @bind-value、またはbindに、紐づける変数やプロパティを書く。 (*)bind-valueにすると、なぜかbind:eventが効かない‼bindなら効く。 変数やプロパティのインスタンスが無いと実行時エラーになる</button>…