it技術:web開発:blzaor
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
it技術:web開発:blzaor [2024/01/09 18:22] – [UIフレームワーク] yajuadmin | it技術:web開発:blzaor [2024/03/21 16:19] – [デバッグ詳細] yajuadmin | ||
---|---|---|---|
行 25: | 行 25: | ||
=== BlazorStrap 採用例 === | === BlazorStrap 採用例 === | ||
== Blazor Server Side へのインストール方法 == | == Blazor Server Side へのインストール方法 == | ||
- | https:// | + | * リリース版 |
+ | * 最新プレビュー版 https:// | ||
- nuget から BlazorStrap と BlazorStrap.V5 の2つのパッケージをダウンロードします。 | - nuget から BlazorStrap と BlazorStrap.V5 の2つのパッケージをダウンロードします。 | ||
行 116: | 行 117: | ||
|StateHasChanged|レンダリングしたい任意のタイミング|コストが高いので不必要に呼び出さないこと| | |StateHasChanged|レンダリングしたい任意のタイミング|コストが高いので不必要に呼び出さないこと| | ||
+ | === OnParametersSet(Async)について === | ||
+ | Navigation.NavigateToで別ページに画面遷移させた時でもOnParametersSetAsyncが動作する。 | ||
+ | |||
+ | Navigation.NavigateToで別ページに画面遷移させた時に例外エラー、原因として OnParametersSetAsync処理内で発生していた。 | ||
+ | NavigateTo前に_isNextPageフラグをTrueにセットして使用して回避させた。 | ||
+ | |||
+ | <code csharp> | ||
+ | protected override async Task OnParametersSetAsync() | ||
+ | { | ||
+ | // 別ページに画面遷移する場合は何もしない。 | ||
+ | if (_isNextPage) return; | ||
+ | </ | ||
==== Razorコンポーネントのステート ==== | ==== Razorコンポーネントのステート ==== | ||
[[https:// | [[https:// | ||
行 274: | 行 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 コンポーネント側にデータを反映させる ==== | ||
カスケーディングを使用してパラメーターを渡す。 | カスケーディングを使用してパラメーターを渡す。 | ||
行 445: | 行 476: | ||
} | } | ||
</ | </ | ||
+ | |||
+ | ==== カスタムコンポーネントの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との連携 ==== | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | ==== BlazorとjQueryの連携 ==== | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | #13732]] | ||
+ | * [[https:// | ||
+ | |||
+ | 下記のようにすれば、onchangeイベントを呼ぶことが出来る。この方法だと DotNet.invokeMethodAsync を使わずに済む。 | ||
+ | |||
+ | <code javascript combotree.js> | ||
+ | $("# | ||
+ | var myElement = $(this)[0]; | ||
+ | var event = new Event(' | ||
+ | myElement.dispatchEvent(event); | ||
+ | console.log(" | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | <code csharp combotree.razor.cs> | ||
+ | <input type=" | ||
+ | |||
+ | private void OnChange(ChangeEventArgs e) | ||
+ | { | ||
+ | if (_comboTree != null || e.Value != null) | ||
+ | { | ||
+ | Console.WriteLine(e.Value); | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | === @ref 属性による弊害 === | ||
+ | inputタグに @ref 属性を付けて、 @ref=" | ||
+ | |||
+ | <code csharp> | ||
+ | _comboTree = await _jsClass.InvokeAsync< | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | createComboTree(element, | ||
+ | this.combo = $(element).comboTree(Options); | ||
+ | </ | ||
+ | |||
+ | @ref 属性ではなく、一般的なid属性の使用に切り替えることで例外エラーが発生しなくなった。 | ||
+ | |||
+ | <code csharp> | ||
+ | _comboTree = await _jsClass.InvokeAsync< | ||
+ | </ | ||
+ | |||
+ | |||
==== ログ出力にlog4netを使用する ==== | ==== ログ出力にlog4netを使用する ==== | ||
行 473: | 行 608: | ||
</ | </ | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | ==== デバッグ詳細 ==== | ||
+ | an unhandled exception on the current circuit のエラーの場合、詳細エラーを出力 | ||
+ | |||
+ | https:// | ||
+ | |||
+ | <code json appsettings, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | }, | ||
+ | " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== ブラウザのキャッシュ回避 ==== | ||
+ | Blazorには、ASP.NET Coreにあった「asp-append-version=" | ||
+ | [[https:// | ||
+ | |||
+ | よって、ファイルバージョンを付けて回避している。 | ||
+ | |||
+ | <code csharp App.razor> | ||
+ | <link rel=" | ||
+ | |||
+ | @code { | ||
+ | private string Version = " | ||
+ | } | ||
</ | </ | ||
===== 参照 ===== | ===== 参照 ===== |
it技術/web開発/blzaor.txt · 最終更新: 2024/03/22 15:04 by yajuadmin