ASP.NET 7 Razor复选框勾选后值为空的问题求助

问题核心 #

通过AJAX加载的Bootstrap模态框内，Html.CheckBoxFor生成的复选框提交时，可见复选框值为空，仅关联隐藏字段传false，导致后端模型验证失败；主页面使用相同代码无此问题。

解决方案 #

1. 排查DOM元素重复问题

AJAX重复加载模态框时，易生成多个ID为RESET_LOGIN_COUNTER的元素，导致jQuery选择器匹配到旧的隐藏元素而非当前复选框。

• 处理方式：加载新模态框前清除旧实例

  // 清除模态框容器内的旧内容
  $('#modal-container').empty();
  // 再通过AJAX加载新模态框内容到容器
  

  或销毁旧模态框实例后再初始化：

  $('#your-modal-id').modal('dispose');
  // 插入新模态框HTML后重新初始化
  $('#your-modal-id').modal('show');
  

2. 修正AJAX提交的表单序列化逻辑

默认serialize()方法对动态加载元素可能处理异常，手动构建FormData确保复选框值正确：

$(document).on('submit', '#your-form-id', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const checkbox = $('#RESET_LOGIN_COUNTER');
    // 手动覆盖复选框字段值
    formData.set(checkbox.attr('name'), checkbox.is(':checked') ? 'true' : 'false');
    
    $.ajax({
        url: $(this).attr('action'),
        method: $(this).attr('method'),
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            // 处理成功回调
        }
    });
});

3. 手动生成复选框DOM结构替代辅助方法

若Html.CheckBoxFor在动态加载场景下生成结构异常，可手动输出标准结构：

<div class="form-check form-check-inline">
    <input type="checkbox" class="form-check-input" 
           id="RESET_LOGIN_COUNTER" 
           name="RESET_LOGIN_COUNTER" 
           value="true" 
           @(Model.RESET_LOGIN_COUNTER ? "checked" : "")>
    <input type="hidden" name="RESET_LOGIN_COUNTER" value="false">
    <label class="form-check-label ps-2" for="RESET_LOGIN_COUNTER">@commonLocalizer.Get("ResetFailedLogin")</label>
</div>

4. 使用事件委托绑定提交事件

针对动态生成的表单，需通过事件委托确保提交事件能触发：

// 绑定到document，确保动态生成的表单能触发事件
$(document).on('submit', '#your-form-id', function(e) {
    e.preventDefault();
    // 提交逻辑
});

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