jquery 数据表和 css 未在 mvc 4 中呈现

Question

我有一个简单的视图页面，试图为我在 MVC4 中的视图呈现 jquery 数据。

我的观点[Admin.cshtml]

<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>Practice Name</th>
                <th>Practice Address</th>
                <th>Practice Email</th>
                <th>Practice Telephone</th>
                <th>Created Date</th>
            </tr>
        </thead>
    </table>
</div>

以及我对 css 和 jquery 数据表的 js 的引用位于该部分下方：

 <link type="text/css" href="//cdn.datatables.net/1.10.9/css/jQuery.dataTables.min.css" rel="stylesheet"/> 
@section Scripts{
 <script type="text/javascript" src="//cdn.datatables.net/1.10.9/js/jQuery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').dataTable({
                "ajax": {
                    "url": "/Home/Admin",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "Practice_Name", "autowidth": true },
                    { "data": "Practice_Address", "autowidth": true },
                    { "data": "Practice_Email", "autowidth": true },
                    { "data": "Practice_Telephone", "autowidth": true },
                    { "data": "Created_Date", "autowidth": true }
                ]
            });
        });
    </script>
 }

在我的控制器中，我有一个简单的 GET 部分：

       public ActionResult Admin()
        {
            var data = db.Practices.ToList();
            return Json(new { data = data }, JsonRequestBehavior.AllowGet);
        }

但是，当我运行这个应用程序时，我得到的结果集是这样的

我哪里错了？

Answer 1

更改您的控制器方法名称：

public ActionResult Admin() 至 public ActionResult GetAdminData()

创建另一个操作方法：

[Authorize] public ActionResult Admin () => View();

修改您的JavaScript代码：

"url": "/Home/Admin" 到 "url": "/Home/GetAdminData"

并更新 CDN 链接，因为它们太旧了：

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

为什么需要所有这些？

当您导航到 /Home/Admin 时，您的 return 视图（Admin.cshtml）
您的视图包含一些自定义 JavaScript 逻辑，它将尝试从数据库中获取项目列表（您的 GetAdminData 方法）
GetAdminData returns JSON DataTables 可以使用它来在页面上显示您想要的内容。

jquery 数据表和 css 未在 mvc 4 中呈现

jquery Datatables and css not rendering in mvc 4

javascript

jquery

datatables

asp.net-mvc-4