ASP.NET MVC：Ajax表单提交后从模型刷新Kendo控件的问题

嘿，作为ASP.NET MVC新手碰到Kendo控件的这种坑太正常啦，我来帮你梳理下可能的问题和解决办法！

你说初始加载时Multiselect能正常绑定模型，但Ajax提交后就失效了，大概率是这两个原因之一：

1. Kendo控件没有重新初始化：局部视图被Ajax替换后，原来的Multiselect实例还留在DOM里，新渲染的HTML没有触发控件的初始化逻辑；
2. 模型数据没有正确传递到局部视图：控制器返回的更新后模型数据不对，导致局部视图渲染的Multiselect选项或选中值还是旧的。

方案一：局部视图更新后重新初始化Multiselect（最常用） #

Kendo控件需要JavaScript来初始化实例，局部视图被Ajax替换后，新的HTML不会自动触发初始化，所以我们要手动处理，还要注意先销毁旧实例避免冲突：

局部视图代码示例 #

@model YourViewModel

<!-- TextBox控件 -->
@Html.Kendo().TextBoxFor(m => m.YourTextBox).Events(e => e.Change("onTextboxChanged"))

<!-- Multiselect控件 -->
@Html.Kendo().MultiSelectFor(m => m.SelectedIds)
    .DataTextField("Name")
    .DataValueField("Id")
    .BindTo(Model.AvailableOptions)

<script>
// 页面加载/局部视图刷新时初始化Multiselect
$(function() {
    initMultiSelect();
});

function initMultiSelect() {
    // 先销毁已存在的Multiselect实例
    const multiSelect = $('#SelectedIds').data('kendoMultiSelect');
    if (multiSelect) {
        multiSelect.destroy();
    }
    // 重新初始化，绑定新的数据源
    $('#SelectedIds').kendoMultiSelect({
        dataTextField: "Name",
        dataValueField: "Id",
        dataSource: @Html.Raw(Json.Encode(Model.AvailableOptions))
    });
}

// TextBox的change事件处理
function onTextboxChanged() {
    $.ajax({
        url: '@Url.Action("UpdatePartial", "Home")',
        type: 'POST',
        data: $('form').serialize(),
        success: function(result) {
            // 替换局部视图容器内容
            $('#partialViewContainer').html(result);
            // 这里不用再调用initMultiSelect，因为局部视图里的脚本会自动执行
        }
    });
}
</script>

方案二：确保控制器返回正确的更新后模型 #

检查你的控制器Action，确保它返回的局部视图携带了更新后的模型数据：

控制器代码示例 #

[HttpPost]
public ActionResult UpdatePartial(YourViewModel model)
{
    // 这里处理你的业务逻辑，比如根据TextBox的值更新可选选项
    model.AvailableOptions = GetUpdatedOptions(model.YourTextBox);
    // 也可以根据需求更新选中值
    model.SelectedIds = GetDefaultSelectedIds(model.YourTextBox);

    // 返回携带新模型的局部视图
    return PartialView("_YourPartialView", model);
}

方案三：直接刷新Multiselect的数据源（无需重新渲染局部视图） #

如果你不想替换整个局部视图，只想更新Multiselect的数据，可以让控制器返回JSON格式的新数据源，然后直接刷新控件：

控制器返回JSON #

[HttpPost]
public JsonResult UpdateMultiSelectData(string textBoxValue)
{
    var newOptions = GetUpdatedOptions(textBoxValue);
    var newSelectedIds = GetDefaultSelectedIds(textBoxValue);
    return Json(new { Options = newOptions, SelectedIds = newSelectedIds });
}

Ajax回调处理 #

function onTextboxChanged() {
    $.ajax({
        url: '@Url.Action("UpdateMultiSelectData", "Home")',
        type: 'POST',
        data: { textBoxValue: $('#YourTextBox').val() },
        success: function(data) {
            const multiSelect = $('#SelectedIds').data('kendoMultiSelect');
            // 更新数据源
            multiSelect.dataSource.data(data.Options);
            // 更新选中值
            multiSelect.value(data.SelectedIds);
        }
    });
}

• 打开浏览器开发者工具 -> 网络面板，查看Ajax请求返回的内容，确认模型数据/HTML是否正确；
• 检查控制台有没有JavaScript错误，比如找不到控件实例、数据源格式不匹配等；
• 确保Multiselect的ID在DOM中是唯一的，避免重复初始化冲突。

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