【復旧】Blazorでクラスを変更する

前置き

この記事は旧サイトの2021.8.24投稿の記事内容のリポストです。

やりたいこと

ある要素の class をクリックイベントで表示を変更したい

方法

ボタン要素のclassをクリックイベントで変更したいとします。

この場合、以下のように class="@変数名" というようにクラス属性の値を変数にすることで、C# のコード上から参照できます。

<button class="@ButtonClass" @onclick="ChangeClass">click me</button>

private string ButtonClass = "btn btn-primary";
private void ChangeClass()
{
    ButtonClass = ButtonClass == "btn btn-outline-primary" ?
        "btn btn-outline-secondary" : "btn btn-outline-primary";
}

Think

Blazorで変数を参照する場合、 @変数名 とすることで、C# (@code { }で囲まれた箇所)側で定義した変数を参照することができます。これは基本的な使い方ですが、最初はテキスト部分は変数にできるが、class属性の値などにも変数を使えるということがわからず悩んでしまいました。

そこで考えたのが 「button に id を付与して GetElementByIdのようなメソッドが使えるのでは？」みたいなことでどうにかDOM操作しようという考えにとらわれていて class属性の値も変数にできるんだということに思い至らなかった･･･。

ということでBlazorで何かしたい場合は対象の箇所を変数にしちゃえば大体いけそうというのが学びです。