ASP.NET Framework下Bootstrap3.4.1集成bootstrap-table不显示表格问题

问题根因 #

你的核心问题是脚本加载顺序错误：

• 你项目的_Layout.cshtml中，jQuery、Bootstrap 核心JS 是放在body标签末尾才加载的，而你写在about.cshtml里的 bootstrap-table 引入代码、表格初始化逻辑，是在@RenderBody()的位置渲染，也就是加载顺序早于jQuery和Bootstrap JS。
• 当执行$('#table').bootstrapTable()时，全局的$（jQuery对象）还未被定义，代码直接抛出异常，表格组件无法正常初始化，所以只会渲染原生的表格文本结构。

修复方案 #

利用_Layout.cshtml末尾预留的scripts区域加载JS逻辑，这个区域的内容会自动在jQuery、Bootstrap 加载完成后才执行。

修改你的about.cshtml代码如下：

@{    ViewBag.Title = "About";}

<!-- 样式放在页面头部正常加载即可 -->
<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">

<table id="table">
    <thead>
        <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
</table>

<!-- 所有JS逻辑放在scripts块内，确保依赖加载完成后执行 -->
@section scripts{
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
    <script>
        var $table = $('#table')
        $(function () {
            var data = [
                {'id': 0,'name': 'Item 0','price': '$0'},
                {'id': 1,'name': 'Item 1','price': '$1'},
                {'id': 2,'name': 'Item 2','price': '$2'},
                {'id': 3,'name': 'Item 3','price': '$3'},
                {'id': 4,'name': 'Item 4','price': '$4'},
                {'id': 5,'name': 'Item 5','price': '$5'}
            ]
            $table.bootstrapTable({ data: data })
        })
    </script>
}

修改后刷新页面即可正常渲染表格，如果仍有异常可以检查~/bundles/bootstrap配置，确认是否完整包含了Bootstrap 3.4.1的核心JS依赖。

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