jquery Datatables и CSS не рендеринга в MVC 4

Question

У меня есть страница простого вида, пытающаяся сделать jquery доступным для просмотра в MVC4.

Мой взгляд [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 и js для jatery datatables находятся под разделом:

 <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

Зачем все это нужно?

1. При переходе в / Home / Admin ваш обратный просмотр (Admin.cshtml)
2. Ваше представление содержит некоторую пользовательскую логику JavaScript, которая будет пытаться получить список элементов из базы данных (ваш метод GetAdminData)
3. GetAdminData возвращает JSON, который может использоваться DataTables для отображения желаемого контента на странице.