Question

The goal here is to have MVC framework recognize and populate a field in my action that is a FormCollection object. I can get it to work if I handle all the serialization myself but so far no dice if I leave it to jquery/javascript.

Question: What is causing the following array to be serialized as if it contained no data?

I checked the variable and it contains one item just as expected (set elsewhere in code).

    var formVars = new Array();
    for (var item in gd["FormVariables"])
    {

        if (gd["FormVariables"][item] != null)
        {

            formVars[item.toString()] = gd["FormVariables"][item];
         }
     }
    var args = {
        Req: {
            SelectedColId: gd["SelectedColId"],
            CurrentPage: gd["CurrentPage"],
            PageSize: gd["PageSize"],
            RecordCount: gd["RecordCount"],
            NumberOfPages: numOfPages,
            MultipleSelection: gd["MultipleSelection"],
            FormVariables: formVars
        }
    };

The issue with this is the behavior of the array … if I do an alert(formVars); it appears empty even though it contains all the key/value pairs. Likewise, the FormVariables parameter is empty after JSON.stringify() does its work.

 $.ajax(
            {
                traditional: true,
                type: 'POST',
                contentType: 'application/json',
                dataType: 'json',
                url: gd["Route"],
                data: JSON.stringify(args),
                success: function (data, textStatus, jqXHR)
                {
                },
                error: function (jq, status, err)
                {
                    alert(status);
                }
            });

}

serialized output:

'{"Req":  
    {
       "SelectedColId":"",
       "CurrentPage":1,
       "PageSize":15,
       "RecordCount":0,
       "NumberOfPages":2,
       "MultipleSelection":false,
       "FormVariables":[]
     }
}'

what is going wrong here?

EDIT: gd contents

{
      Height: 300, 
      FetchType: 1, 
      Route: '../GetTrainingDocuments/', 
      SelectedColId: '', 
      PageSize: 15, 
      CurrentPage: 1, 
      RecordCount: 0, 
      HasMoreRecords: true, 
      NumberOfPages: 1, 
      MultipleSelection: false, 
      FormVariables: function() 
      {
          if (this.array == 'undefined') 
          {
             this.array = [];
          } 
          return this.array;
      }
}

The Model it should bind to:

public ActionResult GetTrainingDocuments(GridRequest req)
{
   //...
}

public class GridRequest
{
    public string SelectedColId { get; set; }
    public int CurrentPage { get; set; }
    public int PageSize { get; set; }
    public int RecordCount { get; set; }
    public int NumberOfPages { get; set; }
    public string Widths { get; set; }
    public bool MultipleSelection { get; set; }
    public FormCollection FormVariables { get; set; }

    public GridRequest()
    {           
    }
}

Answer 1

You have declared the formVars variable as array an yet here: formVars[item.toString()] you are trying to address it by some value that is probably not an integer. In javascript array must have 0 based integer indexes. So instead of:

formVars[item.toString()] = gd["FormVariables"][item];

if you want to use an array you need:

formVars.push(gd["FormVariables"][item]);

or if you wanted to preserve the item as key:

formVars.push({ key: item, value: gd["FormVariables"][item] });

If you want FormVariables to be an object (i.e. an associative array in javascript) then:

var formVars = {};
for (var item in gd["FormVariables"])
{
    if (gd["FormVariables"][item] != null)
    {
        formVars[item.toString()] = gd["FormVariables"][item];
    }
}

It really depends on what view model you are trying to bind this on the server side.

---

UPDATE:

Now that you have posted your gd variable, looking at the FormVariables property, it looks very strange:

FormVariables: function() {
    if (this.array == 'undefined') {
        this.array = [];
    } 
    return this.array;
}

This will always return an empty array which limits the usefulness of such structure.