Blazor – ラジオボタン

by

　こちらも結構はまったので備忘録として書いておきます。ラジオボタンで選択されたデータをオブジェクトのリストに次々と入れていきたい動作があったのですが、Blazorのラジオボタンのやり方はこちらを参考にしました。

[改訂版] Blazor でラジオボタン input 要素に双方向データバインドする方法 #Blazor – Qiita

後ほど紹介するサンプルを見ていただくと分かると思うのですが、「次へ」ボタンを用意して順にデータを設定していきたいのですが、上記のリンクに書いてある

<input type="radio" checked="@(_editionCode == 1)" @onchange="(() => _editionCode = 1)" />

このような書き方だと、使いまわしで上手くいかないんですよね。InputRadioとInputRadioGroupで上手くバインド出来るようになったのですが、上記のサンプルに加えてEditFormを頭につけて上手くいきました。

<EditForm Model="sampleModels">
    <InputRadioGroup Name=@nameRadio @bind-Value="sampleModels.answer">
        <div class="form-group  form-check-inline">
            <InputRadio Name=@nameRadio Value="1" class="form-check-input" id="exampleRadio1" />
            <label class="form-check-label" for="exampleRadio1">回答1</label>
        </div>
        <div class="form-group  form-check-inline">
            <InputRadio Name=@nameRadio Value="2" class="form-check-input" id="exampleRadio2" />
            <label class="form-check-label" for="exampleRadio2">回答2</label>
        </div>
        <div class="form-group  form-check-inline">
            <InputRadio Name=@nameRadio Value="3" class="form-check-input" id="exampleRadio3" />
            <label class="form-check-label" for="exampleRadio3">回答3</label>
        </div>
        <div class="form-group  form-check-inline">
            <InputRadio Name=@nameRadio Value="4" class="form-check-input" id="exampleRadio4" />
            <label class="form-check-label" for="exampleRadio4">回答4</label>
        </div>
    </InputRadioGroup>
</EditForm>

もし、ご興味あれば次の回で今まで作ったサンプルをダウンロード出来るようにするのでご覧くださいませ＾＾

Follow me!

コメントする

PAGE TOP