Desde que empecé a trabajar con las versiones beta de MVC, me tope con un reto que no le encontraba ni pies ni cabeza. Algo que siempre fue simple en ASP, resulto ser complicado en MVC. O al menos a si lo parecía. Así es, llenar un combo o Lista desplegable en MVC requería pasos extra, para poder completarse. Cuando vienes de un entorno donde todo se basa en controles y nos limitamos a llenarlos con el resultado de una consulta, el entorno MVC resulta confuso al principio.
Views
En MVC las páginas no existen como en WebPages, lo que se crea se denomina View; las Views son archivos que se limitan a presentar la información que el controller le proporciona al ViewEngine. Una View Tipificada está relacionada a una entidad para poder realizar esta tarea. O sea, cada elemento que se presenta como un control HTML esta en relación a una propiedad de esta clase o entidad.
Dentro del Código que define nuestra View, el Model es nuestra entidad principal, se define en las directivas al principio del código, por lo que podemos acceder a sus propiedades por medio de él.
Si queremos presentar una lista desplegable, entonces debemos proporcionarle al Engine esta información, y esto debe llevarse a cabo desde el controller, ya que según el patrón, el engine no debe realizar ninguna llamada al Model. Debido a esta limitante es necesario recurrir a una estructura que nos permita enviarle al engine la entidad y nuestra lista desplegable.
ViewModel
Para esta tarea debemos crear una clase especial que se conoce como ViewModel, este término resulta ser uno de los aspectos centrales de la arquitectura MVC. He encontrado muchos artículos donde lo comentan y según vi crea mucha polémica, pero como yo no quiero, mejor veamos cómo se usa.
Se debe crear una clase, con la estructura de datos que requiere nuestra view para poder crearse, se le debe proporcionar la entidad como una de estas propiedades y si queremos una lista desplegable, será necesario agregarle una lista genérica de la entidad que usaremos para llenar nuestro DropDownList. Es importante que le agreguemos una propiedad por medio de la cual se recibirá el ID que el usuario seleccione de la lista:
Una vez que se ha creado esta clase, debemos compilar el proyecto para que la nueva clase aparezca en nuestro asistente de View y podamos usar el ViewModel para nuestra vista tipificada. De esta forma nuestra View heredara de nuestra Clase ViewModel.
Al hacer esto nuestro Model contendrá un nivel extra para poder acceder a las propiedades de nuestra entidad:
Además será necesario llenar el ViewModel antes de enviárselo al Engine y que se cree nuestra View:
Código en View
En el código del View usaremos un helper:
La sintaxis del Helper requiere que le enviemos el nombre del elemento, así como nuestra lista Genérica como un enumerable, la siguiente propiedad es el value de la lista desplegable, seguida del texto que se presentara en la lista y por último la propiedad del model donde se almacenara el id seleccionado.
En la pagina se vería de este modo:
El valor seleccionado regresara a la acción por medio del automatic Binding y podrá ser accesible desde nuestra variable:
No hay comentarios:
Publicar un comentario