スポンサーリンク

Blazor Server razorページから個別コンポーネントをイベント操作

.NET CoreBlazor Server 5.0C#JavaScriptVisual Studio 2019

トップページが表示されたタイミングで、サイドバーの入力欄にフォーカスをあてる処理を実装しました。
サイド バー はコンポーネントなので、razorページ内のイベントからサイド バー の入力欄にフォーカスをあてることは出来ません。
razorページから個別コンポーネントをイベント操作することは出来ませんが、JavaScriptを使えばコンポーネントを跨いだイベント操作を行うことが出来ます。
サーバ側で実現できないことは、サーバ側ではなくクライアント側(WEBブラウザ側)で実装するという考え方。
ソースコードはGitHubで公開しています。

ソースコード構成

Blazor Server で入力欄に値を入力した後、Enterキーが押されたタイミングでイベント処理を行う をベースに、フォーカス処理を追加しています。

ソースコード変更内容を解説

wwwroot/js/site.js

・クライアント側(WEBブラウザ)で、サイドバーの入力欄にフォーカスするJavaScript関数を追加。

Pages/Index.razor

・トップページ(Index.razor)が表示されたら、JavaScriptのNavMenuIdInputFocus関数を実行する処理を追加。

Pages/_Host.cshtml

・site.js の参照を追加。

Shared/NavMenu.razor

・JavaScriptがフォーカスする入力欄を特定するためのIDを追加。

コメント

タイトルとURLをコピーしました