asp.net-mvc - sintaxis - razor insert c# code

Agregar otra "mascota" a un formulario modelo

Question

Ejemplo simplificado

Tengo un modelo que tiene algunos campos:

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

La interfaz de usuario debe permitir al usuario agregar cualquier número de nuevas mascotas. La interfaz de usuario para la entrada Pet es una plantilla MVC _petEditor.cshtml

En el lado del cliente, ¿cómo agrego un nuevo animal doméstico a la colección de Mascotas del modelo y luego agrego un nuevo conjunto de campos para el animal doméstico de _petEditor.cshtml?

Cuando el usuario envía el formulario, MVC obtendrá un modelo con todas las Mascotas agregadas.

Answer 1

Puede usar javascript para crear dinámicamente entradas indexadas para la publicación posterior. Como ejemplo, cree un conjunto ficticio de entradas que se clonan y se muestran al hacer clic en el botón ''agregar mascota'' (se supone que las propiedades de mascotas se muestran en una tabla con id = ''Mascotas'')

<div id="NewPet" style="display:none">
  <tr>
    <td><input type="text" name="Pets[#].Type value /></td>
    <td><input type="text" name="Pets[#].Breed value /></td>
    <td>.....</td> // more properties of Pet
    <td><input type="hidden" name="Pets[#].Index" value ="%"/></td>
  </tr>
</div>

Tenga en cuenta el uso de un indexador ficticio para evitar que este se publique de nuevo

Y el guion

$(''#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());
}