ASP.NET MVC Razor中为下拉列表默认选项设置null值

首先明确核心前提：HTML原生表单提交不支持传输null值，所有提交的表单值均为字符串格式，ASP.NET MVC默认模型绑定器会按规则将对应空值/缺省值转换为可空类型的null，以下方案均无需修改控制器代码，全部在视图层实现：

方案1：手动构造SelectListItem集合替换helper默认提示项（推荐，无额外脚本依赖） #

不用DropDownList方法自带的optionLabel参数（该参数固定生成value为空字符串的默认项），手动在选项集合头部插入默认提示项，代码如下：

@{
    // 从ViewBag读取分类生成选项集合
    var categoryOptions = new SelectList(ViewBag.Categories, "Id", "Name").ToList();
    // 头部插入默认提示项
    categoryOptions.Insert(0, new SelectListItem
    {
        Text = "Select category",
        Value = null,
        Selected = true
    });
}

@* 渲染下拉列表 *@
@Html.DropDownList("CategoryID", categoryOptions, new { @class = "form-select mt-3" })

该写法生成的默认选项value为空字符串，只要绑定的模型中CategoryID属性为可空类型（如int? CategoryID { get; set; }），提交时MVC会自动将空值转换为null完成绑定。

方案2：保留原有DropDownList代码，加小段内联脚本处理提交逻辑 #

如果不想修改原有下拉框渲染代码，可直接在视图中加一段原生JS，在表单提交时判断选中项：如果选中默认提示项，就临时禁用下拉框，表单提交时不会携带该字段参数，MVC绑定找不到对应值时会自动给可空类型属性赋值为null，代码如下：

@* 你原来写的下拉列表代码完全不用动 *@
@Html.DropDownList("CategoryID", new SelectList(ViewBag.Categories, "Id", "Name"),"Select category", new { @class = "form-select mt-3" })

<script>
// 监听当前页面表单提交事件，可根据你的表单id调整选择器
document.querySelector('form').addEventListener('submit', function () {
    const categoryEl = document.getElementById('CategoryID');
    // 选中默认空值项时禁用控件，提交时不会携带该参数
    if (!categoryEl.value) {
        categoryEl.disabled = true;
    }
});
</script>

方案3：直接手写原生select标签（最灵活，完全控制渲染逻辑） #

如果不需要依赖HtmlHelper的渲染逻辑，直接手写select标签是最可控的方式：

<select name="CategoryID" id="CategoryID" class="form-select mt-3">
    <option value="">Select category</option>
    @foreach (var item in ViewBag.Categories)
    {
        <option value="@item.Id">@item.Name</option>
    }
</select>

该写法和方案1的绑定逻辑一致，空值提交到服务端后，可空类型的CategoryID会自动绑定为null。

注意：不要给默认选项设置value="null"，这种写法提交的是字符串"null"，会导致MVC模型绑定失败，触发类型转换错误。

内容的提问来源于stack exchange，提问作者ELOL