ASP.NET Core MVC PartialView中Ajax Post提交RolesList为空如何修复

核心原因 #

FormData采集表单数据时，多选<select>仅会上报处于选中状态的option值，你动态添加到#RolesList的option未设置选中属性，所以不会被包含在提交参数中，导致后端绑定为null。

修复步骤 #

1. 动态添加option时默认设置选中状态 #

修改添加option的JS代码，新增selected属性：

$('#AddRolesGroup').click(function () { 
    $('#EmpSelect :selected').map(function (row, item) { 
        console.log(item.text); 
        // 添加selected属性保证提交时被采集
        $('#RolesList').append("<option selected value='" + item.value + "'>" + item.text + "</option>") 
    }); 
});

2. 提交前全选所有RolesList的option #

如果不想让用户直观看到所有option处于选中状态，可在构造FormData前临时触发全选：

$(function(){    
    var form = $(this).parents('.modal').find('form');
    var actionUrl = form.attr('action');
    // 新增：全选RolesList下所有option
    $('#RolesList option').prop('selected', true);
    var sendData = new FormData(form.get(0));        
    $.ajax({
        url: actionUrl,
        method: 'post',
        data: sendData,
        processData: false,
        contentType: false,
        cache: false,
        success: function (redata) {
            // 业务逻辑
        },
        error: function (message) {
            alert(message);
        }
    })
})

3. 验证后端模型绑定规则 #

• 后端接收参数的实体类中，RolesList必须为集合类型，如public List<int> RolesList { get; set; }或public List<string> RolesList { get; set; }，不可使用SelectList、单个字符串/数值类型接收。
• 确认<select>标签的name属性值与模型属性名完全一致，asp-for="RolesList"默认会生成name="RolesList"，如果PartialView存在模型前缀，可手动指定name="RolesList"覆盖默认生成规则。

兜底方案：手动注入参数到FormData #

如果上述方案仍不生效，可直接遍历#RolesList手动添加参数到FormData，无需依赖表单自动采集：

var sendData = new FormData(form.get(0));
// 手动追加所有RolesList值
$('#RolesList option').each(function(){
    sendData.append('RolesList', $(this).val());
});

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