2021-11-01から1ヶ月間の記事一覧

子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>…