同一Razor视图渲染多个jsTree时第二个Ajax调用被忽略如何解决

使用jsTree库通过Ajax调用后端接口获取数据库数据，渲染展示层级关系的树组件。需求是在同一个Razor视图中渲染两个独立的jsTree组件，实际运行时出现以下异常：

• id为jobstree的第一个树可正常渲染
• id为costCentersTree的第二个树对应的Ajax调用完全未发起，无法加载数据

原始实现代码如下：

<div id="jobstree" />         <!-- 可正常渲染 -->
<div id="costCentersTree" />  <!-- 对应调用完全被跳过 -->

<script>
$(function() {

    $('#jobstree').jstree({
        'core': {
            'data': {
                'url': function(node) {
                    return "/Home/GetNodes/";
                },
                'data': function(node) {
                    return {
                        'id' : node.id,
                        'text': node.text,
                        'children': node.children
                    };
                }
            },
            "multiple": false,
        },
    });

    $('#costCentersTree').jstree({
        'core': {
            'data': {
                'url': function(node) {
                    return "/Home/GetCostCenterTree/";
                },
                'data': function(node) {
                    return {
                        'id': node.id,
                        'text': node.text,
                        'children': node.children
                    };
                }
            },
            'multiple': false,
        },
    });
});
</script>

两个核心问题导致第二个树初始化失败：

1. DOM结构解析错误：HTML标准中div属于非空元素，不支持<div />这种自闭合写法。浏览器解析时不会将自闭合的div识别为已结束的标签，会把后续的costCentersTree容器当成jobstree容器的内部子元素。jsTree初始化第一个容器时会重写内部DOM结构，第二个容器的初始化逻辑根本不会被触发，自然不会发起Ajax请求。
2. JS语法兼容问题：代码中配置对象的最后一个属性后多了冗余尾逗号，在低版本浏览器环境中会直接触发JS语法错误，打断后续代码执行，直接导致第二个树的初始化代码不运行。

按以下步骤修改即可解决问题：

• 修正HTML容器写法，所有div使用完整的闭合标签，保证两个树容器是独立的同级DOM元素：

<div id="jobstree"></div>
<div id="costCentersTree"></div>

• 移除JS配置中所有冗余的尾逗号，避免低版本环境语法报错，修正后的初始化代码如下：

$(function() {
    $('#jobstree').jstree({
        'core': {
            'data': {
                'url': function(node) {
                    return "/Home/GetNodes/";
                },
                'data': function(node) {
                    return {
                        'id' : node.id,
                        'text': node.text,
                        'children': node.children
                    };
                }
            },
            "multiple": false
        }
    });

    $('#costCentersTree').jstree({
        'core': {
            'data': {
                'url': function(node) {
                    return "/Home/GetCostCenterTree/";
                },
                'data': function(node) {
                    return {
                        'id': node.id,
                        'text': node.text,
                        'children': node.children
                    };
                }
            },
            'multiple': false
        }
    });
});

修改完成后刷新页面，可在浏览器开发者工具的网络面板看到两个树对应的Ajax请求均正常发起，两个组件可独立渲染、互不干扰。

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