MVC .NET Model Binding to Array on the fly

Question

In Scotts blog post he describes how to post an array of objects to the controller.

My Question how best to generate a View for this that allows the user to add more array items on the fly?

If I write

 foreach(MyModel item in Model)
 {
     <p>@Html.TextBoxFor(m => item.Name)</p>
 }

and have the controller add a new item to the array each time it generates <input type="text" name="item.Name" /> missing the 1 Array index.

If I hand code the <input> then it works but I lose all the client side validation attributes like data-val-required="Name is required"

What I want to be able to do is have the User add new Items to the array on the fly and still retain unobtrusive validation?. What's the best practice for this?

I am thinking I have write it myself using jQuery but if so can I keep the validation?

Update Seems like Tassadaque answer is a nice .NET solution but looks like a lot of server side code to do something which should be very easy. Muhammad Adeel Zahi answer is ok but still misses out client side validation.

I think I will end up just writing my own client side HTML manually and using jQuery live and validation plug-in. So I can do all my own validation and adding and removing of new Items all client side without any calls to the server.

Answer 1

You may see This In this post steve Validated a variable length list in which textboxes may be added or deleted dynamically

Answer 2

When rendering and binding to lists or arrays, I normally prefer for loop over foreach loop because it will generate required indices for the modelbinder to bind data to the model.

for(int i=0;i<Model.Count(); i++)
{
   <%:Html.TextBox("Items["+i+"].Name", Model[i].Name)%>
}

I'm not comfortable with strongly typed helpers when it comes to list binding but its purely a matter of personal preference. However, if you are allowing the user to dynamically add and remove items from page through JavaScript you have to take care of indices yourself.

Edit

I have blogged about creating master detail form in asp.net mvc using jQuery templates which is relevant in list binding scenario as well.