【ASP.NET MVC5】モデルの bool プロパティをビューでラジオボタン表示するサンプル♪

本投稿のサンプル内容

ソリューション名: Test1
プロジェクト名: Test1
ASP.NET Web アプリケーション Visual C#
ASP.NET 4 の、MVC
認証: なし
モデル Person
Person のコントローラー PeopleController をスキャフォールディングで作成

モデルのプロパティで、型が bool のもので、次の 3 パターンの例を作成します。

Sex: 性別。チェックボックス。チェック有りがどちらで、チェック無しがどちらかは、補足しないと判別が難しそう。
スキャフォールディング時のデフォルト。
IsRightHanded: 利き手。新規作成や編集のフォームはラジオボタンで「右利き」「左利き」を選択する。一覧や詳細では、「右利き」「左利き」を表示する。
そうするために、コードを書く。本投稿のメイン。
IsActive: 有効かどうか。ドロップダウンリスト。自動的にドロップダウンリストが表示されるが、選択肢は「Not Set」「True」「False」であり、変更方法が不明なため使い途が難しい。

サンプルの作り方は次のように行いました。

プロジェクトを作成
モデルを作成
DisplayTemplates を作成
スキャフォールディングでコントローラーを作成
ビューを修正
ウェブブラウザで確認

それでは、ポイントのみをとりあげる形で、順に作ってまいります♪

モデルを作成

次のコードを書きました。

using System.ComponentModel.DataAnnotations;

namespace Test1.Models
{
    public class Person
    {
        public int Id { get; set; }

        public string Name { get; set; }
        
        // チェックボックス表示で性別がわからない
        public bool Sex { get; set; }
        
        // 内容表示、ラジオボタン編集
        [UIHint("IsRightHanded")]
        public bool IsRightHanded { get; set; }
        
        // ドロップダウンリスト表示(bool? は nullable であるため)
        // 内容が「True」「False」なので使い途が無い。
        public bool? IsActive { get; set; }
    }
}

DisplayTemplates を作成

Index や Details ビューで bool に対応する値を表示するコードとなります。

DisplayTemplates を作成し、それをモデルのプロパティに適用する。
モデルのプロパティの属性は、[UIHint(“DisplayTemplates 名”)] を指定する。
ビューへの修正は不要。DisplayFor のままでよい。

Test1\Views\Shared\DisplayTemplates\IsRightHanded.cshtml

@model bool
@if (Model == true)
{
    @Html.Encode("右利き")
}
@if (Model == false)
{
    @Html.Encode("左利き")
}

この場合、対応するモデルのプロパティは次の部分ですわ♪

Test1\Models\Person.cs

[UIHint("IsRightHanded")]
public bool IsRightHanded { get; set; }

ビューの修正

チェックボックスではなく、ラジオボタンをフォームの入力とするコードへと修正いたします。

Test1\Views\People\Edit.cshtml と Create.cshtml

<div class="col-md-10">
    <div class="checkbox">
        @Html.EditorFor(model => model.IsRightHanded)
        @Html.ValidationMessageFor(model => model.IsRightHanded, "", new { @class = "text-danger" })
    </div>
</div>

↓

<div class="col-md-10">
    <label class="radio-inline">
        @Html.RadioButtonFor(model => model.IsRightHanded, "True")右利き
    </label>
    <label class="radio-inline">
        @Html.RadioButtonFor(model => model.IsRightHanded, "False")左利き
    </label>
    @Html.ValidationMessageFor(model => model.IsRightHanded, "", new { @class = "text-danger" })
</div>

結果の確認

Ctrl + F5 で実行し、http://localhost:62105/People など、People コントローラーへアクセスして確認いたします。

ページ冒頭のような表示となれば、成功です♪

おわりに

次のページが参考になりました！ありがとう存じます！

以上です。