差分

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

--- it技術:web開発:blzaor [2024/02/19 11:31] – [BlazorとjQueryの連携] yajuadmin
+++ it技術:web開発:blzaor [2024/03/22 15:04] (現在) – [ブラウザのキャッシュ回避] yajuadmin
@@ 行 287: / 行 287: @@
 </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 コンポーネント側にデータを反映させる ====
 カスケーディングを使用してパラメーターを渡す。
@@ 行 459: / 行 477: @@
 </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もしくはインスタンスメソッドを呼び出す。]]
@@ 行 511: / 行 576: @@
 <code csharp>
-_comboTree = await _jsClass.InvokeAsync<IJSObjectReference>("createComboTree", ElementId, options);
+_comboTree = await _jsClass.InvokeAsync<IJSObjectReference>("createComboTree", "#" + ElementId, options);
 </code>
@@ 行 564: / 行 629: @@
 }
 </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 で始めるフロントエンド 開発（入門編）- ①]]