Question

I have a ASP.NET MVC 4 app with model, that contains and colection (IEnumerable<T> or IList<T>), i.e.:

class MyModel
{
  public int Foo { get; set; }
  public IList<Item> Bar { get; set; }
}

class Item
{
  public string Baz { get; set; }
}

And I render the data in view with classic @for..., @Html.EditorFor... ad so on. Now there’s a need to add on client side to add dynamically new items and then post it back to server.

I’m looking for an easy solution to handle the adding (in JavaScript), aka not manually creating all the inputs etc. Probably to get it somehow from editor template view. And to add it the way that when the form is submitted back to server the model binder will be able to properly create the IList<T> collection, aka some smart handling of inputs’ names. I read a bunch of articles, but nothing that was easy and worked reliably (without magic strings like collection variable names, AJAX callbacks to server, …).

So far this looks promising, but I’d like to rather rely on rendering (items known in advance) on server.

Answer 1

At the end I did similar stuff what STO was suggesting, but with the custom (non-linear) indices for collections suggested by Phil Haack.

This uses manual naming of elements (so I’m not binding directly to the model) and I can use custom instances (for empty element templates). I’ve also created some helper methods to generate me the code for the instance, so it’s easier to generate code for actual instances from the model or empty ones.