八寿のナレッジベース

ユーザ用ツール

サイト用ツール

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

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
it技術:web開発:blzaor [2024/01/09 18:28] – [UIフレームワーク] yajuadminit技術:web開発:blzaor [2024/12/24 00:42] (現在) – [Web APIを追加] 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 コンポーネント側にデータを反映させる ====
 カスケーディングを使用してパラメーターを渡す。 カスケーディングを使用してパラメーターを渡す。
行 328: 行 358:
 public string[]? Films { get; set; } public string[]? Films { get; set; }
 </code> </code>
 +
 +=== 通常クラス ===
 +Blazorコンポーネント内では Navigation.GetUriWithQueryParametersを使用できるが、Blazorコンポーネント外の一般クラスでは、HttpUtility.ParseQueryString を使用する。
 +
 +[[https://ohke.hateblo.jp/entry/2018/04/01/230000|C# クエリストリング(?var=hoge&...)を作る]]
 +
 +=== Uriからパラメータ取得 ===
 +<code>
 +NameValueCollection query = HttpUtility.ParseQueryString(new Uri(Navigation.Uri).Query);
 +string key = query["Key"] ?? ""
 +</code>
 +
 +[[https://jasonwatmore.com/post/2020/08/09/blazor-webassembly-get-query-string-parameters-with-navigation-manager|Blazor WebAssembly - Get Query String Parameters with Navigation Manager]]
  
 === 参照 === === 参照 ===
行 392: 行 435:
  
   - Controllerフォルダを作成   - Controllerフォルダを作成
-  - 右クリックメニューから[追加]の[コントローラー]をクリックする+  - 右クリックメニューから[新しい項目の追加]をクリックする
   - 共通のAPIにある「読み取り/書き込みアクションがある API コントローラー」を選択して[追加]ボタンをクリックする   - 共通のAPIにある「読み取り/書き込みアクションがある API コントローラー」を選択して[追加]ボタンをクリックする
   - ValuesController.cs を追加する   - ValuesController.cs を追加する
行 446: 行 489:
 } }
 </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で子コンポーネントからイベントを受け取る方法]]
 +
 +==== 子コンポーネントのメソッドを実行 ====
 +親コンポーネント内で子コンポーネントを@refを用いて参照することでメソッドを呼ぶことが出来る。
 +
 +[[https://lightningblog.net/blazor/basic-ref|【Blazor】 @refを使い方]]
 +
 +==== リトライ回数を増やす ====
 +リトライ回数はデフォルトで8回となっている。
 +
 +[[https://qiita.com/jsakamoto/items/2cdbe0764df262e9fd23|Blazor Server でサーバーとの接続障害からの復旧後、「再読込」をユーザに押させることなく自動でページ再読み込みする]]
 +
 +==== awaitのメソッドを追加すると動作しなくなる ====
 +Submitの先頭にawait.Task.Delay メソッドを実行すると、エラー用のメッセージモーダルが表示されなくなる現象があった。\\
 +async void を async Task に変更することで解決した。
 +
 +<code>
 +async void Submit()
 +       ↓
 +async Task Submit()
 +</code>
 +
 +[[https://qiita.com/tokishirazu/items/12c581f0ad4a6bcd562b|C#の非同期メソッドの戻り値のvoidとかTaskがよくわからなかったので動かしてみた]]
 +==== 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コンポーネント等との連携 ====
 +jQueryコンポーネント または jQueryを使用しないJavaScriptコンポーネントをBlazorと連携する場合の注意点
 +
 +  * [[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>
 +
 +=== nullを変換できない場合 ===
 +Datetimepicker(tempusdominus)のv6を使用した際に、範囲最小値(minDate)と範囲最大値(maxDate)の指定でminDate側にnullをセットして実行した段階で、nullに変換できないとしてエラーとなった。
 +
 +null 値のプロパティを無視する属性を付けることで回避できた。\\
 +[[https://qiita.com/lx-sasabo/items/e3a5dae6974e565a1823|System.Text.Json で null 値のプロパティを無視する]]
 +
 +<code>
 +private class Restrictions
 +{
 +    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
 +    public DateTime? minDate { get; set; }
 +    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
 +    public DateTime? maxDate { get; set; }
 +}
 +</code>
 +
  
 ==== ログ出力にlog4netを使用する ==== ==== ログ出力にlog4netを使用する ====
行 475: 行 661:
 </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>
 +
 +==== CA1416警告 Windowsでのみサポートされています ====
 +「警告 CA1416 この呼び出しサイトはすべてのプラットフォームで到達可能です。'xxxxx' は 'windows' でのみサポートされています。」
 +
 +FreeSprire.pdf の印刷機能でカスタムサイズをセットした部分で警告の緑色の波線が出ました。\\
 +使用するメソッドの上に「[SupportedOSPlatform("windows")]」を記載することで、警告の緑色の波線を解除することが出来ます。
 +
 +[[https://shikaku-sh.hatenablog.com/entry/c-sharp-clear-oledb-ca1416-warning-in-visualstudio|C# OleDb CA1416 の警告をクリアする (visual studio)]]
 +
 +==== PrivateObjectの代替 ====
 +単体テストでモジュールのPrivateメソッドにアクセスする「PrivateObject」が、.NET Coreでは使用できなくなった。\\
 +[[https://qiita.com/saeki4n/items/1cafac3f4451e517ae06|.NetCore ではPrivateObjectが無いのでその代替案]]
 +
 +==== 警告「via WebSockets, using the Long Polling fallback transport」 ====
 +via WebSockets, using the Long Polling fallback transport. This may be due to a VPN or proxy blocking the connection. To troubleshoot this, visit
 +
 +IISでWebSocketを有効にしていないとLong pollingが使用される。
 +
 +Windows Serverのサーバーマネージャーのメニューの「管理」にある「役割と機能の追加」にて、Webサーバー(IIS)
 +->アプリケーション開発->WebSocket プロトコル
 +
 +WebSocket プロトコルにチェックを追加する。
 ===== 参照 ===== ===== 参照 =====
   * [[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.1704792496.txt.gz · 最終更新: 2024/01/09 18:28 by yajuadmin