Question

I’m working on a project that uses both jQuery Mobile and an MVC3 backend. On one of the pages the user is asked to select options from a couple of dropdown menus or leave them as the defaults. The page takes the selected options and throws them into an object which it then sends to the server to load the next page of data. I have tried two different ways of doing it and both ways give the same error. The main object serializes and deserializes correctly, but the array inside doesn’t. The array has the correct number of elements, but no data inside them. I create the object like so:

var obj = { };
obj.selections = new Array();
// customArr holds the data from the select lists and populates fine
$.each(customArr, function(key, value)
{
    if(value== undefined)
       return true;

    obj.selections.push({
        type: value.id,
        subtype: value.subtype,
        model: value.model
    });
}

// Selected comes from data that was previously gathered
if(selected != undefined)
{
    obj.mk = selected.mk;
    obj.md = selected.md;
    obj.yr = selected.yr;
}
obj.id = selectionID;

And I’ve tried two ways of getting the data. I’ve tried to move the page directly:

$.mobile.changePage('/Select/Data/', { data: obj });

and I’ve tried loading the above page without any data (just using the jQuery Mobile data attributes on a hyperlink) and then ajax out for the data using the following:

$.ajax({
    url: '/Select/Data/',
    data: obj,
    type: 'POST',
    datatype: 'json',
    error: function() { // Handle error },
    success: function(response) {
        // Load data
    }
});

If I set breakpoints in my server code I can look at the objects that are returned. The mk, md, and yr properties are populated and the selections array has two objects, but the type, subtype, and model data is empty. However, if I step through the JavaScript code it all gets created exactly as I expect. The POST variables even look right that are sent to the server. Any suggestions?

EDIT: The C# objects look like this:

public class ObjectModel
{
    public int mk;
    public int md;
    public int yr;
    public List<Mod> selections;
}
public class Mod
{
    public int type;
    public int subtype;
    public string model;
}

and the controller method looks like this:

public ActionResult Data(ObjectModel objMod, int id = -1)

Answer 1

Looking at the data that was being passed to the MVC engine showed that the object was being serialized in a JavaScript fasion. Namely, the objects looked like Obj[0]["id"]=5&Obj[0]["name"]="Bob"&Obj[1]["id"]=7&Obj[1]["name"]="Joe". MVC apparently has a hard time deserializing this style of object notation. My solution was to create a simple regex string replace method that took the string jQuery created and then replace it with what MVC was looking for. The regex looked for the ][ pattern since this will only happen in one place for each object and replaced it with a .. Then it looked for the .".+"] and replaced the last character with an empty string. The query string ended up looking like Obj[0].id=5&Obj[0].name="Bob"&Obj[1].id=7&Obj[1].name="Joe". MVC was correctly able to interpret this string. I don’t know if this is a fault with MVC or the way jQuery serializes JS objects, but it’s a pain. Hopefully someone can post a better response.