How to bind multiple textbox with ViewModel array

Question

In below link there is add button which allows you to ADD multiple textbox which i am using on my application.

http://jsfiddle.net/cN5SR/200/

Now I want to know how can I bind that array of string value with my ViewModel.

let's say if my property in ViewModel is as below:

Public class MyViewmodel
{
   Public string[] players { get; set; }
}

Answer 1

Steven Sanderson wrote a very nice blog post on exactly this subject.

Answer 2

If I did it statically, I would have done it as follows using Razor syntax.

@for(int i = 0; i < Model.players.Length; i++)
{
   @Html.EditorFor(m => m.players[i]);
}

This results in the following markup:

<input class="text-box single-line" id="players_0_" name="players[0]" type="text" value="Bob" />
<input class="text-box single-line" id="players_1_" name="players[1]" type="text" value="Sam" />

So if you add two inputs using javascript that looks as follows and post it to your controller, the default binder will create an players array with 4 items. I hope you see the patter.

<input class="text-box single-line" id="players_2_" name="players[2]" type="text" value="Pete" />
<input class="text-box single-line" id="players_3_" name="players[3]" type="text" value="Dirk" />

There are some challenges. I have done this before and had a couple issues around deletions. I can't remember the exact issues and what I did to fix it at this point.