My json object becomes null when it reaches my controller function

Question

I know this question has been asked many times, but this is different.

I have kendo grdi which i get selected and not selected type, the user have free role to make changes and that works. I did tried exmples like this Example1 ,Example2 and many others.

Now the problem is my json object that am trying to pass to the controller became null, I this is what i have tried below.

Can you please correct me if there's something wrong am doing ?

Javascript

JsonObj : This is what i get when i deselect from grid checkbox

[ { mailID: '10' , roleID: '5' , isMailSelected: 'false' } , { 
 mailID: '11' , roleID: '5' , isMailSelected: 'false' } , { 
 mailID: '19' , roleID: '9' , isMailSelected: 'false' } ]
function goToControllerSave() {
 var jsonObj = displayFilterResults();
 $.ajax({
 url: '@Url.Action("Save", "Account")',
 type: "POST",
 dataType: "json",
 traditional: true,
 data: { myobj: jsonObj }, 
 success: function (data) {
 },
 error: function (data) {
 }
 })
}
$(function () {
 $('#Grid1').on('click', '.chkbx', function () {
 var checked = $(this).is(':checked');
 var grid = $('#Grid1').data().kendoGrid;
 var dataItem = grid.dataItem($(this).closest('tr'));
 dataItem.set('isSelected', checked);
 })
})
//My json obj: this returns results on Alert
function displayFilterResults() {
 var items = "[";
 var dataSource = $("#Grid1").data("kendoGrid").dataSource; 
 var filters = dataSource.filter();
 var allData = dataSource.data();
 var query = new kendo.data.Query(allData);
 var filteredData = query.filter(filters).data;
 items = items + " { mailID: '" + item.mailID + "' , roleID: '" + 
 item.roleID + "' , isSelected: '" + item.isSelected + "' } ,";
 }); 
 if (items.charAt(items.length - 1) == ',') {
 items = items.substr(0, items.length - 1);
 }
 items = items + "]";
 alert(items)
 return items;
}

My conntroller

 public class myItems
 {
 public string mailID { set; get; }
 public string roleID { set; get; }
 public string isSelected { set; get; }
 }
 [HttpPost]
 public ActionResult Save(List<myItems> myobj)
 {
 --------------
 --------------
 }

• NtFreX: You controler method expects an array. Maybe it helps when you change data: { myobj: jsonObj } to data: jsonObj,.
• IT Forward: @NtFreX I have already tried that and it still pass null
• Chetan: What you are passing to the controller from JavaScript is string. You should create object array first and then use JSON.stringify to convert json string to be sent to controller.
• IT Forward: Can you please show me how ?
• Olivier Boissé: I think you just need to replace data: { myobj: jsonObj }, by data: displayFilterResults(),. as displayFilterResults returns a stringified json object

Answer 1

In the examples you mention, json object is an actual object, not the string representation. Then JSON.stringify() is used to get string formatted using double quotation marks, removing spare spaces, etc. Unfortunately MVC application has trouble parsing json that doesn't look like this.

Since you create a string directly, you need to produce similar json format.

var json = '{"myobj":[';
json +='{mailID:"10",roleID:"5",isMailSelected:"false"},';
json+='{mailID:"11",roleID:"5",isMailSelected:"false"},';
json +='{mailID:"19",roleID:"9",isMailSelected:"false"}'
json +=']}';
$.ajax({
 url: '@Url.Action("Save", "Account")',
 type: "POST",
 contentType: "application/json",
 dataType: 'html',
 data: json,
 success: function (data) {
 },
 error: function (data) {
 }
})

In the class I have updated the name of member isSelected, cause I saw it didn't match json and I assume you changed it to isMailSelected.

public class myItems
{
 public string mailID { set; get; }
 public string roleID { set; get; }
 public string isMailSelected { set; get; }
}

In my controller I have the same you posted

[HttpPost]
public ActionResult Save(List<myItems> myobj)
{
 return View();
}

• IT Forward: this looks like will work after getting the correct format, it must be like the one. which means names are in qouts. how can i get that ? { "items": [ { "mailID ": + item.mailID +, "roleID": + item.roleID +, "isMailSelected ": item.isSelected }, { "mailID": + item.mailID +, "roleID": + item.roleID +, "isMailSelected ": item.isSelected } ] }
• Daniel Manta: I believe code would be better if you simply create a json object and push items into the array rather than concatenating strings.
• IT Forward: I don't understand what you trying to say
• Daniel Manta: In my code it also works if I do var json = { myobj: [] }; json.myobj.push({ mailID: '[email protected]', roleID: 'President' }); Then in Ajax call: data: JSON.stringify(json) You can populate the array by pushing items into json.myobj. Then stringify will format.
• Daniel Manta: Then just amend displayFilterResults() for producing formatted json