ASP.NET MVC DropDownListFor, EnumDropDownListFor & SelectList Note

2023-08-20

筆記 ASP.NET MVC DropDownListFor, EnumDropDownListFor & SelectList 的使用方式以及各種多載的差異 😀

說明

SelectList

SelectList 可以下拉式選單設定預設值。同時也有 Group Option 以及 Disabled Option 的功能，非常方便。

而參數包含指定 Model 當中那一個欄位是 Key，那一個欄位是 Value，如果不清楚可以透過 Alt + F1 來確認。

SelectList | learn.microsoft

new SelectList(Model, "CategoryId", "Name", Model[i].ParentCategoryId)

可以直接在 Controller 使用 ViewBag 來設定 SelectList 再傳給 View 當作 DropDownListFor 的資料來源參數，但目前個人更喜歡傳 Model，直接在 View 處理。

另外也可以從 DB 直接取出資料來組合 SelectList:

ViewBag.NewsTypes = db.News
        .Select(x => x.NewsType)
        .Distinct()
        .Select(x => new SelectListItem { Text = x, Value = x })
        .ToList();

DropDownListFor

DropDownListFor 可以設定預設選項的值。

DropDownListFor | learn.microsoft

@ViewBag.Categories = db.ACategories.Where(c => c.IsEnable == true).ToList();

<div class="form-group">
    @Html.LabelFor(model => model.CategoryId, 
      htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(
          model => model.CategoryId, 
          new SelectList(ViewBag.Categories, "CategoryId", "Name"), 
          "Select Category", 
          new { @class = "form-control" })

        @Html.ValidationMessageFor(
          model => model.CategoryId, "", 
          new { @class = "text-danger" })
    </div>
</div>

在 Grid-View Edit 情況下的設定方式。

<div class="form-group">
    <div class="col-md-10">
        @Html.DropDownListFor(
            model => model[i].ParentCategoryId,
            new SelectList(Model, "CategoryId", "Name", Model[i].ParentCategoryId),
            "Select Category",
            new { @class = "form-select" })
        @Html.ValidationMessageFor(
          model => model[i].ParentCategoryId, "", 
          new { @class = "text-danger" })
    </div>
</div>

如果是透過 ViewBag 的方式傳入，需要轉型才能正確使用：

<div class="form-group">
    @Html.LabelFor(model => model.NewsType, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(
            model => model.NewsType, 
            (IEnumerable<SelectListItem>)ViewBag.NewsTypes, 
            new { @class = "form-control" })

        @Html.ValidationMessageFor(model => model.NewsType, "", new { @class = "text-danger" })
    </div>
</div>

EnumDropDownListFor

EnumDropDownListFor 的使用較為單純，只需要提供 Model 即可，沒有太多複雜的變化，預設會使用 Enum Value 值為 0 的項目當作預設值。

使用 EnumDropDownListFor 會自動產生一個 SelectList，所以不需要再另外傳遞資料來源參數。

EnumDropDownListFor | learn.microsoft

<div class="form-group">
    @Html.LabelFor(
      model => model.Type, 
      htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EnumDropDownListFor(
          model => model.Type, 
          htmlAttributes: new { @class = "form-control" })
        @Html.ValidationMessageFor(
          model => model.Type, "", new { @class = "text-danger" })
    </div>
</div>