Bootstrap asp.net framework begginer-CodePudding

I'm a little new to both Bootstrap and ASP.Net.

I'm trying to use an very simple example from Bootstrap homesite where I just throw this into about.cshtml file.

The Bootstrap is version 3.4.1 on the ASP.Net and I'm choosing the 3rd version of the Bootstrap example but I'm not getting any table and just 3 stacked text besides each other. Is it the wrong version or am I not able to see the mistake? What am I doing wrong?

@{
    ViewBag.Title = "About";
}

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/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>

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

CodePudding user response：

Your script tags need to be inside the Scripts section. Otherwise, you're trying to load them before the libraries they depend on.

@{
    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/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://unpkg.com/[email protected]/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>
}

If you check the developer console in your browser with your current page, you'll see errors telling you that jQuery has not been loaded.