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.

Tassadaque · Accepted Answer · 2011-03-31 11:49:05Z

4

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

answered Mar 31, 2011 at 11:49

Tassadaque

8,19715 gold badges59 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

halfer · Accepted Answer · 2021-01-23 20:39:16Z

1

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.

edited Jan 23, 2021 at 20:39

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 31, 2011 at 8:15

Muhammad Adeel Zahid

17.8k16 gold badges95 silver badges160 bronze badges

1 Comment

Daveo Over a year ago

Thanks this helps generte the inputs but it still does not put the data-val-required="Name is required" attibutes on the form

Collectives™ on Stack Overflow

MVC .NET Model Binding to Array on the fly

2 Answers 2

Comments

Edit

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related