How to get data from ajax call to MVC controller?

Question

I have a method in an MVC controller that queries a database, and returns a JSON object. It requires an ajax call to give it a date to query the database, however, in my current setup I'm getting null passed to the controller.

Here is my ajax request:

$(document).ready(function () {
        setInterval(function () {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetChartData", "Plot")',
                dataType: 'json',
                data: '04-15-2019 15:49:00',
                success: function (result) {
                    console.log(JSON.parse(result)
                }
            });
        }, 10000)

Here is my controller:

 [HttpPost]
 public JsonResult GetChartData(string timeStamp)
 {
        string output = queryDatabase(timeStamp);
        string test = new JavaScriptSerializer().Serialize(output);
        return Json(output, JsonRequestBehavior.AllowGet);
 }

Now, when I put a breakpoint after the queryDatabase call, the timeStamp variable is null , what am I doing wrong?

Thanks!

Answer 1

Add [FromBody] -attribute to force controller to read a simple type from the request body:

 using System.Web.Http;
 [HttpPost]
 public JsonResult GetChartData([FromBody]string timeStamp)
 {
        string output = queryDatabase(timeStamp);
        string test = new JavaScriptSerializer().Serialize(output);
        return Json(output, JsonRequestBehavior.AllowGet);
 }

Answer 2

Try something like this

$(document).ready(function () {
    setInterval(function () {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetChartData", "Plot")',
            dataType: 'json',
            data: {timeStamp: '04-15-2019 15:49:00'},
            success: function (result) {
                console.log(JSON.parse(result)
            }
        });
    }, 10000)
});

And in the controller:

[HttpPost]
public JsonResult GetChartData()
{
    var timeStamp = Request["timeStamp"];
    var output = queryDatabase(timeStamp);
    var test = new JavaScriptSerializer().Serialize(output);
    return Json(output, JsonRequestBehavior.AllowGet);
}

Answer 3

When you use Post type and dataType JSON on your Ajax call u need to pass data in this format {title:data} in ur case it will be

$(document).ready(function () {
    setInterval(function () {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetChartData", "Plot")',
            dataType: 'json',
            data: {timeStamp: '04-15-2019 15:49:00'},
            success: function (result) {
                console.log(JSON.parse(result)
            }
        });
    }, 10000)

In your controller it will automatically catch data in argument. Provided just double check ur URL in Ajax call