ユーザ用ツール

サイト用ツール


it技術:web開発:blzaor

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
it技術:web開発:blzaor [2024/03/20 14:54] – [カスタムコンポーネントのbind-value] yajuadminit技術:web開発:blzaor [2024/12/24 00:42] (現在) – [Web APIを追加] yajuadmin
行 358: 行 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]]
  
 === 参照 === === 参照 ===
行 422: 行 435:
  
   - Controllerフォルダを作成   - Controllerフォルダを作成
-  - 右クリックメニューから[追加]の[コントローラー]をクリックする+  - 右クリックメニューから[新しい項目の追加]をクリックする
   - 共通のAPIにある「読み取り/書き込みアクションがある API コントローラー」を選択して[追加]ボタンをクリックする   - 共通のAPIにある「読み取り/書き込みアクションがある API コントローラー」を選択して[追加]ボタンをクリックする
   - ValuesController.cs を追加する   - ValuesController.cs を追加する
行 524: 行 537:
  
 [[https://blazor-master.com/blazor-event-callback/|【Blazor】EventCallbackで子コンポーネントからイベントを受け取る方法]] [[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との連携 ==== ==== Javascriptとの連携 ====
   * [[https://qiita.com/Cable08/items/6d81e1cf2df9067123cf|【Blazor】JavascriptからC#(.Net)のstaticもしくはインスタンスメソッドを呼び出す。]]   * [[https://qiita.com/Cable08/items/6d81e1cf2df9067123cf|【Blazor】JavascriptからC#(.Net)のstaticもしくはインスタンスメソッドを呼び出す。]]
行 529: 行 564:
   * [[https://imaginet.com/2021/guide-blazor-javascript-interop/|Guide to Blazor JavaScript Interop]]   * [[https://imaginet.com/2021/guide-blazor-javascript-interop/|Guide to Blazor JavaScript Interop]]
  
-==== BlazorとjQueryの連携 ====+==== 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://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://thesassway.com/how-to-use-jquery-in-blazor/|How to Use jQuery in Blazor]]
行 579: 行 616:
 </code> </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>
  
  
行 629: 行 681:
 } }
 </code> </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.1710914099.txt.gz · 最終更新: 2024/03/20 14:54 by yajuadmin