Model binding difficulty

Question

I am having a model and I am using ajax.post. I can see that the model binding isn`t being done for the arraylists in my model, though binding done for the properties of int or string type. Why is that so? My code is as below.

I have a model with the following properties

public class ProjectModel
{
    public int ID { get; set; }
    public ArrayList Boys= new ArrayList();

}

In my view I have

  $(document).ready(function () {
     var project = new Object();
      var Boys= new Array();
var ID;
.......
ID = $('#ID').val();
project.Boys= Boys;

.....

$.ajax({
                 type: "POST",
                 url: '<%=Url.Action("Create","Project") %>',
                 data: JSON.stringify(project),
                 contentType: "application/json; charset=utf-8",
                 dataType: "html",
                 success: function () {
                 },
                 error: function (request, status, error) {
                                         }
             });

//

My controller

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Create(ProjectModel project)
    {
        try
        {
            project.CreateProject();
            return RedirectToAction("Index");
        }

....

Answer 1

The ModelBinding is done using the name. For any Collection that you want to be bind, it must have this format:

project.property1
project.property2

and for the Boys Collection

project.Boys[0].property1
project.Boys[0].property2

project.Boys[1].property1
project.Boys[1].property2

If you are using a form, you can just correctly set the names of the inputs and using jquery:

//inside the ajax definition
    data: $('#formID').serialize(),

EDIT: if Boys doesn't have properties then the name should be:

project.Boys[0]
project.Boys[1]
project.Boys[2]

Have you tried binding with a second parameter like this?

public ActionResult Create(ProjectModel project, string[] Boys)

I didn't use ArratList because i did some test and it does not seems to bind at all, i prefer to use a normal array declaration.

Another thing you can try is inspect the FormCollection

public ActionResult Create(FormCollection f)

put a breakpoint just at the beginning and inspect the values, if the names inside don't follow the format project.Boys it will never bind.

EDIT2: If you want to Bind to multiple arrays then just add a collection definition to the model:

public class ProjectModel

    {
        public IEnumerable<string[]> Boys { get; set; }
    }

and the names should be: for the first array:

project.Boys[0]
project.Boys[0]

for the second:

project.Boys[1]
project.Boys[1]

. . .

But in order to archive this the definition of Boys in Javascript should be a collection of a colecction as well and im not sure how to define that in js.

PD: if you are pushing the value manually to the arrays and that values comes from inputs as you state here Boys.Push($('#tex1').val()) then you should be able to serialize those inputs and save you a lot of troubles =D. ie: to simulate your situation it ll be something like...

<% using (Html.BeginForm())
       { %>
       <% var i1 = 5; %>
       <% var i2 = 5; %>
       <% for(var i=0; i < i1; i++)
          { %>
          <% for (var ix = 0; ix < i2; ix++)
             {%>
          <input name="boys[<%=i %>]"  value="VALUE_HERE"/>
          <%} %>
       <%} %>
       <input type="submit" value="sumit" />
    <%} %>

and doing data: $('#formID').serialize() give the same result as create a project js object and then doing JSON.stringify(project).