asp.net mvc - Adding / Removing MVC typed partial view to form on mouse click -

first question on stack please gentle ;). have long mvc form requires user able click 'add person' button , create copy of 'add person' partial view , filled in person details. on form submit, controller need contain details of each new added person stored person object in person[] array have in view model. example:

user clicks 'add person' button 3 times
3x ' add person' partial views displayed on screen, 1 after other
user fills in 3 listed forms
user submits form
model submitted controller contains array of 3 person objects, populated values user has entered.

i've got editorfor working when displaying list of template forms populated array of person objects, not sure how go inserting new 'person' model via mouse click. each new person need given id of guid type.

sorry if question vague.i'm trying not be. cant provide sample code exact solution government project can whip similar example if required. thank time

this should give general idea of how it

    var partialview = '@html.raw(@html.partial("person", new viewmodel()).tostring().replace("\r\n", string.empty).replace("\n", string.empty).replace("\r", string.empty))';     partialview = partialview.replace('id="1"', 'id=listname_{0}'.format(newid));     $("#persons").append(partialview); 

firstly create variable containing partial view string, next need change ids , rest of properties follow convention used lists when data binding in mvc.

it follows following convention

<input type="text" name="stocks[0].key" value="msft" /> <input type="text" name="stocks[1].key" value="aapl" /> 

see following description http://www.hanselman.com/blog/aspnetwireformatformodelbindingtoarrayslistscollectionsdictionaries.aspx

once ids correctly created can post form per usual.