DevExtreme dxSelectBox实例获取失败问题求助

问题场景 #

有两个DevExtreme选择框A和B，当A的选中项变化时，需要在特定条件下将B选中第一项。当前A的onValueChanged事件代码中，$("#selectBoxB").dxSelectBox('instance')返回undefined，但在开发者工具控制台执行相同代码却能正常获取实例。

A的事件代码：

function selectBoxA_onValueChanged(e) {
    document.cookie = "selectedA_value=" + e.value;
    if ("Option2" !== e.value)
    {
        var selectBoxB = $("#selectBoxB").dxSelectBox('instance');
        var currentValue = selectBoxB.option('value');
        if (currentValue === "OptionB4") {
            var dataSource = selectBoxB.option("dataSource");
            if (dataSource.length > 0) {
                selectBoxB.option("value", dataSource[0]);
            }
            else {
                selectBoxB.option("value", null);
            }
        }
    }
    window.location.reload();
}

B的Razor配置：

<div class="selectBox">
    <h6 class="title">SelectionBox B</h6>
    @(Html.DevExtreme().SelectBox()
        .ID("selectBoxB")
        .DataSource(Model.SelectBoxBContent)
        .Value(Model.SelectedBOption)
        .OnValueChanged("selectBoxB_onValueChanged")
    )
</div>

额外背景：

• 选择框A选中Option2时，B会加载更多选项
• 切换出Option2时，若B当前选中的是仅在Option2下可用的OptionB4，需将B重置为第一项
• 需适配现有项目风格，同时接受优化建议

原因分析 #

代码最后执行了window.location.reload()，页面刷新流程启动后，DOM元素和DevExtreme组件实例会被逐步销毁，此时尝试获取B的实例自然返回undefined；而控制台执行时页面处于稳定状态，因此能正常获取实例。此外，即便能获取到实例，前端修改的B值也会被页面刷新后Model中的初始值覆盖，前端操作无实际意义。

适配现有风格的解决方案 #

将重置B的逻辑移至后端处理，通过cookie传递重置标记，页面刷新时由后端修改Model的选中值：

前端代码修改 #

function selectBoxA_onValueChanged(e) {
    document.cookie = "selectedA_value=" + e.value;
    let needResetB = false;
    // 提前在页面加载时将B的当前值存入全局变量
    // 页面中添加：<script>var currentBValue = '@Model.SelectedBOption';</script>
    if ("Option2" !== e.value && currentBValue === "OptionB4") {
        needResetB = true;
    }
    // 设置或清除重置标记cookie
    if (needResetB) {
        document.cookie = "resetSelectBoxB=true; path=/";
    } else {
        document.cookie = "resetSelectBoxB=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
    window.location.reload();
}

后端逻辑修改（Controller示例） #

public IActionResult YourPageAction() {
    var model = new YourViewModel();
    var selectedA = Request.Cookies["selectedA_value"];

    if (!string.IsNullOrEmpty(selectedA)) {
        // 根据A的选中值加载B的数据源
        if (selectedA == "Option2") {
            model.SelectBoxBContent = GetExtendedBOptions();
        } else {
            model.SelectBoxBContent = GetDefaultBOptions();
            // 检查是否需要重置B的选中值
            var resetBFlag = Request.Cookies["resetSelectBoxB"];
            if (resetBFlag == "true" && model.SelectedBOption == "OptionB4") {
                if (model.SelectBoxBContent.Any()) {
                    // 假设数据源是键值对集合，取第一个选项的值
                    model.SelectedBOption = model.SelectBoxBContent.First().Value;
                } else {
                    model.SelectedBOption = null;
                }
                // 清除重置标记cookie
                Response.Cookies.Delete("resetSelectBoxB");
            }
        }
    }
    // 其他逻辑处理
    return View(model);
}

优化实现建议 #

避免页面刷新，改用异步更新方式，提升用户体验同时从根源解决实例获取问题：

前端异步更新代码 #

function selectBoxA_onValueChanged(e) {
    const selectedA = e.value;
    document.cookie = "selectedA_value=" + selectedA;

    // 异步请求B的数据源
    $.ajax({
        url: '/YourController/GetSelectBoxBContent',
        data: { selectedA: selectedA },
        success: function(data) {
            const selectBoxB = $("#selectBoxB").dxSelectBox('instance');
            // 更新B的数据源
            selectBoxB.option('dataSource', data);
            
            // 检查并重置B的选中值
            if (selectedA !== "Option2") {
                const currentBValue = selectBoxB.option('value');
                if (currentBValue === "OptionB4") {
                    selectBoxB.option('value', data.length > 0 ? data[0].Value : null);
                }
            }
        }
    });
}

后端新增接口 #

public IActionResult GetSelectBoxBContent(string selectedA) {
    var data = selectedA == "Option2" ? GetExtendedBOptions() : GetDefaultBOptions();
    return Json(data);
}

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