.NET MVC Kendo Grid级联ComboBox草稿编辑显示ID而非文本问题

方法1：页面加载时触发父ComboBox的Change事件 #

级联ComboBox依赖父控件的选中值加载数据，可在页面初始化完成后手动触发父控件的change事件，强制子ComboBox加载对应数据并自动匹配已保存的草稿值。

$(document).ready(function() {
    const parentCombo = $("#ParentId").data("kendoComboBox");
    const childCombo = $("#ChildId").data("kendoComboBox");

    if (parentCombo.value() !== "") {
        parentCombo.trigger("change");
        // 延迟设置子控件值，避免异步加载数据的时序问题
        setTimeout(() => {
            childCombo.value("@Model.ChildId");
        }, 100);
    }
});

方法2：后端预加载子ComboBox数据源 #

在编辑页面初始化时，直接根据草稿中保存的父ID，预加载对应子ComboBox的选项，无需等待用户交互。修改MVC代码如下：

@(Html.Kendo().ComboBox()
    .Name("ChildId")
    .DataTextField("Text")
    .DataValueField("Value")
    .CascadeFrom("ParentId")
    .DataSource(source => source
        .Read(read => read.Action("GetChildData", "Home")
            .Data("getParentId")
        )
    )
    .Value(Model.ChildId.ToString())
    .OptionLabel("Select Child")
)

<script>
function getParentId() {
    return { parentId: "@Model.ParentId" };
}
</script>

同时调整后端GetChildData接口，支持接收父ID参数并返回对应子数据：

public ActionResult GetChildData(int? parentId)
{
    var childOptions = new List<SelectListItem>();
    if (parentId.HasValue)
    {
        childOptions = _dbContext.Children
            .Where(c => c.ParentId == parentId.Value)
            .Select(c => new SelectListItem { Text = c.Name, Value = c.Id.ToString() })
            .ToList();
    }
    return Json(childOptions, JsonRequestBehavior.AllowGet);
}

方法3：手动设置子ComboBox的显示文本 #

如果仅需显示已保存的文本而无需加载完整子选项列表，可直接手动设置控件的值和显示文本：

$(document).ready(function() {
    const childCombo = $("#ChildId").data("kendoComboBox");
    const savedChildId = "@Model.ChildId";
    const savedChildText = "@Model.ChildText"; // 需在Model中存储草稿对应的子文本

    if (savedChildId !== "") {
        childCombo.value(savedChildId);
        childCombo.text(savedChildText);
    }
});

注：此方法适合无需用户重新选择子选项的场景，若需支持重新选择，仍需确保数据源已加载。

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