スポンサーリンク

Blazor Server razorページとコンポーネントの入力値を連動する

.NET CoreBlazor Server 5.0C#JavaScript

razorページのイベントで、サイドバーコンポーネントの入力欄に値を入力する処理を実装した。
サイドバーはコンポーネントなので、razorページ内のC#処理からサイドバーの入力欄に値を入力することは出来ませんが、JavaScriptを使えばコンポーネントを跨いだ機能を実装出来ます。
サーバ側の処理で実現できない機能は、クライアント側(WEBブラウザ側)で実現するという考え方。
ソースコードはGitHubで公開しています。

ソースコード構成

Blazor Server razorページから個別コンポーネントをイベント操作 をベースに、サイドメニュー入力の連動処理を追加しています。

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

wwwroot/js/site.js

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

Pages/Counter.razor

・ クライアント側(WEBブラウザ側)で、サイドバーの入力欄に値を入力するJavaScript関数を実行する処理を追加。

コメント

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