八寿のナレッジベース

ユーザ用ツール

サイト用ツール

トレース:
it技術:web開発:blzaor

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
it技術:web開発:blzaor [2024/01/09 18:21] – [アイコン使用] yajuadminit技術:web開発:blzaor [2024/03/22 15:04] (現在) – [ブラウザのキャッシュ回避] yajuadmin
行 24: 行 24:
  
 === BlazorStrap 採用例 === === BlazorStrap 採用例 ===
-Blazor に Boostrap 5 を採用したもの 
- 
-  * [[https://www.gunshi.info/entry/2021/05/21/000357|Blazor WebAssembly で色々便利に使えそうな BlazorStrap]] 
- 
 == Blazor Server Side へのインストール方法 == == Blazor Server Side へのインストール方法 ==
-https://blazorstrap.io/VNext/V5+  * リリース版 https://blazorstrap.io/VNext/V5 
 +  * 最新プレビュー版 https://github.com/chanan/BlazorStrap/releases
  
   - nuget から BlazorStrap と BlazorStrap.V5 の2つのパッケージをダウンロードします。   - nuget から BlazorStrap と BlazorStrap.V5 の2つのパッケージをダウンロードします。
行 36: 行 33:
       - <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />       - <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
       - <link href="(YourAssemblyName).styles.css" rel="stylesheet">       - <link href="(YourAssemblyName).styles.css" rel="stylesheet">
-    - <body>追加 の最後に +    - <body>追加 の最後に  
-      - <script src="_content/BlazorStrap/popper.min.js"></script> +    - <script src="_content/BlazorStrap/popper.min.js"></script> 
-      - <script src="_content/BlazorStrap/blazorstrap.js"></script>+    - <del><script src="_content/BlazorStrap/blazorstrap.js"></script></del> \\ V5.2.100-Preview3 でblazorstrap.jsを削除
   - _Program.cs に追加   - _Program.cs に追加
       - using BlazorStrap;       - using BlazorStrap;
行 44: 行 41:
   - _Imports.razor に追加   - _Imports.razor に追加
       - @using BlazorStrap.V5       - @using BlazorStrap.V5
 +  - MainLayout.razor の class="page"の最後に下記を追加
 +    - <BSCore /> 
 ==== NuGet参照したフレームワークの場所「_content」==== ==== NuGet参照したフレームワークの場所「_content」====
 NuGet参照したUIフレームワークの「BlazorStrap」など NuGet参照したUIフレームワークの「BlazorStrap」など
行 118: 行 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 のコンポーネントのステートについて]]
行 276: 行 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: 行 476:
 } }
 </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との連携 ====
 +  * [[https://qiita.com/Cable08/items/6d81e1cf2df9067123cf|【Blazor】JavascriptからC#(.Net)のstaticもしくはインスタンスメソッドを呼び出す。]]
 +  * [[https://stackoverflow.com/questions/66385844/call-a-c-sharp-non-static-method-from-a-static-method-in-blazor-invoked-by-javas|Call a C# non static method from a static method in Blazor invoked by Javascript DotNet.invokeMethodAsync - stackoverflow]]
 +  * [[https://imaginet.com/2021/guide-blazor-javascript-interop/|Guide to Blazor JavaScript Interop]]
 +
 +==== BlazorとjQueryの連携 ====
 +  * [[https://gavilan.blog/2020/05/18/using-events-with-javascript-and-jquery-in-blazor-initializing-libraries/|Blazor での JavaScript および jQuery でのイベントの使用 – ライブラリの初期化]]
 +  * [[https://thesassway.com/how-to-use-jquery-in-blazor/|How to Use jQuery in Blazor]]
 +  * [[https://stackoverflow.com/questions/54274629/how-to-use-jquery-ui-from-blazor-component|How to use jQuery UI from Blazor component - stackoverflow]]
 +  * [[https://www.codeproject.com/Tips/5290232/Blazor-datepicker-Component-using-JQuery|Blazor datepicker Component using JQuery]]
 +  * [[https://github.com/dotnet/aspnetcore/issues/13732|understand the onchange listener to trigger the setter on javascript
 +#13732]]
 +  * [[https://stackoverflow.com/questions/58777642/blazor-fire-onchange-event-when-chosen-drop-down-value-changes|Blazor fire onchange event when Chosen drop down value changes - stackoverflow]]
 +
 +下記のようにすれば、onchangeイベントを呼ぶことが出来る。この方法だと DotNet.invokeMethodAsync を使わずに済む。
 +
 +<code javascript combotree.js>
 +$("#justAnotherInputBox").on('change', function () {
 +    var myElement = $(this)[0];
 +    var event = new Event('change');
 +    myElement.dispatchEvent(event);
 +    console.log("Change");
 +});
 +</code>
 +
 +<code csharp combotree.razor.cs>
 +<input type="text" id="justAnotherInputBox" class="form-control" autocomplete="off" placeholder="Select"  @onchange="OnChange"/>
 +
 +private void OnChange(ChangeEventArgs e)
 +{
 +    if (_comboTree != null || e.Value != null)
 +    {
 +        Console.WriteLine(e.Value);
 +    }
 +}
 +</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>
 +
 +
  
 ==== ログ出力にlog4netを使用する ==== ==== ログ出力にlog4netを使用する ====
行 476: 行 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.1704792080.txt.gz · 最終更新: 2024/01/09 18:21 by yajuadmin