ASP.NET MVC example of editing multiple child records

Question

Does anyone know of any examples or tutorials of an MVC view that shows parent/child data all on one form, and allows all the child records to be editable?

For example, say I have a table of people and another containing the vehicles they own. One one form, I want to show every vehicle for a given person, and make the data elements editable (i.e. license plate number, car color, etc.) in case there are mistakes. I don't want to jump to a separate edit form for each vehicle.

My attempts thus far have gotten me to the point where I can display the data, but I can't get it to post back to the controller. I've tried to narrow down the problem as far as I could here, but I'm still not getting it, and I think a broader example may be in order. Any ideas?

Retrospective

Answer 1

You can try something like this.

Suppose you have this object :

public class Vehicle
{
    public int VehicleID { get; set; }
    public string LicencePlate { get; set; }
    public string Color { get; set; }
}

And this is your controller action that you'll use to edit vehicle details (where you'll post the form) :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditVehicles(int Owner, Vehicle[] vehicles)
{
    //manipulate the data, then return back to the list
    return RedirectToAction("YourAction");
}

Then you should set your form this way :

<!--have a form for each person, listing their vehicles-->
<form action="/EditVehicles" method="post">
    <input type="hidden" name="Owner" value="25" />
    <input type="hidden" name="Vehicles[0].VehicleID" value="10" />
    <input type="text" name="Vehicles[0].LicencePlate" value="111-111" />
    <input type="text" name="Vehicles[0].Color" value="Red" />
    <input type="hidden" name="Vehicles[1].VehicleID" value="20" />
    <input type="text" name="Vehicles[1].LicencePlate" value="222-222" />
    <input type="text" name="Vehicles[1].Color" value="Blue" />
    <input type="submit" value="Edit" />
</form>

This will help the DefaultModelBinder to correctly bind the form data to your model in your controller. Thus Response.Write(vehicles[1].Color); on your controller, will print "Blue".

This is a very simple example, but I'm sure you get the idea. For more examples about binding forms to arrays, lists, collections, dictionaries, take a look at here.

Teacup

This works fine when doing a POST to my /Create URL, but doesn't bind back to the existing data when doing a GET on the /Edit URL. Both my Create and Edit pages are using the same partial view, and hence using the same strongly-typed model. Any ideas why? – Aerodynamics

@JMs It's not technically possible for a GET to "bind" anything. You are confusing ASP.NET MVC with ASP.NET Web Forms. A GET does not supply any information to the controller beyond which resource is being requested. This sounds like it would be easier to accomplish using AJAX, though. – Cleanser

I tried setting Html.BeginForm at the beginning of my index page, and I created a checkbox that submits the form when clicked. The problem is the model I get in the action is a newly created model with no values? – Margiemargin

Answer 2

I think the best you can get around this is by using AJAX posts, Whenever the user clicks on the submit button, You can hook in that event, create a JSON array of the things you want to persist and send it across.

The other way of course is to get all the information from the "FormCollection" object in the POST action. You just need to iterate through all the keys parse the data and then process it.

Union