0

I'm using jQuery DataTables for tabular data in asp.net mvc 5. I have the following problem, when I enter to the URL where is supposed to appear the datatable, the table gives me an error, so pick the URL request which datatable uses to request the data and enter manually.

Asp.net mvc 5 error

But if I do this request using postman, the request works as expected.

This is a snipped of my controller:

 public ActionResult List(PagedListRequestViewModel pagedListRequestViewModel)
    {
        var pagedListRequest = Mapper.Map<PagedListRequest>(pagedListRequestViewModel);

        PagedListResult<VacancyDTO> pagedListResult =
            _vacancyService.GetAllVacancies(pagedListRequest);

        var pagedResultViewModel = new PagedListViewModel<VacancyViewModel>
        {
            draw = pagedListRequestViewModel.draw,
            recordsFiltered = pagedListResult.Count,
            recordsTotal = pagedListResult.Count,
            data = Mapper.Map<IEnumerable<VacancyViewModel>>(pagedListResult.Entities)
        };

        return Json(pagedResultViewModel, JsonRequestBehavior.AllowGet);
    }

This a snipped of my ViewModel

public class VacancyViewModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    public int QuantityOfPositions { get; set; }
    public string RequestedDate { get; set; }
    public string ClosedDate { get; set; }
    public int OpenPosition { get; set; }
    public int ClosedPosition { get; set; }
    public decimal Salary { get; set; }
    public decimal AmountOfBenefits { get; set; }
    [Display(Name = "Compesacion")]
    public decimal CompesationTotal { get; set; }

    public int TimeToRespond { get; set; }

    public int DepartmentId { get; set; }
    public string DepartmentName { get; set;}
    public string VacancyType { get; set; }

}

A snipped of my js:

<script>
        var vacancyListUrl = "/vacancy/list";
        $("#vacancydt").DataTable(
        {
            processing: true,
            serverSide: true,
            ajax: vacancyListUrl,
            ordering: false,
            columns: [
            {
                "data": "DepartmentName",
                render: function (data, type, row, meta) {
                    return "<a href=/department/detail/" + row.DepartmentId + ">" + data + "</a>";
                }
            },
            {
                "data": "Title",
                render: function (data, type, row, meta) {
                    return "<a href=/vacancy/detail/" + row.Id + " >" + data + "</a>";
                }
            },
            {
                "data": "QuantityOfPositions"
            },
            { "data": "RequestedDate" },
            { "data": "OpenPosition" },
            { "data": "ClosedPosition" },
            { "data": "ClosedDate" },
            { "data": "TimeToRespond" },
            { "data": "VacancyType" }
            ]
        }
        );
</script>

Response returned by postman:

{
  "draw": 1,
  "recordsTotal": 3,
  "recordsFiltered": 3,
  "data": [
    {
      "Id": 4,
      "Title": "Analista de Sistema",
      "QuantityOfPositions": 5,
      "RequestedDate": "09/10/2015",
      "ClosedDate": "16/10/2015",
      "OpenPosition": 0,
      "ClosedPosition": 0,
      "Salary": 20000,
      "AmountOfBenefits": 0,
      "CompesationTotal": 0,
      "TimeToRespond": 7,
      "DepartmentId": 1,
      "DepartmentName": "Tecnologia",
      "VacancyType": "Nuevo puesto"
    },
    {
      "Id": 5,
      "Title": "Personal de limpieza",
      "QuantityOfPositions": 5,
      "RequestedDate": "14/10/2015",
      "ClosedDate": "19/10/2015",
      "OpenPosition": 0,
      "ClosedPosition": 0,
      "Salary": 10000,
      "AmountOfBenefits": 0,
      "CompesationTotal": 0,
      "TimeToRespond": 5,
      "DepartmentId": 5,
      "DepartmentName": "Operaciones",
      "VacancyType": "Nuevo puesto"
    },
    {
      "Id": 6,
      "Title": "Hola Mundo",
      "QuantityOfPositions": 5,
      "RequestedDate": "12/10/2015",
      "ClosedDate": "N/A",
      "OpenPosition": 5,
      "ClosedPosition": 0,
      "Salary": 10000,
      "AmountOfBenefits": 0,
      "CompesationTotal": 0,
      "TimeToRespond": 0,
      "DepartmentId": 1,
      "DepartmentName": "Tecnologia",
      "VacancyType": "Reemplazo"
    }
  ]
}

Request made by jquery datatable:

http://localhost:9765/vacancy/list?draw=1&columns[0][data]=DepartmentName&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=false&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=Title&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=false&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=QuantityOfPositions&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=false&columns[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=RequestedDate&columns[3][name]=&columns[3][searchable]=true&columns[3][orderable]=false&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=OpenPosition&columns[4][name]=&columns[4][searchable]=true&columns[4][orderable]=false&columns[4][search][value]=&columns[4][search][regex]=false&columns[5][data]=ClosedPosition&columns[5][name]=&columns[5][searchable]=true&columns[5][orderable]=false&columns[5][search][value]=&columns[5][search][regex]=false&columns[6][data]=ClosedDate&columns[6][name]=&columns[6][searchable]=true&columns[6][orderable]=false&columns[6][search][value]=&columns[6][search][regex]=false&columns[7][data]=TimeToRespond&columns[7][name]=&columns[7][searchable]=true&columns[7][orderable]=false&columns[7][search][value]=&columns[7][search][regex]=false&columns[8][data]=VacancyType&columns[8][name]=&columns[8][searchable]=true&columns[8][orderable]=false&columns[8][search][value]=&columns[8][search][regex]=false&start=0&length=10&search[value]=&search[regex]=false&_=1444758438997
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
Alcruz
  • 537
  • 5
  • 12
  • it is c# related error. use debugger. you are trying to access a property of an object that is null. so the exception. and possibly this `pagedListResult` is empty – J Santosh Oct 14 '15 at 02:26
  • The controller isn't hitting by this request, I've put a breakpoint neither the action nor the controller's constructor are called. Maybe the exception is in the http pipeline. Whatever I fixed the problem calling the action with a POST request. It's worked, however I still want to know what happen with the GET request and why the same request is working with postman but not with the datatable plugin – Alcruz Oct 14 '15 at 03:32
  • OK issue is for post and get.you have use use post if you have many columns and filter:true, because datatable sends many columns to server . using get the url will go beyond the maximum length of url. so you must use post. – J Santosh Oct 14 '15 at 04:13
  • [what-is-the-maximum-length-of-a-url-in-different-browsers](http://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers) – J Santosh Oct 14 '15 at 04:14
  • It has sense, Thanks @JSantosh – Alcruz Oct 14 '15 at 04:22
  • I didn't mention the following in the post because, I've fixed the problem, but I noticed that when I commented out some columns in the JS; DataTables worked well, but when the configuration exceeded a certain number of columns, It didn't work. But Thanks again. – Alcruz Oct 14 '15 at 04:31

0 Answers0