Sending an array of json objects to action with ajax in asp.net mvc 3

asp.net-mvc, asp.net-mvc-3, c#, jquery, razor

Solution

Instead of combining your arrays into another array, you're best of sending them as individual parameters to the action method, something like:

Assume we still have your two arrays:

var features = new Array();
var menuItems = new Array();
menuItems.push({ "Name": $(this).attr('name'), "isChecked": isChecked });
features.push({ "Name": $(this).attr('name'), "isChecked": isChecked });

Then in your JQuery ajax call do the following:

$.ajax({
        url: '@Url.Action("CheckPreferences")',
        type: 'POST',
        datatype: "json",
        traditional: true,
        data: { 
            menuItems: JSON.stringify(menuItems),
            features: JSON.stringify(features)
        },
        success: function () { window.alert('@Resource.AjaxSuccess'); },
        error: function (event, request, settings) {  
            window.alert('@Resource.AjaxError' + ' : ' + settings); },
        timeout: 20000
});

Then your controller method should be:

[HttpPost]
public ActionResult CheckPreferences(string menuItems, string features)
{
    var js = new JavaScriptSerializer();
    var deserializedMenuItems = (object[])js.DeserializeObject(menuItems);
    var deserializedFeatures = (object[])js.DeserializeObject(features);
    var myFeatures = new List<SJSonModel>();
    var myMenuItems = new List<SJSonModel>();

    if (deserializedFeatures != null)
    {
        foreach (Dictionary<string, object> newFeature in deserializedFeatures)
        {
            myFeatures.Add(new SJSonModel(newFeature));
        }
    }

    if (deserializedMenuItems != null)
    {
        foreach (Dictionary<string, object> newMenuItem in deserializedMenuItems)
        {
            myMenuItems.Add(new SJSonModel(newMenuItem));
        }
    }

    var myModelList = new SJSonModelList(myFeatures, myMenuItems);

    return Json("");

I also edited your classes by putting in a constructor to work with the above code, like so:

public class SJSonModel
{
    public SJSonModel(Dictionary<string, object> newFeature)
    {
        if (newFeature.ContainsKey("Name"))
        {
            Name = (string)newFeature["Name"];
        }
        if (newFeature.ContainsKey("isChecked"))
        {
            isChecked = bool.Parse((string)newFeature["isChecked"]);
        }
    }

    public string Name { get; set; }
    public bool isChecked { get; set; }
}

public class SJSonModelList
{
    public SJSonModelList(List<SJSonModel> features, List<SJSonModel> menuItems )
    {
        Features = features;
        MenuItems = menuItems;
    }

    public List<SJSonModel> Features { get; set; }
    public List<SJSonModel> MenuItems { get; set; }
}

Problem

I hope anyone can help me (Sorry for my english). I have a problem when I want to send un array of arrays in ajax. My model is: ``` public class SJSonModel { public string Name { get; set; } public bool isChecked { get; set; } } public class SJSonModelList { public List<SJSonModel> Features { get; set; } public List<SJSonModel> MenuItems { get; set; } } ``` The controller: ``` [HttpPost] public ActionResult CheckPreferences(SJSonModelList postData) { BindUserFeatures(postData.Features); return Json(new { status = "Success", message = "Passed" }); } ``` The View simplified: ``` <div class="Feature borderRadius Items"> <h2>Title <input type="checkbox" class="Item" name="featureName"/> </h2> <div class="FeatureDetails subItems"> <a href="@Url…">featureName</a> <input type="checkbox" class="subItem" name="subItemName"/> </div> <!-- endOf FeatureDetails --> ``` The JQuery code: ``` var isChecked = false; var features = new Array(); var menuItems = new Array(); var postData = new Array(); ``` Here I fill the features, the menuItems with the featureName/menuItemName and isChecked boolean for each feature/menuItem ``` menuItems.push({ "Name": $(this).attr('name'), "isChecked": isChecked }); features.push({ "Name": $(this).attr('name'), "isChecked": isChecked }); postData.push({ "features": features, "menuItems": menuItems }); postData = JSON.stringify(postData); ``` The ajax function: ``` $(':submit').click(function () { postData.push({ "features": features, "menuItems": menuItems }); postData = JSON.stringify(postData); $.ajax({ url: '@Url.Action("CheckPreferences")', type: 'POST', data: postData, contentType: "application/json; charset=utf-8", dataType: "json", traditional: true, success: function () { window.alert('@Resource.AjaxSuccess'); }, error: function (event, request, settings) { window.alert('@Resource.AjaxError' + ' : ' + settings); }, timeout: 20000 }); //endOf $.ajax }); //endOf :submit.click function ``` When I do alert(postData), in client side it contains the true values for each item but in the conroller the postData.Features and postData.MenuItems are null. I have tried to pass just one array to the controller too: ``` features = JSON.stringify(features); ``` in $.ajax: ``` {… data: features,…} ``` in controller: ``` ActionResult CheckPreferences(IEnumerable<SJSonModel> features) ``` and it works fine, but I don't know how to pass the array of json objects to my contoller. So I hope to retrieve the answer here :) Thank you very much.

Original source