asp.net-mvc - 未使用 Asp.net MVC 加载数据表

问题描述

我正在为我的学习创建一个简单的 crud 系统。我是 Asp.net MVC 的初学者。我正在尝试从数据库中加载数据，但我可以完成任务。到目前为止我尝试过的内容附在下面。我创建了名称为技能的数据库，并且有一个表课程试图加载它 dataTable.while 运行程序时出现错误错误

Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.<anonymous> (Index:81)
    at e (jquery-3.4.1.min.js:2)
    at t (jquery-3.4.1.min.js:2)

控制器页面

public ActionResult Index()
{
    return View();
}

public ActionResult GetSkill()
{
    using (skillEntities sk = new skillEntities())
    {
        var course = sk.courses.OrderBy(a => a.id).ToList();
        return Json(new { data = course }, JsonRequestBehavior.AllowGet);
    }
}

查看页面

 @{
        ViewBag.Title = "Home Page";
    }
    <html>
    <head>

        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    </head>
    <body>
        <div style="width:90%; margin:0 auto" class="tablecontainer">
            <a class="popup btn btn-primary" href="/home/save/0" style="margin-bottom:20px; margin-top:20px;">Add New Employee</a>
            <table id="myDatatable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Course Name</th>
                        <th>Fee</th>


                    </tr>
                </thead>
            </table>
        </div>
        <script src="~/Scripts/jquery-3.4.1.js"></script>
        <script src="~/Scripts/jquery-3.4.1.min.js"></script>
        <script src="~/Scripts/jquery.validate.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>

        <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {

                var oTable = $('#myDatatable').DataTable({
                    "ajax": {
                        "url": '/home/GetSkill',
                        "type" : "get",
                        "datatype": "json"                   
                    },              
                    "columns": [
                        { "data": "id", "autoWidth": true },
                        { "data" : "coursename", "autoWidth" : true},
                        { "data": "fee", "autoWidth": true }              

                    ]
                })
            })

        </script>
    </body>
    </html>

标签： asp.net-mvc

asp.net-mvc - 未使用 Asp.net MVC 加载数据表

问题描述

解决方案

推荐阅读