ユーザ用ツール

サイト用ツール


it技術:web開発:blzaor

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
it技術:web開発:blzaor [2024/02/10 15:42] – [BlazorとjQueryの連携] yajuadminit技術:web開発:blzaor [2024/03/22 15:04] (現在) – [ブラウザのキャッシュ回避] yajuadmin
行 117: 行 117:
 |StateHasChanged|レンダリングしたい任意のタイミング|コストが高いので不必要に呼び出さないこと| |StateHasChanged|レンダリングしたい任意のタイミング|コストが高いので不必要に呼び出さないこと|
  
 +=== OnParametersSet(Async)について ===
 +Navigation.NavigateToで別ページに画面遷移させた時でもOnParametersSetAsyncが動作する。
 +
 +Navigation.NavigateToで別ページに画面遷移させた時に例外エラー、原因として OnParametersSetAsync処理内で発生していた。
 +NavigateTo前に_isNextPageフラグをTrueにセットして使用して回避させた。
 +
 +<code csharp>
 +protected override async Task OnParametersSetAsync()
 +{
 +     // 別ページに画面遷移する場合は何もしない。
 +     if (_isNextPage) return;
 +</code>    
 ==== Razorコンポーネントのステート ==== ==== Razorコンポーネントのステート ====
 [[https://www.misuzilla.org/Blog/2020/12/25/BlazorComponentLifecycle|Blazor のコンポーネントのステートについて]] [[https://www.misuzilla.org/Blog/2020/12/25/BlazorComponentLifecycle|Blazor のコンポーネントのステートについて]]
行 275: 行 287:
 </code> </code>
  
 +==== bindとonchangeの併用は不可 ====
 +onchange を追加すると、Model.Procedure に値がセットされなくなる。
 +
 +<code html>
 +<BSInput InputType="InputType.Select" @bind-Value="Model.Procedure" @ref="ProcedureControl" @onchange="OnProcejureChange">
 +</code>
 +
 +[[https://ryuichi111std.hatenablog.com/entry/2019/05/12/132636|bindとonchangeの併用は不可]]
 +
 +=== 対応 ===
 +onchange イベント処理内で値をセットする。
 +
 +<code csharp>
 +private void OnProcejureChange(ChangeEventArgs e)
 +{
 +    Model.Procedure = e.Value.ToString() ?? "";
 +}
 +</code>
 ==== MainLayout コンポーネント側にデータを反映させる ==== ==== MainLayout コンポーネント側にデータを反映させる ====
 カスケーディングを使用してパラメーターを渡す。 カスケーディングを使用してパラメーターを渡す。
行 447: 行 477:
 </code> </code>
  
 +==== カスタムコンポーネントのbind-value ====
 +bind-value を指定したたけでは、"does not have a property matching the name 'ValueChanged'"エラーとなり動作しない。\\
 +そのため、ParameterにValueChangedを定義する。
 +
 +<code csharp Index.razor>
 +<CustomInput @bind-Value="@InputValue"></CustomInput>
 +
 +@code { 
 +    public string InputValue = "Example";
 +}
 +</code>
 +
 +<code csharp CustomInput.razor>
 +<input value="@Value" @oninput="@OnInputChange" />
 +<h4>Welcome to Blazor Application, @Value</h4>
 +
 +@code {
 +    [Parameter]
 +    public string? Value { get; set; }
 +
 +    [Parameter]
 +    public EventCallback<string> ValueChanged { get; set; }
 +    private async Task OnInputChange(ChangeEventArgs args )
 +    {
 +        Value = (string?)args.Value;
 +        await ValueChanged.InvokeAsync(Value);
 +    }
 +}
 +</code>
 +
 +[[https://www.syncfusion.com/faq/blazor/components/how-do-you-use-bind-value-and-bind-valueevent-on-a-custom-component|How do you use bind-value and bind-value:event on a custom component?]]
 +
 +==== カスタムコンポーネントで親コンポーネントの処理を実行 ====
 +カスタムコンポーネントのOnClickCallbackパラメータに親側の実行処理を記載する。\\
 +カスタムコンポーネント側のボタンをクリックすると親側の処理が実行される。
 +
 +<code csharp>
 +// イベント処理をラムダ式で書いた場合
 +<BSButton OnClick=@(async () => await OnClickCallback.InvokeAsync()>
 +
 +@code {
 +    [Parameter]
 +    public EventCallback OnClickCallback { get; set; }
 +}
 +</code>
 +
 +[[https://blazor-master.com/blazor-event-callback/|【Blazor】EventCallbackで子コンポーネントからイベントを受け取る方法]]
 ==== Javascriptとの連携 ==== ==== Javascriptとの連携 ====
   * [[https://qiita.com/Cable08/items/6d81e1cf2df9067123cf|【Blazor】JavascriptからC#(.Net)のstaticもしくはインスタンスメソッドを呼び出す。]]   * [[https://qiita.com/Cable08/items/6d81e1cf2df9067123cf|【Blazor】JavascriptからC#(.Net)のstaticもしくはインスタンスメソッドを呼び出す。]]
行 484: 行 561:
 </code> </code>
  
 +=== @ref 属性による弊害 ===
 +inputタグに @ref 属性を付けて、 @ref="CurrentElement" として、JQuery Pluginである ComboTree に渡していた。これで問題なく表示して動作していたが、同じ画面を再度表示しようとした際に this._input.addClass や this._input.wrap で例外エラーが発生してしまう。どうも追加するinputタグが見つけれない状態
 +
 +<code csharp>
 +_comboTree = await _jsClass.InvokeAsync<IJSObjectReference>("createComboTree", CurrentElement, options);
 +</code>
 +
 +<code javascript>
 +createComboTree(element, Options) {
 +    this.combo = $(element).comboTree(Options);
 +</code>
 +
 +@ref 属性ではなく、一般的なid属性の使用に切り替えることで例外エラーが発生しなくなった。
 +
 +<code csharp>
 +_comboTree = await _jsClass.InvokeAsync<IJSObjectReference>("createComboTree", "#" + ElementId, options);
 +</code>
  
  
行 515: 行 609:
 </configuration> </configuration>
 </code> </code>
 +
 +==== デバッグ詳細 ====
 +an unhandled exception on the current circuit のエラーの場合、詳細エラーを出力
 +
 +https://stackoverflow.com/questions/57514541/how-to-turn-on-circuitoptions-detailederrors
 +
 +<code json appsettings,json>
 +{
 +  "DetailedErrors": true, // turns on CircuitOptions.DetailedErrors
 +  "Logging": {
 +    "LogLevel": {
 +      "Default": "Information",
 +      "Microsoft": "Warning",
 +      "Microsoft.Hosting.Lifetime": "Information",
 +      "Microsoft.AspNetCore.SignalR": "Debug" // turns on SignalR debugging
 +    }
 +  },
 +  "AllowedHosts": "*"
 +}
 +</code>
 +
 +==== ブラウザのキャッシュ回避 ====
 +Blazorには、ASP.NET Coreにあった「asp-append-version="true"」 が見当たらない。\\
 +[[https://pg-himajin.com/dotnet/razor-pages/browser-cache-update/|Razor Pagesでファイル更新時にブラウザキャッシュを更新する方法]]
 +
 +よって、ファイルバージョンを付けて回避している。
 +
 +<code csharp App.razor>
 +<link rel="stylesheet" href="css/app.css?@Version" />
 +
 +@code {
 +    private string Version = "v=" + FileVersionInfo.GetVersionInfo(Assembly.GetExecutingAssembly().Location).ProductVersion + "";
 +}
 +</code>
 +
 +==== WebSocketプロトコルを使用する ====
 + [サーバーの役割] ページで、[Web サーバー (IIS)] を展開し、[Web サーバー]、[アプリケーション開発] の順に展開し、[WebSocket プロトコル] を選択して、インストールする。
 +
 +>Blazor Server は、WebSocket では通信できない環境であっても、Long Polling 方式に動作を切り替えて、動作継続します。
 +>[[https://qiita.com/jsakamoto/items/4f7bfbbb3e3ba2f31614|WebSocket で通信できない環境では Blazor Server は動作しないのか?]]
 +
 +<wrap em>※WebSocketを使用した場合、IISログファイルに通信ログが残らなくなる。</wrap>
 ===== 参照 ===== ===== 参照 =====
   * [[https://blogs.jp.infragistics.com/entry/2020/12/10/150516|Blazor プロジェクトの構成を、Blazor WebAssembly と Blazor Server を比較しながら確認する - ASP.NET Core Blazor で始めるフロントエンド 開発(入門編)- ①]]   * [[https://blogs.jp.infragistics.com/entry/2020/12/10/150516|Blazor プロジェクトの構成を、Blazor WebAssembly と Blazor Server を比較しながら確認する - ASP.NET Core Blazor で始めるフロントエンド 開発(入門編)- ①]]
it技術/web開発/blzaor.1707547348.txt.gz · 最終更新: 2024/02/10 15:42 by yajuadmin