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?

Answer 1

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.

Answer 2

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.