使用ViewBag时DropDownList无法返回选中项ProductId的问题

核心问题分析 #

出现选中项ProductId返回null的情况，大概率是模型绑定的名称不匹配，或是表单提交的字段名与控制器接收参数/模型属性名不一致导致的。

具体解决方案 #

方案1：保证参数名称与下拉框name属性一致 #

你当前使用的DropDownList第一个参数是"ProductId"，这会生成name="ProductId"的下拉框。控制器必须接收同名参数，或绑定到模型的同名属性：

场景A：直接接收参数

[HttpPost]
public ActionResult SubmitForm(int? ProductId) // 用int?兼容未选中的情况
{
    if (ProductId.HasValue)
    {
        // 处理选中的ProductId
    }
    // 其他业务逻辑
}

场景B：绑定到强类型模型

如果使用ViewModel，需确保模型包含同名属性：

public class ProductFormViewModel
{
    public int? ProductId { get; set; }
    // 其他表单属性
}

控制器Action：

[HttpPost]
public ActionResult SubmitForm(ProductFormViewModel model)
{
    if (model.ProductId.HasValue)
    {
        // 处理选中的ProductId
    }
    // 其他业务逻辑
}

方案2：改用强类型DropDownListFor（推荐） #

弱类型的ViewBag容易引发名称匹配问题，强类型的DropDownListFor能从根源避免这类错误：

1. 定义ViewModel：

public class ProductFormViewModel
{
    public int? ProductId { get; set; } // 存储选中的ID
    public IEnumerable<SelectListItem> Products { get; set; } // 下拉选项集合
}

2. 控制器赋值：

public async Task<ActionResult> Create()
{
    var model = new ProductFormViewModel();
    model.Products = new SelectList(await _productService.GetAllProduct(), "ProductId", "ProductName");
    return View(model);
}

3. Razor页面渲染：

@model ProductFormViewModel

@using (Html.BeginForm("SubmitForm", "Product", FormMethod.Post))
{
    @Html.DropDownListFor(m => m.ProductId, Model.Products, "Select Product", new { @class = "form-control" })
    <button type="submit">提交</button>
}

方案3：检查生成的HTML结构 #

如果以上操作无效，右键查看页面源码，确认两点：

• <select>标签的name属性为ProductId（与控制器接收的参数名一致）
• 每个<option>的value属性是正确的ProductId数值，而非空值或错误内容

正确的HTML示例：

<select name="ProductId" class="form-control">
    <option value="">Select Product</option>
    <option value="1">Product A</option>
    <option value="2">Product B</option>
</select>

方案4：排查表单提交异常 #

• 确保表单使用POST方法提交，且没有嵌套表单（嵌套会导致提交失效）
• 检查页面JS代码，确认没有阻止表单默认提交行为或修改提交数据

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