Bootstrap模态框表单提交时如何获取Kendo MultiSelect的值？

我之前在做类似的ASP.NET Core项目时也碰到过这个问题，核心原因通常是选择器上下文不对或者Kendo组件未完全初始化导致的，下面给你一步步的解决方案：

问题排查关键点 #

• 动态模态框的元素选择问题：如果你的模态框是通过Ajax动态加载的，全局选择器$('#VesselTypes')可能找不到元素，因为它不在初始DOM树里。
• Kendo组件初始化时机：如果你的jQuery代码在Kendo MultiSelect完成渲染之前执行，data("kendoMultiSelect")会返回null。

具体解决方案 #

1. 用表单上下文定位元素（最可靠） #

不要用全局选择器，而是通过提交事件中的表单对象（this）来查找内部元素，这样可以避免全局ID冲突或动态元素找不到的问题：

$(document).ready(function() {
    // 绑定表单提交事件
    $("#ModalFormAddCustomView").submit(function (e) {
        e.preventDefault();
        var $form = $(this); // 获取当前表单对象
        
        // 获取文本框值（用表单内查找更可靠）
        var viewName = $form.find('#ViewName').val();
        
        // 正确获取Kendo MultiSelect实例
        var vesselMultiSelect = $form.find('[name="VesselTypes"]').data('kendoMultiSelect');
        var typesValue = [];
        
        // 先确认组件已初始化
        if (vesselMultiSelect) {
            typesValue = vesselMultiSelect.value(); // 获取选中的值数组
            console.log("选中的VesselTypes值：", typesValue); // 控制台验证是否有值
        } else {
            console.error("Kendo MultiSelect未初始化！");
        }
        
        // Ajax提交（注意调整参数传递方式）
        $.ajax({
            type: 'POST',
            url: '/Position/AddCustomView/',
            data: {
                viewname: viewName,
                types: typesValue, // 直接传数组，不需要JSON.stringify
                checkboxes: checkboxData // 假设checkboxData是已定义的变量
            },
            dataType: "json",
            traditional: true, // 必须加这个，确保数组正确传递到后端
            success: function (data) {
                console.log("提交成功");
                $('#add-custom-view').modal('hide'); // 成功后关闭模态框
            },
            error: function (xhr, status, err) {
                console.log("提交失败：", err);
            }
        });
    });
});

2. 处理动态加载的模态框 #

如果你的模态框是点击按钮后才动态加载HTML的，需要在模态框显示完成后再绑定事件或获取组件：

// 模态框显示完成后绑定提交事件
$('#add-custom-view').on('shown.bs.modal', function() {
    $("#ModalFormAddCustomView").off('submit').submit(function (e) {
        // 这里放上面的提交逻辑
    });
});

3. 后端控制器参数匹配 #

确保后端Action的参数能正确接收数组：

[HttpPost]
public IActionResult AddCustomView(string viewname, List<int> types, List<string> checkboxes)
{
    // 处理你的业务逻辑
    return Json(new { Success = true, Message = "自定义视图添加成功" });
}

额外注意事项 #

• 脚本加载顺序：确保页面脚本加载顺序是jQuery → Kendo UI脚本 → 你的自定义脚本，否则Kendo无法正确初始化。
• 避免重复绑定事件：如果模态框会多次打开，记得用off('submit')先解绑旧事件，再绑定新的，防止多次提交。

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