asp.net-mvc - 引导程序未按预期工作

问题描述

我正在使用 Bootstrap 和 jQuery Datatables 来设计前端，但是我的代码在浏览器中出现了一些混乱，我认为问题在于包含 bootstrap 或 jquery 或者版本可能是：-

我正在使用 ASP.NET MVC 5 空模板，我正在使用的文件是：-

索引.cshtml

@{
    ViewBag.Title = "Employee List";
}

<h2>Employee CRUD Operation</h2>

<table id="employeeTable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
     </thead>
</table>

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />

@section scripts{

    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {

            $("#employeeTable").DataTable({
                "ajax": {
                    "url": "/Employee/GetData",
                    "type": "GET",
                    "datatype":"json"
                },
                "columns": [
                    { "data": "Name" },
                    { "data": "Position" },
                    { "data": "Office" },
                    { "data": "Age" },
                    { "data": "Salary" }
                ]

            });
        });
    </script>

    }

bootstrap 和 jquery 包含在 _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>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>
<body>


    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>ASP.NET MVC Operations</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-3.0.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @RenderSection("scripts",required:false)
</body>
</html>

标签： asp.net-mvctwitter-bootstrap

asp.net-mvc - 引导程序未按预期工作

问题描述

解决方案

推荐阅读