Ajax call to JsonResult containing IList resulting in 400 Bad Request error.

mstiver2019

I've created a JsonResult method which pulls an IList (I'm using asp.net core razor pages):

public JsonResult OnPostloadListJson()
        {
            vwOpenRequests = _context.vwOpenRequests.ToList();
            return new JsonResult(vwOpenRequests);
        }

And attempt to call it using ajax in my DataTable:

$(document).ready(function () {
        $('#mytable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "?handler=loadListJson",
                type: "POST"
            },
            columns: [
                { "data": "Id" },
                { "data": "RequestTo" },
                { "data": "Group" },
                { "data": "RequestDt" },
                { "data": "DueDt" },
                { "data": "Desc" },
                { "data": "Reason" },
                { "data": "LastUpdateDt" },
                { "data": "RequestType" }
            ]
    });
});

This results in a 400 Bad Request error. My table includes <thead> and <tr> elements with <td> headers, amounting in the same number of columns I'm attempting to pull. I've added a breakpoint to my JsonResult method and it isn't hitting it before throwing the error, even though my handler and url are properly named. What am I missing here?

(Note: My debug trace isn't working for some reason: https://debug.datatables.net/ageluq)

mstiver2019

Update... Changed my code a bit based on some Google results, now it's an invalid JSON response error! I'm attempting to diagnosis my AJAX response in Chrome, but it freezes up when trying to load I'll comment another update if I get ahold of it.

public JsonResult OnPostloadListJson()
        {
            var items = _context.vwOpenRequests.ToList();

            IList<vwOpenRequest> resultList = new List<vwOpenRequest>();

            for (int i = 0; i < items.Count(); i++)
            {
                resultList.Add(items[i]);
            }
            return new JsonResult(resultList);
        }

$(document).ready(function () {
        $('#PartsManagerTbl').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "?handler=loadListJson",
                type: "POST",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("RequestVerificationToken",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            },
            columns: [
                { "data": "Id" }, { "data": "RequestTo" }, { "data": "Group" }, { "data": "RequestDt" }, { "data": "DueDt" }, { "data": "Desc" }, { "data": "Reason" }, { "data": "LastUpdateDt" }, { "data": "RequestType" }
            ]
    });
});

mstiver2019

It's returning my full HTML page as the response instead of my json for some reason... I've defined my content and datatypes, and still the same problem. It doesn't seem datatables related, so I'll just post this question elsewhere.

$('#PartsManagerTbl').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "?handler=loadListJson",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("RequestVerificationToken",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            },
            columns: [
                { data: "Part" },
                { data: "SupplierNo" },
                { data: "SupplierNm" },
                { data: "RequestTo" },
                { data: "SubGroup" },
                { data: "RequestDt" },
                { data: "DueDt" },
                { data: "Desc" },
                { data: "Reason" },
                { data: "LastUpdateDt" },
                { data: "RequestType" },
                { data: "Sort" }
            ]
     });
 });