Steve Sanderson has a great post on how to perform list binding with MVC2 and custom HTML Prefix Scoping. However, it did not demo the out of box functionality that MVC2 provides, so I’m going to do that here. Please note, I’m using MVC2 RC2 in this example. At the end if this post you will be able to download the solution and run/debut it on your machine.
The App
I’m going to be using Steves sample app. When you first first fire it up you will be presented with a link to go to Donn’s list binding demo. This demo emulates using the built in features of MVC2 to great an editable grid or list. It will look like this:
After clicking on that link you will be presented with a grid / list that is editable. I’m going to use the EditorFor() expression based input builder and some custom editor for templates to layout the grid. In the end, the grid will look like this (yes, not pretty, but it demonstrates what can be done with some of the editor templates.
This is a order list that is set up in the controller manually. The Controller invokes the index action with a customer view model. The customer object has a list of orders, and each order has a list of line items. The objects look like this:
Customer
Order
LineItem
Solution Layout
The solution is lain out in a way that we can render the Index.aspx, which will render an editor for the order. The OrderRow.ascx file is the file we use to display the editor. We do that in the Index.aspx page like so:
These editor templates are stored in your controllers view folder, under a folder called “EditorTemplates” as shown below:
The OrderRow.ascx Editor will handle how each editor is formatted for editing:
We will be using another editor template, “LineItemRow” to format how each line item should be edited. We are using one editor to create another editor, cool!
Here’s the LineItemRow.ascx (which is called from above via the “LineItemRow” parameter in the EditorFor expression based call:
Incremental Sequencing
The reason the list binding works is because we’re using incremental sequencing while building our editor. We’re using for loops. This allows MVC to know where it’s at during the creation of the form. What does this mean in plain English? MVC will generate incremental name and id’s in the HTML, which, when posting back, the DefaultModelBinder will be able to bind back into the complex object type.
Lets delve into this a bit further. This screen is generated with incremental id’s, and the id’s are shown below in the screen shot for ease of understanding:
The raw HTML looks like this (click to enlarge):
Using the incremental sequencing and editor templates allows us to change the values and post them back to the form.
Example
Lets change the name of “Sneakers” to “Shoes”. Then we’ll post the form. Here’s what we see in the post (via the debugger):
Conclusion
Now you can edit the list, post the new updated results and persist them. Fairly simple.
Download the Sample Project (VS2010)
If you’re using VS2008, you can copy the files into a VS2008 MVC2 RC2 Project (minus the project) and it should work.
