当数据库值为 NULL 时，向 DropDownList 添加空选项

Question

我有一个包含多个外键字段的数据库表。当我加载要编辑的记录时，在 Razor 中使用@Html.DropDownList 创建了下拉列表，它正确显示了外键列引用的表中的可能值。而且，因为我正在编辑一条记录，如果之前已经从外键表中选择了一个值，那么它的 ID 就在我的主表的外键列中，正如您所期望的那样。

但是，如果我正在加载进行编辑的记录在其中一个外键列中没有值 - 即，列中的值为 NULL（并且它们都可以为空，原因超出我的控制） ，默认情况下，下拉菜单会选择第一个选项。这不仅具有误导性，因为无法知道该选项是因为以前保存过还是因为它只是第一个选项而显示，这还意味着当我随后保存记录时，第一个选项的值不正确保存到数据库中。

我需要的是每个下拉列表还包括一个“未知”选项，动态添加（即不在数据库中），如果底层外键列具有 NULL 值，则在页面加载时选择该选项，并且如果用户想将以前保存的值更改为 NULL，则可以选择。

当页面加载时，我使用 jQuery 向下拉列表添加值没有问题，如下所示：

$("select").prepend("<option value=''>Unknown</option>")

但是，当页面加载时，即使这个新选项成功添加为列表中的第一个选项，它也不会被选中。第一个“真正的”选项是。而且，即使我可以使用 jQuery 强制选择 'dummy' 选项，这也会在数据库中存在真实值的下拉列表中选择 dummy 选项。

这看起来确实不应该是不寻常或晦涩难懂的事情，但是在一个下午的谷歌搜索之后，我一直在努力寻找任何解决方案。我尝试了 Stack Overflow 中的各种东西，我认为我可能能够成功，但无济于事。

谁能提出解决方案？我认为在控制器中添加一个“虚拟”选项可能是最好的方法，如果我能弄清楚怎么做的话。我很惊讶这不是一个很常见的问题！

控制器中加载下拉列表值的代码如下所示：

ViewBag.PremisesID = new SelectList(db.Premises, "ID", "StreetName", colicCase.PremisesID);

下拉列表对应的 Razor 如下所示：

<div class="form-group">
     @Html.LabelFor(model => model.PremisesID, htmlAttributes: new { @class = "control-label col-md-4" })
     <div class="col-md-8">
         @Html.DropDownList("PremisesID", null, htmlAttributes: new { @class = "form-control" })
         @Html.ValidationMessageFor(model => model.PremisesID, "", new { @class = "text-danger" })
    </div>
</div>

Answer 1

此功能已通过使用DropDownList() 或DropDownListFor() 方法的重载之一（例如接受optionLabel 参数）内置到MVC 中

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    object htmlAttributes
)

或者对于强类型版本

public static MvcHtmlString DropDownListFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> selectList,
    string optionLabel,
    object htmlAttributes
)

optionLabel 的值将作为带有null 值的第一个选项添加（例如生成<option value="">Unknown</option>）。

我强烈建议您使用强类型版本，并且您将 view model 与 SelectList 的属性一起使用，而不是使用 ViewBag，但无论如何，不​​要为属性使用相同的名称您绑定到 ViewBag 属性（有关详细信息，请参阅 this answer）

你的代码应该是

public class MyViewModel
{
    ....
    public int? PremisesID { get; set; }
    public IEnumerable<SelectListItem> PremisesList { get; set; }
    ....
}

在 GET 方法中

var model = new MyViewModel()
{
    .... // map properties from the data model
    PremisesID = dataModel.PremisesID,
    PremisesList = new SelectList(db.Premises, "ID", "StreetName")
};
return View(model);

在视图中

@Html.DropDownListFor(m => m.PremisesID, Model.PremisesList, "Unknown", new { @class = "form-control" })

如果PremisesID 的值是null 或与Premises 表中的ID 值之一不匹配，则将选择第一个选项。