カテゴリー
Microsoft

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

Index や Details、Delete の確認画面での表示の様子
Index や Details、Delete の確認画面での表示の様子

Create と Edit での表示の様子
Create と Edit での表示の様子

本投稿のサンプル内容

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

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

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

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

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

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

モデルを作成

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

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 コントローラーへアクセスして確認いたします。

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

おわりに

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

以上です。

コメントを残す