ASP.Net Core Razor Ajax Request JSON value null

Question

I am using .Net Core razor for my application.

When I call the controller action from my Ajax, the value I pass comes null to the controller.

Here is my script:

var table = $('#dataTable').DataTable();
var data = table.$('input[type="checkbox"]').serializeArray();
console.log(data);

var data_json = JSON.stringify({ 'data_json': data });
console.log(data_json);

        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            type: "GET",
            url: '@Url.Action("UpdateChart","Home")',
            data: data_json,
            cache: false,
            success: function (result) {
                myFunction(result);
                chart.render();
                console.log(result);
            }
        });
    }

I simply get the values of selected checkboxes and convert them into JSON.

My Controller is:

[HttpGet]
        public JsonResult UpdateChart(List<CheckBoxArray> data_json)
        {
            ChartRepository repository = new ChartRepository();
            string deviceSerialNo = HttpContext.Session.GetString("currentSerialNumber") != null ? HttpContext.Session.GetString("currentSerialNumber").ToString() : "1606008363";
            string query = repository.PrepSelectQuery("1", deviceSerialNo, "2021-03-04 10:04:55.544398", "2021-03-05 10:46:55.544398");
            GeneralObjects.ServiceResponse response = repository.GetChartData(query);

            TempData["AllData"] = response.This_Object;
            return Json(new { myData = response.This_Object.ToString() });
        }

public class CheckBoxArray
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }

Here the List data_json comes empty. However, the data is like:

{"data_json":[{"name":"chkBox","value":"1"},{"name":"chkBox","value":"4"},{"name":"chkBox","value":"7"}]}

What's the problem here I have that can't get the value?

Fei Han · Accepted Answer · 2021-03-24 02:18:44Z

When I call the controller action from my Ajax, the value I pass comes null to the controller.

Based on your code, we can find that you'd like to pass a list of CheckBoxArray object from ajax client side to controller, and you set request method to GET, which would pass the data through query string.

To achieve the requirement and make the data can be bound to action parameter List<CheckBoxArray> data_json as expected, you can try to modify the client side code to dynamically generate query string based on your json arrary data, like below.

var qparam = "";

for (var i = 0; i < data.length; i++) {
    qparam += "data_json[" + i + "].name=" + data[i].name + "&data_json[" + i + "].value=" + data[i].value + "&";
}

$.ajax({
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    type: "GET",
    url: '@Url.Action("UpdateChart","Home")?' + qparam.substring(0, qparam.length - 1),
    cache: false,
    success: function (result) {
        myFunction(result);
        chart.render();
        console.log(result);
    }
});

For detailed information about model binding and how it works, please check this doc: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-5.0#collections

Test Result

Thanks a lot. Your suggestion worked like a charm. One more question please, I may need to pass more different parameters to the controller, is it better for me to use a POST method and parse the parameters by HttpContext.Request.Form[key] ?
If you'd like to pass more and large data to your controller, yes, you can make HTTP Post request with your data to your endpoint.

Collectives™ on Stack Overflow

ASP.Net Core Razor Ajax Request JSON value null

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related