Null data posted on sending JSON string generated from dynamic table

Question

I am generating a table dynamically in my ASP.NET MVC 4 application. The table is having input boxes in the columns. I have to save the data from these Input boxes. The table generated is

On click of the save button above, I am reading data from table in jquery as

    var estimDetails = $('#editorRows tr:has(td)').map(function (i, v) {
                         var $td = $('td', this);
                         return {
                             ItemId: $($td[0]).find("select").val(),
                             Description: $($td[1]).find("input").val(),
                             Quantity: $($td[2]).find("input").val(),
                             Amount: $($td[3]).find("input").val()
                         }
                     }).get();
    //Convert data to JSON
    var estimateObject = JSON.stringify({ 'JsonString': estimDetails });
//post data to Controller Action
 $.ajax({
                 type: 'POST',
                 url: '@Url.Action("SaveEstimate")',
                 data: estimateObject,
                dataType: 'json',
                 contentType: 'application/json; charset=utf-8',
                 success: function (data) {
                     if (data)
                         alert("Saved Successfully");
                 },
                 error: function (response) {
                     debugger;
                     alert(response);
                 }
             });

On inspecting 'estimateObject' has the value as

My action method is

  [HttpPost]
        public JsonResult SaveEstimate(string JsonString)
        {
            try
            {
                DateTime expDate;
                DateTime expiryDt = new DateTime();


                return Json("true", JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {

                return Json("false", JsonRequestBehavior.AllowGet);
            }
        }

But the 'JsonString' is always null. I tried different things like keeping the string inside a ViewModel in the controller but no help. Kindly help me.

Answer 1

Either try to do this

 [HttpPost]
        public JsonResult SaveEstimate(string id) 
        {
            try
            {
                DateTime expDate;
                DateTime expiryDt = new DateTime();


                return Json("true", JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {

                return Json("false", JsonRequestBehavior.AllowGet);
            }
        }

or in AJAX call

$.ajax({
                 type: 'POST',
                 url: '@Url.Action("SaveEstimate")',
                 data: "JsonString=" + estimateObject,
                 dataType: 'json',                    
                 success: function (data) {
                     if (data)
                         alert("Saved Successfully");
                 },
                 error: function (response) {
                     debugger;
                     alert(response);
                 }
             });

Answer 2

When you send $().ajax your controller action parse by name input HTTP parameters into C# method parameters. To send data in $().ajax used data option

 $.ajax({
                 type: 'POST',
                 url: '@Url.Action("SaveEstimate")',
                 data: {someData:'sss'}   //Look here
             });

When ajax sended, javaScript object, that you put to data, parsed by member to HTTp parameters (every field of Object put to parameter name to name, value to value).

So in my example there is someData HTTP parameter with value 'sss'. In Action MVC try find HTTP parameters called like C# method parameters and automaticaly set values of theirs.

In your code MVC expect parameter JsonString of type String, but $().ajax send a string (after stringify an json) in data, so jQuery create a HTTP parameter data and put a string value to it.

To make your code work you must do the folowing:

Stringify only payload data

var estimateObject = { 'JsonString': JSON.stringify(estimDetails) };

Send in ajax your result object simply

$.ajax({
             type: 'POST',
             url: '@Url.Action("SaveEstimate")',
             data: estimateObject,
             success: function (data) {
                 if (data)
                     alert("Saved Successfully");
             },
             error: function (response) {
                 debugger;
                 alert(response);
             }
         });

Thus, jQuery lookup to estimateObject, find in it only one field JsonObject, create same HTTP parameter and send to server. MVC lookup in HTTP parameters for parameter JsonObject, find it and set value of C# method parameter with name JsonObject value with stringify JSON.

Answer 3

I suggest that use from this code

 public  Class Estimate{
    public int ItemId{get;set;}
    public string Description{get;set;}
    public int Quantity{get;set;}
    public int Amount{get;set;}

    }

And in Controller

 [HttpPost]
    public JsonResult SaveEstimate(Estimate model) 
    {
      //To Do
    }

And in Client Code

      var estimDetails = $('#editorRows tr:has(td)').map(function (i, v) {
                         var $td = $('td', this);
                         return {
                             ItemId: $($td[0]).find("select").val(),
                             Description: $($td[1]).find("input").val(),
                             Quantity: $($td[2]).find("input").val(),
                             Amount: $($td[3]).find("input").val()
                         }
                     }).get();
    //Convert data to JSON
    var estimateObject = JSON.stringify({ 'model': estimDetails });
//post data to Controller Action
 $.ajax({
                 type: 'POST',
                 url: '@Url.Action("SaveEstimate")',
                 data: estimateObject,
                dataType: 'json',
                 contentType: 'application/json; charset=utf-8',
                 success: function (data) {
                     if (data)
                         alert("Saved Successfully");
                 },
                 error: function (response) {
                     debugger;
                     alert(response);
                 }
             });