ASP.NET Core - Selectlist実装パターンメモ

タグヘルパーを使用する場合

基本形

サンプルコード

index.cshtml

@model SampleMVCApp.ViewModels.StationViewModel;

<div class="text-center">
    <h1 class="display-3">Index</h1>
    <form method="post" asp-controller="Station" asp-action="Index">
        <div class="form-group">
            <select asp-for="Station" asp-items="Model.StationsJY" class="form-control"></select>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary" />
        </div>
    </form>
</div>

StationViewModel.cs

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace SampleMVCApp.ViewModels
{
    public class StationViewModel
    {
        public string Station { get; set; }

        public List<SelectListItem> StationsJY { get; } = new List<SelectListItem>
        {
            new SelectListItem{Value = "JY01", Text = "東京"},
            new SelectListItem{Value = "JY13", Text = "池袋"},
            new SelectListItem{Value = "JY17", Text = "新宿"},
            new SelectListItem{Value = "JY20", Text = "渋谷"},
            new SelectListItem{Value = "JY25", Text = "品川"},
            new SelectListItem{Value = "JY29", Text = "有楽町"}
        };
    }
}

StationController.cs

using Microsoft.AspNetCore.Mvc;
using SampleMVCApp.ViewModels;

namespace SampleMVCApp.Controllers
{
    public class StationController : Controller
    {
        public IActionResult Index()
        {
            var model = new StationViewModel();
            model.Station = "JY20";

            return View(model);
        }

        [HttpPost]
        public IActionResult Index(StationViewModel model)
        {
            return View(model);
        }
    }
}

---

Enumを使用する

（表示上の見た目は基本形と同じ）

サンプルコード

index.cshtml

@model SampleMVCApp.ViewModels.StationEnumViewModel;

<div class="text-center">
    <h1 class="display-3">IndexEnum</h1>
    <form method="post" asp-controller="Station" asp-action="Index">
        <div class="form-group">
            <select asp-for="EnumStation" 
                    asp-items="Html.GetEnumSelectList<SampleMVCApp.ViewModels.StationEnumViewModel.StationEnum>()" 
                    class="form-control">
            </select>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary" />
        </div>
    </form>
</div>

StationViewModel.cs

using System.ComponentModel.DataAnnotations;

namespace SampleMVCApp.ViewModels
{
    public class StationEnumViewModel
    {
        public StationEnum EnumStation { get; set; }

        public enum StationEnum
        {
            [Display(Name = "東京")]
            JY01,
            [Display(Name = "池袋")]
            JY13,
            [Display(Name = "新宿")]
            JY17,
            [Display(Name = "渋谷")]
            JY20,
            [Display(Name = "品川")]
            JY25,
            [Display(Name = "有楽町")]
            JY29
        }
    }
}

StationController.cs

using Microsoft.AspNetCore.Mvc;
using SampleMVCApp.ViewModels;
using static SampleMVCApp.ViewModels.StationEnumViewModel;

namespace SampleMVCApp.Controllers
{
    public class StationController : Controller
    {
        public IActionResult Index()
        {
            var model = new StationEnumViewModel();
            model.EnumStation = StationEnum.JY20;

            return View(model);
        }

        [HttpPost]
        public IActionResult Index(StationViewModel model)
        {
            return View(model);
        }
    }
}

---

オプショングループを使用する

サンプルコード

index.cshtml

@model SampleMVCApp.ViewModels.StationViewModelGroup

<div class="text-center">
    <h1 class="display-3">Index</h1>
    <form method="post" asp-controller="Station" asp-action="Index">
        <div class="form-group">
            <select asp-for="Station" asp-items="Model.Stations" class="form-control">
            </select>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary" />
        </div>
    </form>
</div>

StationViewModel.cs

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace SampleMVCApp.ViewModels
{
    public class StationViewModelGroup
    {
        public string Station { get; set; }

        public List<SelectListItem> Stations { get; }

        public StationViewModelGroup()
        {
            var YamanoteLineGroup = new SelectListGroup { Name = "山手線" };
            var ChuoLineGroup = new SelectListGroup { Name = "中央線" };

            Stations = new List<SelectListItem>
            {
                new SelectListItem
                {
                    Value = "JY01",
                    Text = "東京",
                    Group = YamanoteLineGroup
                },
                new SelectListItem
                {
                    Value = "JY13",
                    Text = "池袋",
                    Group = YamanoteLineGroup
                },
                new SelectListItem
                {
                    Value = "JY17",
                    Text = "新宿",
                    Group = YamanoteLineGroup
                },
                new SelectListItem
                {
                    Value = "JY20",
                    Text = "渋谷",
                    Group = YamanoteLineGroup
                },
                new SelectListItem
                {
                    Value = "JY25",
                    Text = "品川",
                    Group = YamanoteLineGroup
                },
                new SelectListItem
                {
                    Value = "JY29",
                    Text = "有楽町",
                    Group = YamanoteLineGroup
                },
                new SelectListItem
                {
                    Value = "JC01",
                    Text = "東京",
                    Group = ChuoLineGroup
                },
                new SelectListItem
                {
                    Value = "JC12",
                    Text = "三鷹",
                    Group = ChuoLineGroup
                },
                new SelectListItem
                {
                    Value = "JC24",
                    Text = "高尾",
                    Group = ChuoLineGroup
                },
            };
        }
    }

}

StationController.cs

using Microsoft.AspNetCore.Mvc;
using SampleMVCApp.ViewModels;

namespace SampleMVCApp.Controllers
{
    public class StationController : Controller
    {
        public IActionResult Index()
        {
            var model = new StationViewModelGroup();
            model.Station = "JY20";

            return View(model);
        }

        [HttpPost]
        public IActionResult Index(StationViewModelGroup model)
        {
            return View(model);
        }
    }
}

---

複数選択できるようにする

サンプルコード

index.cshtml

@model SampleMVCApp.ViewModels.StationViewModelIEnumerable

<div class="text-center">
    <h1 class="display-3">Index</h1>
    <form method="post" asp-controller="Station" asp-action="Index">
        <div class="form-group">
            <select asp-for="Stations" asp-items="Model.StationsJY" class="form-control"></select>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary" />
        </div>
    </form>
</div>

StationViewModel.cs

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace SampleMVCApp.ViewModels
{
    public class StationViewModelIEnumerable
    {
        public IEnumerable<string> Stations { get; set; }

        public List<SelectListItem> StationsJY { get; } = new List<SelectListItem>
        {
            new SelectListItem{Value = "JY01", Text = "東京"},
            new SelectListItem{Value = "JY13", Text = "池袋"},
            new SelectListItem{Value = "JY17", Text = "新宿"},
            new SelectListItem{Value = "JY20", Text = "渋谷"},
            new SelectListItem{Value = "JY25", Text = "品川"},
            new SelectListItem{Value = "JY29", Text = "有楽町"}
        };
    }
}

StationController.cs

using Microsoft.AspNetCore.Mvc;
using SampleMVCApp.ViewModels;

namespace SampleMVCApp.Controllers
{
    public class StationController : Controller
    {
        public IActionResult Index()
        {
            var model = new StationViewModelIEnumerable();
            model.Stations = new string[2] { "JY17", "JY25" };

            return View(model);
        }

        [HttpPost]
        public IActionResult Index(StationViewModelIEnumerable model)
        {
            return View(model);
        }
    }
}

HTMLヘルパーを使用する場合

（追記予定）

参考

Microsoft Docs ASP.NET Core > Webアプリ > 選択タグヘルパー
『C#フレームワーク ASP.NET Core3入門』

※コード中のSelectListのValue値は駅ナンバリング（山手線）を参考