Bootstrap asp.net 框架初学者答案

【问题标题】：Bootstrap asp.net framework begginerBootstrap asp.net 框架初学者
【发布时间】：2022-01-01 02:35:37
【问题描述】：

我对 Bootstrap 和 ASP.Net 都有点陌生。

我正在尝试使用 Bootstrap 主页中的一个非常简单的示例我只是把它扔到about.cshtml 文件中。

在 ASP.Net 上，Bootstrap 是 3.4.1 版本，我选择了 Bootstrap 示例的第 3 版，但我没有得到任何表格，只有 3 个堆叠的文本彼此相邻。它是错误的版本还是我看不到错误？我做错了什么？

@{
    ViewBag.Title = "About";
}

<link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>

<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>

<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>

我的_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

【问题讨论】：

我尝试添加不同的版本等等，但似乎没有任何效果
您是否在布局页面中包含了 jQuery 和 Bootstrap Javascript 库？此外，请检查浏览器的开发者控制台是否有错误。
我在编辑中添加了布局，但看不到我缺少什么？

标签： asp.net bootstrap-4 bootstrap-modal

【解决方案1】：

您的脚本标签需要在Scripts 部分内。否则，您将尝试在它们所依赖的库之前加载它们。

@{
    ViewBag.Title = "About";
}

<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>

@section Scripts {
    <link href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
    <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'
            },
            ...
        ]
        $table.bootstrapTable({ data: data })
    })
    </script>
}

如果您在浏览器中使用当前页面检查开发人员控制台，您会看到错误提示您尚未加载 jQuery。

【讨论】：

谢谢你，我也让它与其他一些例子一起工作，谢谢