Json array is null when received in controller

Question

function viewReports(firstDate, lastDate) {
    var selected = $('#ReportSelected').find(":selected");
    var controller = "PortalReports";
    var method = "GetReport";

    var urlAjax = $("#basePath").val() + controller + "/" + method;
    var companydropdown = $('#ReportSelected :selected').data("companydropdown");
    var agencydropdown = $('#ReportSelected :selected').data("agencydropdown");
    var userdropdown = $('#ReportSelected :selected').data("userdropdown");

    var data = 
        {
            reportSelected: selected.text(),
            firstDate: firstDate,
            lastDate: lastDate,
            companydropdown: companydropdown,
            agencydropdown: agencydropdown,
            userdropdown: userdropdown
        };
    /*var data =
        [{
            "reportSelected": selected.text(),
            "firstDate": firstDate,
            "lastDate": lastDate,
            "companydropdown": companydropdown,
            "agencydropdown": agencydropdown,
            "userdropdown": userdropdown
        }];*/

    var answer = JSON.stringify({ data });

    $.ajax({
        traditional: true,
        data: JSON.stringify({ data }),
        url: urlAjax,

        success: function (response) {
            loadReport(response);
        },
        error: function (ob, errStr) {
            alert("An error occured. Please try again.");
        }
    });

//Mvc
     public JsonResult GetReport(JArray data)
            {
           var persons = data.Select(x => x.ToObject<InputJson>());

JArray data is always null irrespective of how many ways I add square brackets of remove quotation marks etc, what am I doing wrong!!! Prefer simple Object returned in array for readability as I might need to add to it.

Show you model for `JArray` (note you sending an object, not an array). If it contains properties `reportSelected`, `firstDate` etc, then it will be correctly bound if you use `data: data` (no `JSON.stringify()`) — , Jun 17 '16 at 23:04

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Since you are sending a complex data structure(array), you should specify the contentType property when making ajax call. Specify the value of contentType property as "application/json"

//Values hard coded, you may replace with real values from your form.

var dataArray =    [{
                     reportSelected:'201501',
                     firstDate: '11/12/2010',
                     lastDate: '12/12/2010',
                     companydropdown: 4,
                     agencydropdown: 6,
                     userdropdown: 16,
                   }];

var urlAjax = "/Home/GetReport"; // Hard coded for demo. Read further..
$.ajax({
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify(dataArray),
    url: urlAjax,

    success: function (response) {
        console.log(response);
    },
    error: function (ob, errStr) {
        alert("An error occured. Please try again.");
    }
});

I suggest you create a view model /DTO to represent the data you are sending and use that in your action method.

public class ReportRequest
{
    public string reportSelected { get; set; }
    public DateTime firstDate { get; set; }
    public int companydropdown { get; set; }
}

[HttpPost]
public JsonResult GetReport(IEnumerable<ReportRequest> data)
{
   //do something with data 
   // to do : Return something
}

In the example, I hardcoded the value of urlAjax variable. You may consider using the html helper methods to generate the correct relative url path to the action method(s) as explained in this post.

Json array is null when received in controller

1 Answers1