如何通过Ajax.BeginForm将复选框值传递至控制器

问题根源 #

你当前代码存在两个核心问题：

• 表单嵌套：Ajax.BeginForm本身会自动生成一个<form>标签，你在内部又嵌套了一层<form>，这会导致表单提交逻辑混乱，无法正确传递所有字段值。
• 复选框未绑定模型：你的复选框只有id属性，缺少与模型字段匹配的name属性，MVC模型绑定机制无法识别该字段，自然无法将选中状态传递到CheckValue中。

具体解决步骤 #

1. 修复视图代码（DateViewer.cshtml）

首先移除内部嵌套的<form>标签，然后通过两种方式绑定复选框与模型字段：

方式一：使用MVC辅助方法（推荐）

用Html.CheckBoxFor自动生成与模型字段绑定的复选框，无需手动设置name：

<div class="form-container">
    @using (Ajax.BeginForm("ReceiverFunc", "View", new AjaxOptions { GenerateTargetId = "wrapper" }))
    {
        <fieldset>
            <label>Starting date:</label>
            @Html.JQueryUI().DatepickerFor(model => model.Start, new { @id = "date1" })
            <script type="text/javascript">
                saveDate("date1");
            </script>

            <label>End date:</label>
            @Html.JQueryUI().DatepickerFor(model => model.End, new { @id = "date2" })
            <script type="text/javascript">
                saveDate("date2");
            </script>

            <input type="submit" value="Generate List" />
            <label>Checkbox:</label>
            @Html.CheckBoxFor(model => model.CheckValue, new { @id = "check" })
        </fieldset>
    }
</div>

方式二：手动添加name属性

如果不想用辅助方法，直接给复选框添加与模型字段名一致的name属性即可：

Checkbox: <input type="checkbox" id="check" name="CheckValue">

2. 模型与控制器无需修改

你的EventModel已经定义了CheckValue布尔字段，ReceiverFunc方法也正确接收EventModel参数，提交时MVC会自动将复选框的选中状态（选中为true，未选中为false）绑定到模型的对应属性。

3. 可选：JS手动处理（针对特殊业务逻辑）

如果需要在提交前通过JS处理复选框值，可以监听表单提交事件，配合隐藏字段传递值：

<!-- 在Ajax.BeginForm内部添加隐藏字段 -->
<input type="hidden" id="hiddenCheckValue" name="CheckValue" />

<script>
    $('form').submit(function() {
        var isChecked = getValueOfCheckBox('#check');
        $('#hiddenCheckValue').val(isChecked);
    });
</script>

不过这种方式仅适用于有额外处理逻辑的场景，常规情况下用前两种方式即可。

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