Al fin me pude hacer un rato libre para comenzar mi blog con los ejemplos que voy haciendo y posteo en algunos grupos.
En esta ocasion les muestro en ASP.NET MVC como dar de alta entidades (en este caso Personas) usando un formulario en modal. Primero les cuento que para el ejemplo no se usan herramientas de terceros o sea html + js + css y para el codigo de servidor C Sharp, para la manipulación del dom si usamos Jquery.
Vamos con el paso a paso:
1 - Primero que nada necesitamos preparar una ruta que vamos a necesitar en los proximos pasos:
2 - En el modelo agregamos las clase Persona y la clase Respuesta, el uso de esta ultima sera contener información de la petición que le hagamos al controlador cuando demos de alta una persona.
3 - Agregamos un controlador llamado PersonaController, este controlador contiene un listado de Persona cacheado en la Session para emular un repositorio y contiene los siguientes métodos (los nombres son para el ejemplo):
- GetPersonasJson: Rertorna el listado de personas serializado en formato JSON.
- AddPersonaAjax: Se encarga de agregar una nueva persona al listado y retorna una instancia de la clase Respuesta serializada en JSON.
- Index: Devuelve la vista Index , solamente se ejecuta cada vez que entramos en la pagina , luego no tiene ningún uso adicional.
Antes de seguir vamos a testear el metodo GetPersonasJson para que vean que es lo que se retorna (JsonResult), para eso navegamos a la ruta que esten usando para debuguear + controlador + accion, deberian ver lo siguiente:
4 - Ahora falta la vista (me salteo la parte de como agregarla), y aca vamos por partes, lo primero que debemos saber es que el listado de personas lo vamos a mostrar en una tabla y segundo que el alta de las nuevas personas lo hacemos en un formulario modal hecho con HTML + CSS. Para eso agregamos en el encabezado de nuestro HTML (vista .cshtml) las siguientes reglas de estilo:
Para el formulario modal usamos un div con posición absoluta y un z-index de 1000 para dar la impresión que es un formulario aparte y las capas inferiores quedan inaccesibles hasta que lo cerremos (poner su propiedad display en none).
Ahora, ¿ como se muestran las personas en la vista si nunca configuramos la propiedad model de la misma (@model List<Personas>) ? La repsuesta es que cuando se carga la vista una función en javascript hace la peticion de los datos a la acción que devuelve el listado de las personas en JSON (GetPersonasJson), luego iteramos ese array y por cada elemento agregamos una fila a la tabla.
Ya casi lo tenemos, ahora solo falta cargar una persona nueva para ver que todo funciona.
Abrimos el formulario modal y tratamos de cargar una persona con un documento ya existente en el listado, por ejemplo:
Como ven dice que la persona existe, ¿ como lo valido ? El botón Aceptar ejecuta una función en javascript que envía los datos de la nueva persona al servidor , o sea son recibidos por el metodo AddPersonaAjax (por eso el mapeo de la ruta con los parametros al principio) como se detecta que ya hay una persona con ese DNI devolvemos una instacia de la clase Respuesta que contiene un codigo de error (en este caso elegido por mi) y una breve descripción de lo ocurrido, obviamente la respuesta va serializada en JSON que nos permite de forma muy fácil trabajar las validaciones del lado cliente.
En el caso que el dni sea valido y todo este bien se agrega la persona al listado (servidor), se envia la respuesta que todo esta ok (en este caso el codigo de la repuesta != 404) y por ultimo se agrega la persona al listado de personas o sea la tabla con la funcion AddFila.
Bueno espero que les sirva , como ven me salteo algunos pasos por que tomo por sabido que tienen los conocimientos basicos de MVC y de jquery. Les dejo el link de descarga del ejemplo completo.
El ejercicio fue construido con Visual Studio 2013 y framework 4.5 .
Descargar el Ejemplo
{"Saludos", "!!!!"}
