ASP.NET根/局部视图引入JS库无法正常调用问题咨询

你遇到的报错本质是两个问题叠加导致的，和视图作用域没有关系：

• 脚本加载顺序错误：你在根视图中把jstree的引入放在了@section Scripts块中，这个块默认会被布局页渲染到整个页面的最底部（所有局部视图内容输出完成后才会注入到页面）。如果局部视图的业务脚本先于jstree加载、或者执行时取到的jQuery对象上还没挂载jstree插件，就会出现方法不存在的报错。
• 重复加载jQuery覆盖全局对象：你在局部视图中单独引入了jQuery，这会直接替换全局的$jQuery实例。jstree是作为jQuery插件挂载在$对象上的，一旦jQuery被重新初始化，之前挂载在旧$上的所有插件都会直接失效。你之前测试“两边同时引入才正常”属于歪打正着的巧合：局部视图引入的jstree挂在了局部视图新加载的jQuery实例上，刚好点击事件触发时取到的$上存在jstree方法，这种写法会造成重复加载资源、版本冲突等隐患，不是正确实现。

1. 所有公共依赖库统一在根视图/全局布局页引入，彻底移除局部视图中jQuery、jstree、公共样式的引入标签，不要在局部视图中重复加载全局资源。
2. 严格控制脚本执行顺序：保证加载顺序为「jQuery库 → jstree插件 → 业务初始化/事件绑定逻辑」，不要让业务逻辑先于依赖库执行。

修正后代码示例 #

根视图代码 #

<!-- 全局统一引入依赖，严格保证jQuery在jstree之前加载 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

<div class="tree">
  <div>
    @(await Html.PartialAsync("MyPartialModule", Model))
  </div>
</div>

@section Scripts {
<script type="text/javascript">
  // 等DOM加载完成、依赖就绪后再执行业务逻辑
  $(function() {
    function renderTree() {
      $('#my-tree').jstree({
        "core": {
          "data": data,
          "themes": {
            "dots": false,
            "icons": false
          }
        },
        "checkbox": {
          "three_state": false,
          "keep_selected_style": true
        },
        "plugins": ["wholerow", "checkbox"]
      });
    }

    // 内联onclick调用的函数需要挂载到window全局作用域
    window.clickButton = function() {
      console.log($("#my-tree").jstree("get_selected").text());
    }

    // 初始化树
    renderTree();
  })
</script>
}

局部视图代码 #

局部视图只保留DOM结构，不再引入任何全局依赖：

@model modelData

<div id="my-tree"></div>
<button onclick="clickButton()"></button>

• 额外注意：如果是局部视图专属的独立脚本，也建议在全局依赖加载完成后再初始化，避免出现执行顺序问题；用内联onclick绑定的事件函数，必须挂载到window对象上，否则会出现函数找不到的报错。

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