スポンサーリンク

Blazor Server でHtmlタグのdisabledをシンプルに実装する

.NET CoreASP.NET CoreBlazor Server 5.0C#Visual Studio 2019

チェックボックスのチェック状態と、「有効/無効」状態が連動するテキストボックスを実装しました。
bindしている変数をそのまま使い、bool型専用の拡張メソッドからdisabledに対応する値を返す方式で実装しましたが、この実装方式が一番ソースコードをシンプルに出来る。
ソースコードはGitHubで公開しています。

ソースコード構成

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

Util/Extension.cs

・disabledに対応した、bool型専用の拡張メソッドを追加。

Pages/DisabledTest.razor

・disabledの動きを確認する為の画面を追加。
・チェックボックスにbindしている _Check 変数をそのまま、テキストボックスのdisabledで流用している。

_Imports.razor

・共通部品の参照を追加。

Shared/NavMenu.razor

・サイドメニューに追加した画面へのリンクを追加。


Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

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