Bootstrap asp.net 框架初学者

Question

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

我正在尝试使用来自 Bootstrap 主页的一个非常简单的示例我只是将其放入 about.cshtml 文件中。

Bootstrap 是 ASP.Net 上的版本 3.4.1，我选择了 Bootstrap 示例的第三个版本，但我没有得到任何 table 并且只有 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': '[=12=]'
            },
            {
                'id': 1,
                'name': 'Item 1',
                'price': ''
            },
            {
                'id': 2,
                'name': 'Item 2',
                'price': ''
            },
            {
                'id': 3,
                'name': 'Item 3',
                'price': ''
            },
            {
                'id': 4,
                'name': 'Item 4',
                'price': ''
            },
            {
                'id': 5,
                'name': 'Item 5',
                'price': ''
            }
        ]
        $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>

Answer 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': '[=10=]'
            },
            ...
        ]
        $table.bootstrapTable({ data: data })
    })
    </script>
}

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

Bootstrap asp.net 框架初学者

Bootstrap asp.net framework begginer

asp.net

bootstrap-4

bootstrap-modal