如何实现ListBoxFor多选并正确传递至Controller的Post方法

你遇到的核心问题是当前绑定的是单个整数属性，但多选ListBox会提交多个值，导致模型绑定失败。下面一步步帮你解决：

1. 调整ViewModel结构 #

首先，在CreateRecipe模型里新增一个集合类型的属性，专门用来存储选中的多个TagId，和用于生成下拉选项的allTags分开：

public class CreateRecipe
{
    // 原有的标签列表，用于生成ListBox的选项
    public List<Tag> allTags { get; set; }
    
    // 新增：存储所有选中的TagId
    public List<int> SelectedTagIds { get; set; }
    
    // 你的其他模型属性（比如Recipe名称、描述等）...
}

这里默认你的Tag类包含int TagId和string Name属性（和你原有的SelectList配置匹配）。

2. 修改视图中的ListBox绑定 #

把ListBox的绑定目标改成新增的集合属性，这样多选的数值才能正确被模型接收：

@Html.ListBoxFor(model => model.SelectedTagIds, 
    new SelectList(Model.allTags, "TagId", "Name"), 
    new { @class = "form-control", @Id = "SelectTags", @style = "width:200px;height:300px;" })

为什么要这么改？因为多选控件提交的是一组值，必须绑定到集合类型（List<int>或int[]都可以），而你之前绑定的是单个int类型，模型绑定无法解析多个值，自然会抛出"字段TagId必须是数字"的验证错误。

3. 在控制器中处理选中的标签 #

现在你的Post方法里，就能通过model.SelectedTagIds拿到所有选中的TagId了，比如可以在插入逻辑里遍历这个集合：

[HttpPost]
public ActionResult Create(CreateRecipe model)
{
    try
    {
        // 示例：遍历选中的标签ID，处理关联逻辑
        foreach (int tagId in model.SelectedTagIds)
        {
            // 这里添加Recipe和Tag的关联插入逻辑
        }
        return RedirectToAction("ViewRecipes");
    }
    catch
    {
        return View();
    }
}

这样调整后，按住Ctrl多选标签再提交，就能正确把所有选中的TagId传递到控制器，不会再出现验证错误啦！

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