Блог

При загрузке моей страницы я получаю следующую ошибку (в окне предупреждения) Предупреждение о таблицах данных: идентификатор таблицы = запись-сетка — ошибка Ajax. Для получения дополнительной информации об этой ошибке, пожалуйста, смотрите http://datatables.net/tn/7

Что не так. Я запустил веб-приложение в режиме отладки, и мой C # работает нормально, записи берутся из базы данных, но что-то идет не так с Angular js, когда я отлаживаю в браузере весь код после var app = angular.module('MyApp', ['datatables']); просто игнорируется. Это ошибка в консоли POST http://localhost:10575/teachers/getdata 500 (Internal Server Error)

Вот мои контроллеры MVC

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

    public ActionResult getData()
    {
        //Datatable parameter
        var draw = Request.Form.GetValues("draw").FirstOrDefault();
        //paging parameter
        var start = Request.Form.GetValues("start").FirstOrDefault();
        var length = Request.Form.GetValues("length").FirstOrDefault();
        //sorting parameter
        var sortColumn = Request.Form.GetValues("columns["   Request.Form.GetValues("order[0][column]").FirstOrDefault()   "][name]").FirstOrDefault();
        var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault();
        //filter parameter
        var searchValue = Request.Form.GetValues("search[value]").FirstOrDefault();
        List<tblTeacher> allCustomer = db.tblTeachers.ToList();
        int pageSize = length != null ? Convert.ToInt32(length) : 0;
        int skip = start != null ? Convert.ToInt32(start) : 0;
        int recordsTotal = 0;
        //Database query
        using (RSEntities dc = new RSEntities())
        {
            var v = (from a in dc.tblTeachers select a);
            //search
            if (!string.IsNullOrEmpty(searchValue))
            {
                v = v.Where(a =>
                    a.FirstName.Contains(searchValue) ||
                    a.SecondName.Contains(searchValue) ||
                    a.Title.Contains(searchValue) ||
                    a.TDepartment.Contains(searchValue)
                    );
            }

            //sort
            if (!(string.IsNullOrEmpty(sortColumn) amp;amp; string.IsNullOrEmpty(sortColumnDir)))
            {
                //for make sort simpler we will add Syste.Linq.Dynamic reference
                v = v.OrderBy(sortColumn   " "   sortColumnDir);
            }

            recordsTotal = v.Count();
            allCustomer = v.Skip(skip).Take(pageSize).ToList();
        }

        return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = allCustomer });
    }
  

Теперь Angular Js

 /// <reference path="angular.js" />
/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />
/// <reference path="angular-route.js" />

var app = angular.module('MyApp', ['datatables']);
app.controller('homeCtrl', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
        $scope.dtColumns = [
            //here We will add .withOption('name','column_name') for send column name to the server 
            DTColumnBuilder.newColumn("FirstName", "Име").withOption('name', 'FirstName'),
            DTColumnBuilder.newColumn("SecondName", "Фамилия").withOption('name', 'SecondName'),
            DTColumnBuilder.newColumn("Title", "Титла").withOption('name', 'Title'),
            DTColumnBuilder.newColumn("TDepartment", "Факултет").withOption('name', 'TDepartment'),
        ]

        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
            dataSrc: "data",
            url: "/teachers/getdata",
            type: "POST"
        })
        .withOption('зареждане', true) //for show progress bar
        .withOption('serverSide', true) // for server side processing
        .withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers
        .withDisplayLength(10) // Page size
        .withOption('aaSorting', [0, 'asc']) // for default sorting column // here 0 means first column
    }])
  

Наконец, представление

 @{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.5/angular-datatables.js"></script>


<script src="~/Scripts/myApp.js"></script>

<div ng-app="MyApp" class="container">
    <div ng-controller="homeCtrl">
        <table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"></table>
    </div>
</div>