Aggiunta di un altro “animale domestico” a un modulo modello

Esempio semplificato

Ho un modello che ha alcuni campi:

OwnerFirstName OwnerLastName List Pets (Pet is a few string fields) 

L’interfaccia utente deve consentire all’utente di aggiungere qualsiasi numero di nuovi animali domestici. L’interfaccia utente per la voce dell’animale domestico è un modello MVC _petEditor.cshtml

Lato client, come posso aggiungere un nuovo animale domestico alla collezione Pet del modello, quindi aggiungere un nuovo set di campi per l’animale domestico da _petEditor.cshtml?

Quando l’utente invia il modulo, MVC otterrà un modello con tutti gli animali domestici aggiunti.

È ansible utilizzare javascript per creare dynamicmente input indicizzati per il postback. Ad esempio, crea un set fittizio di input che vengono clonati e visualizzati quando fai clic su un pulsante “aggiungi animale domestico” (si assume che le proprietà dell’animale domestico siano visualizzate in una tabella con id = “Animali domestici”)

  

Notare l’uso di un indicizzatore fittizio per impedire che venga reinserito

E la sceneggiatura

 $('#AddButton').click(function() { var index = (new Date()).getTime(); var clone = $('#NewPet').clone(); // Update the index of the clone clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']')); clone.html($(clone).html().replace(/"%"/g, '"' + index + '"')); $('#Pets tbody').append(clone.html()); }