allow user to Add partial view multiple times MVC 3 - asp.net-mvc

Question

I have a model that has several fields and contains a list. I need a view that allows the user to input the Parent fields and then input mutlple child fields. The problem I have is that I don't know how many child objects they are going to add. I need the view to allow them to add as many child objects as they need.
I'm assuming I need a partial view for the child object, but how do I allow them to add the partial view multiple times to the page?
edit
here's what I have so far but it just renders the code in the append method as text on the screen.
$(document).ready(function () {
$("#AddProgramTrainingButton").click(function (e) {
$("#ProgramTraining").append('##{Html.RenderPartial("_ProgramTrainingDetailsCreate",new Online.Models.ProgramTrainingDetailsViewModel());}</br></br>');
e.preventDefault();
});
});
---------2nd edit
I've tried using jquery to load the partial view by calling the partial view in a controller, but this is not working either.
$(document).ready(function () {
$("#AddProgramTrainingButton").click(function (e) {
alert("button clicked!");
$('#ProgramTraining').load('#Url.Action("GetCreatePartialView","PGTController")');
return false;
});
});
// controller method
public ActionResult GetCreatePartialView()
{
return PartialView("_ProgramTrainingDetailsCreate.cshtml",new PGTProgramTrainingDetailsViewModel());
}
i needed to remove the file extention and was missing some closing characters in the jquery

Answer 1

Ronald, take a look to this blog post... I use it and it is perfect.
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

Answer 2

I got this to work. I wrapped the partial views in a div
$(document).ready(function () {
// This section is to remove a Dynamically added Training section when a button is clicked
$("#RemoveTrainingButton").live('click', function (e) {
e.preventDefault();
$(this).closest('div').remove();
});
// This section adds a Training section to the page when a button is clicked
$("#AddProgramTrainingButton").click(function (e) {
e.preventDefault();
var url = '#Url.Content("~/PGT/GetCreatePartialView")';
$.get(url, null, function (data) {
$('#ProgramTraining').append(data);
}, 'html').error(function (error) {
alert(error);
});
});
});
[HttpGet]
public ActionResult GetCreatePartialView()
{
return PartialView("_ProgramTrainingDetailsCreate",new PGTProgramTrainingDetailsViewModel());
}

Answer 3

I would suggest having an image / button indicating field addition, and then onclick, you can write a simple handler to insert a partial view or any other form field in the form. If you keep the Name of the inserted fields same, then they will be submitted as an array in server, from there you can parse and find out.

Answer 4

You can use jQuery to retrieve your partial view and insert it into the DOM of the main page. Check out the load and ajax functions. You'll need to wire up some sort of control to trigger the asynchronous load. You partial view will be returned from a controller action (different than the full view, e.g. /Controller/MyPageAction and /Controll/MySubformAction where MyPageAction is a full result and MySubformAction is a partial).
You could either rely on an explicit user action (button click), or automatically provide a new set of child fields as soon as the user starts to fill out the last available set of child fields.