如何用纯HTML标签将复选框选中值绑定到ViewModel的List<int>并提交？

我来帮你排查并解决这个问题，你的代码有几个关键地方需要调整：

1. 模型绑定的集合处理与ViewModel初始化 #

ASP.NET MVC的模型绑定器在处理集合时，虽然支持同名input，但如果ViewModel中的List<int>未初始化，未选中任何复选框时它会保持为null；同时还要注意HTML结构的语义正确性，以下是两种可行方案：

方案一：初始化ViewModel的集合 #

修改你的MyClass，在构造函数中初始化CheckboxValues，这样即使没有选中任何复选框，它也会是空列表而非null，选中的项会被自动添加进去：

public class MyClass 
{ 
    public int ID { get; set; } 
    public List<int> CheckboxValues { get; set; } 

    // 添加构造函数初始化集合
    public MyClass()
    {
        CheckboxValues = new List<int>();
    }
}

对应的HTML保持name为CheckboxValues即可，但要把每个复选框单独放在<label>里（原代码把所有input放在一个label里，会导致点击任意文本都选中第一个复选框，属于语义错误）：

<form action="Controller/ActionMethod" method="POST">
    <!-- 每个复选框单独用label包裹，保证点击文本能选中对应复选框 -->
    <label>
        <input name="CheckboxValues" value="1" type="checkbox">
        <span class="label-text">Choice 1</span>
    </label>
    <label>
        <input name="CheckboxValues" value="2" type="checkbox">
        <span class="label-text">Choice 2</span>
    </label>
    <label>
        <input name="CheckboxValues" value="3" type="checkbox">
        <span class="label-text">Choice 3</span>
    </label>
    
    <input type="submit" class="btn btn-primary" style="width:100px; height:30px;" value="Save" />
</form>

方案二：使用带索引的name属性 #

如果是编辑场景需要更精确的集合绑定，可以给每个复选框的name添加索引，模型绑定器会明确识别为集合项：

<form action="Controller/ActionMethod" method="POST">
    <label>
        <input name="CheckboxValues[0]" value="1" type="checkbox">
        <span class="label-text">Choice 1</span>
    </label>
    <label>
        <input name="CheckboxValues[1]" value="2" type="checkbox">
        <span class="label-text">Choice 2</span>
    </label>
    <label>
        <input name="CheckboxValues[2]" value="3" type="checkbox">
        <span class="label-text">Choice 3</span>
    </label>
    
    <input type="submit" class="btn btn-primary" style="width:100px; height:30px;" value="Save" />
</form>

2. 防伪令牌的问题 #

你的控制器上有[ValidateAntiForgeryToken]属性，但表单中没有对应的防伪令牌输入框，这会导致请求被服务器拒绝（返回400错误），根本无法进入Action方法。由于你要求不使用Html Helper，可以手动添加：

首先在GET方法中生成令牌并传递到视图：

[HttpGet]
public ActionResult ActionMethod()
{
    // 生成防伪令牌
    var token = AntiForgery.GetTokens(null, out _).ToString();
    ViewBag.AntiForgeryToken = token;
    return View();
}

然后在表单中添加隐藏输入：

<form action="Controller/ActionMethod" method="POST">
    <input type="hidden" name="__RequestVerificationToken" value="@ViewBag.AntiForgeryToken" />
    
    <!-- 你的复选框代码 -->
    
    <input type="submit" class="btn btn-primary" style="width:100px; height:30px;" value="Save" />
</form>

测试阶段可以暂时注释掉[ValidateAntiForgeryToken]，但生产环境一定要保留并添加令牌，防止CSRF攻击。

3. 表单Action路径的正确性 #

确保action="Controller/ActionMethod"中的控制器名称和动作名称正确，比如你的控制器是HomeController，路径应该是action="Home/ActionMethod"，否则请求会找不到对应的Action方法。

做完这些调整后，选中复选框提交，控制器中的data.CheckboxValues就会正确获取到选中的整数值列表了。

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