it技術:web開発:blzaor
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
it技術:web開発:blzaor [2024/02/19 11:17] – [BlazorとjQueryの連携] yajuadmin | it技術:web開発:blzaor [2024/03/22 15:04] (現在) – [ブラウザのキャッシュ回避] yajuadmin | ||
---|---|---|---|
行 287: | 行 287: | ||
</ | </ | ||
+ | ==== bindとonchangeの併用は不可 ==== | ||
+ | onchange を追加すると、Model.Procedure に値がセットされなくなる。 | ||
+ | |||
+ | <code html> | ||
+ | <BSInput InputType=" | ||
+ | </ | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | === 対応 === | ||
+ | onchange イベント処理内で値をセットする。 | ||
+ | |||
+ | <code csharp> | ||
+ | private void OnProcejureChange(ChangeEventArgs e) | ||
+ | { | ||
+ | Model.Procedure = e.Value.ToString() ?? ""; | ||
+ | } | ||
+ | </ | ||
==== MainLayout コンポーネント側にデータを反映させる ==== | ==== MainLayout コンポーネント側にデータを反映させる ==== | ||
カスケーディングを使用してパラメーターを渡す。 | カスケーディングを使用してパラメーターを渡す。 | ||
行 459: | 行 477: | ||
</ | </ | ||
+ | ==== カスタムコンポーネントのbind-value ==== | ||
+ | bind-value を指定したたけでは、" | ||
+ | そのため、ParameterにValueChangedを定義する。 | ||
+ | |||
+ | <code csharp Index.razor> | ||
+ | < | ||
+ | |||
+ | @code { | ||
+ | public string InputValue = " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | <code csharp CustomInput.razor> | ||
+ | <input value=" | ||
+ | < | ||
+ | |||
+ | @code { | ||
+ | [Parameter] | ||
+ | public string? Value { get; set; } | ||
+ | |||
+ | [Parameter] | ||
+ | public EventCallback< | ||
+ | private async Task OnInputChange(ChangeEventArgs args ) | ||
+ | { | ||
+ | Value = (string? | ||
+ | await ValueChanged.InvokeAsync(Value); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | ==== カスタムコンポーネントで親コンポーネントの処理を実行 ==== | ||
+ | カスタムコンポーネントのOnClickCallbackパラメータに親側の実行処理を記載する。\\ | ||
+ | カスタムコンポーネント側のボタンをクリックすると親側の処理が実行される。 | ||
+ | |||
+ | <code csharp> | ||
+ | // イベント処理をラムダ式で書いた場合 | ||
+ | < | ||
+ | |||
+ | @code { | ||
+ | [Parameter] | ||
+ | public EventCallback OnClickCallback { get; set; } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | [[https:// | ||
==== Javascriptとの連携 ==== | ==== Javascriptとの連携 ==== | ||
* [[https:// | * [[https:// | ||
行 497: | 行 562: | ||
=== @ref 属性による弊害 === | === @ref 属性による弊害 === | ||
- | inputタグに @ref 属性を付けて、 @ref=" | + | inputタグに @ref 属性を付けて、 @ref=" |
<code csharp> | <code csharp> | ||
行 511: | 行 576: | ||
<code csharp> | <code csharp> | ||
- | _comboTree = await _jsClass.InvokeAsync< | + | _comboTree = await _jsClass.InvokeAsync< |
</ | </ | ||
- | <code javascript> | ||
- | createComboTree(id, | ||
- | this.combo = $('#' | ||
- | </ | ||
行 568: | 行 629: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== ブラウザのキャッシュ回避 ==== | ||
+ | Blazorには、ASP.NET Coreにあった「asp-append-version=" | ||
+ | [[https:// | ||
+ | |||
+ | よって、ファイルバージョンを付けて回避している。 | ||
+ | |||
+ | <code csharp App.razor> | ||
+ | <link rel=" | ||
+ | |||
+ | @code { | ||
+ | private string Version = " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== WebSocketプロトコルを使用する ==== | ||
+ | | ||
+ | |||
+ | >Blazor Server は、WebSocket では通信できない環境であっても、Long Polling 方式に動作を切り替えて、動作継続します。 | ||
+ | > | ||
+ | |||
+ | <wrap em> | ||
===== 参照 ===== | ===== 参照 ===== | ||
* [[https:// | * [[https:// |
it技術/web開発/blzaor.1708309026.txt.gz · 最終更新: 2024/02/19 11:17 by yajuadmin