How to implement dynamically changing number of forms in ASP.NET MVC?

Question

I've a Person entity that contains set of "Education" entities. What I want is to collect "N" number of Education entries from the form. This "N" is controlled by "Add More Education Information" and "Remove Education Information" buttons.

At the beginning there's an empty form that'll collect one Education entry. ("person" object , which is stored in session, has one empty education entity initially, and I call View with this "person" object)

If user clicks "Add More Education Information" button, then another form is added (to get another education information, i.e. from another university, or another degree) [I add another education object to "person" and call view(person) again]

This works ok, but old data is lost. Better to say data in the forms is not mapped to Education entities and is lost, even if I call TryUpdateModel(person). Everytime I click "Add More Education Information" button all previously entered data is lost, and all forms become empty.

Question: Is there a better way of solving this kind of problems(dynamically changing number of forms)? Or what should I change to preserve old data?

Thanks.

I hope I could explain my problem.

Answer 1

I think you'd be better off extending the single form and having it get an array of entities back. That is, have your first form use ids like:

 <%= Html.Hidden("Schools.index", 0) %>
 <%= Html.TextBox("Schools[0].Name") %>
 ...

Then, add new elements with an new index.

 <input type="hidden" id="Schools_index" name="Schools.index" value="1" />
 <input type="text" id="Schools[1]_Name" name="Schools[1].Name" />
 ...

And receive them as a collection

 public ActionResult AddEducation( Person person, School[] schools )
 {
 }

This will all you to submit all the information at one shot and not have to worry about partial submissions and what to do with incomplete submissions.

Note that your javascript will have to find the current maximum index to know what the names/ids of the new elements will be.

$('#addSchooButton').click( function() {
     var index = $('#form').find('[name=Schools.index]:last').attr('value') + 1;
     $('<input type="text" id="Schools[' + index + ']_Name" name="Schools[' + index + '].Name" />').appendTo( '#form' );
     ...
});

In actuality, you'd probably create an entire container -- perhaps by cloning an existing one and replacing the ids in the clone with appropriate ones based on the next index value.

For more information, reference Phil Haack's article on model binding to a list.