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

Question

我有一个简单的 View 页面，尝试在 MVC4 中为我的 View 呈现 jquery datable。

我的观点[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>

我对 jquery 数据表的 css 和 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>
 }

在我的 Controller 中，我有一个简单的 GET 部分:

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

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

我哪里出错了？

Answer 1

更改 Controller 方法名称:

public ActionResult Admin() 到 public ActionResult GetAdminData()

创建另一个操作方法:

[授权]
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

为什么需要这一切？

1. 当您导航到/Home/Admin 时，您返回的 View (Admin.cshtml)
2. 您的 View 包含一些自定义 JavaScript 逻辑，它将尝试从数据库中获取项目列表(您的 GetAdminData 方法)
3. GetAdminData 返回 JSON，DataTables 可以使用该 JSON 来在页面上显示您想要的内容。