asp.net mvc - 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