ASP.NET Core项目中MDBootstrap Treeview无交互无法正常工作如何解决

问题核心原因及修复方案 #

你遇到的无交互问题主要由以下几个配置错误导致，按优先级修复即可：

• JS执行顺序错误
  你将树形视图初始化脚本放在了jQuery、MDB等依赖资源之前加载，浏览器执行初始化代码时$对象和MDB组件方法都未加载，初始化完全失效。需要把初始化代码移动到所有JS依赖的后面。
• 缺少Treeview组件资源
  你当前仅引入了MDB基础资源，Treeview属于附加组件，需额外引入对应的组件CSS和JS文件，你当前addons目录下仅引入了datatables的样式，未引入Treeview相关资源。
• 静态资源路径错误
  ASP.NET Core默认仅开放wwwroot目录为静态资源访问目录，你直接引用node_modules下的资源浏览器无法正常加载，要么将所需的JS/CSS文件拷贝到wwwroot的对应目录下，要么改用CDN地址引入依赖。
• 可通过浏览器控制台快速定位问题
  按F12打开开发者工具的「控制台」标签，可直接看到$未定义、mdbTreeview不是合法方法等明确报错，可对应排查资源加载问题。

修正后代码示例 #

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mdb.min.css">
<!-- 新增Treeview组件样式 -->
<link rel="stylesheet" href="./css/addons/treeview.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="treeview-animated w-20 border mx-4 my-4">
        <h6 class="pt-3 pl-3">Folders</h6>
        <hr>
        <ul class="treeview-animated-list mb-3">
            <!-- 原有树形结构代码保持不变 -->
            <li class="treeview-animated-items">
                <a class="closed">
                    <i class="fas fa-angle-right"></i>
                    <span><i class="far fa-envelope-open ic-w mx-1"></i>Mail</span>
                </a>
                <ul class="nested">
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-bell ic-w mr-1"></i>Offers </div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-address-book ic-w mr-1"></i>Contacts</div>
                    </li>
                    <li class="treeview-animated-items">
                        <a class="closed">
                            <i class="fas fa-angle-right"></i>
                            <span><i class="far fa-calendar-alt ic-w mx-1"></i>Calendar</span>
                        </a>
                        <ul class="nested">
                            <li>
                                <div class="treeview-animated-element"><i class="far fa-clock ic-w mr-1"></i>Deadlines</div>
                            </li>
                            <li>
                                <div class="treeview-animated-element"><i class="fas fa-users ic-w mr-1"></i>Meetings</div>
                            </li>
                            <li>
                                <div class="treeview-animated-element"><i class="fas fa-basketball-ball ic-w mr-1"></i>Workouts</div>
                            </li>
                            <li>
                                <div class="treeview-animated-element"><i class="fas fa-mug-hot ic-w mr-1"></i>Events</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="treeview-animated-items">
                <a class="closed">
                    <i class="fas fa-angle-right"></i>
                    <span><i class="far fa-folder-open ic-w mx-1"></i>Inbox</span>
                </a>
                <ul class="nested">
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Admin</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Corporate</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Finance</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-folder-open ic-w mr-1"></i>Other</div>
                    </li>
                </ul>
            </li>
            <li class="treeview-animated-items">
                <a class="closed">
                    <i class="fas fa-angle-right"></i>
                    <span><i class="far fa-gem mx-1"></i>Favourites</span>
                </a>
                <ul class="nested">
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-pepper-hot ic-w mr-1"></i>Restaurants</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="far fa-eye ic-w mr-1"></i>Places</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-gamepad ic-w mr-1"></i>Games</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-cocktail ic-w mr-1"></i>Coctails</div>
                    </li>
                    <li>
                        <div class="treeview-animated-element"><i class="fas fa-pizza-slice ic-w mr-1"></i>Food</div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="far fa-comment ic-w mr-1"></i>Notes</div>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="fas fa-cogs ic-w mr-1"></i>Settings</div>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="fas fa-desktop ic-w mr-1"></i>Devices</div>
            </li>
            <li>
                <div class="treeview-animated-element"><i class="fas fa-trash-alt ic-w mr-1"></i>Deleted Items</div>
            </li>
        </ul>
    </div>
    <!-- 先加载所有依赖JS -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!-- 新增Treeview组件JS -->
    <script type="text/javascript" src="./js/addons/treeview.min.js"></script>
    <!-- 最后执行初始化代码 -->
    <script>
        // Treeview Initialization
        $(document).ready(function() {
            $('.treeview-animated').mdbTreeview();
        });
    </script>
</body>

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