2 - MVC 3 con Razor ~ Agregando Modelo y Utilizando mi modelo.

Hola bueno continuando con nuestro trabajo anterior vamos a ingresarle un modelo de datos y definir como se van a consumir estos datos, después vamos a crear el controlador y la vista utilizando el modelo creado, miren que fácil que es esto con MVC 3 con Razor, bueno manos a la obra che.

En la carpeta Models hacemos clic derecho y agregamos un nuevo elemento.


Agregamos un modelo

Creamos nuestro modelo de datos y después vamos a crear una clase que utiliza este modelo y hace los create, upate, remove y get de esos usuario.

Creamos nuestra clase Users que utiliza la clase UserModel.

El método Create

El método Update.

El método Remove.

El método GetUser.

Nos vamos al HomeController, agregamos el using del modelo creado, creamos una variable que use la clase Users, creamos un nuevo ActionResult.
 
Ahora a nuestro ActionResult le creamos una nueva vista.

Nos aparecerá una pantalla donde vamos a indicarle que la vista utilice nuestro modelo y que en esta vista vamos a listar los usuarios, también le decimos que utilice el Layout que tiene la aplicación. 

Nota: Si no pueden ver la lista de Modelos en la parte de Model Class, seguramente tendrán que volver a generar la aplicación.

Por defecto esto nos crea en la vista un html con el nuevo código Razor para mostrar los datos de nuestro modelo, con link de editar, detalles y eliminar, el cual podemos modificar a nuestro antojo ya que es muy fácil de entender.

El código Razor en este caso siempre es insertado después de un @{ …} o en su defecto @variable o @metodo o @iteración {……}, no se si alguien recuerda un poco del viejo ASP clásico antes abríamos <%  %>  para poner el código del servidor,  bueno si me permiten en mi opinión personal la forma de la vista de mezclar el código es más o menos parecido solo que con mas prolijidad y con toda la potencia de los nuevos lenguajes y en este caso con todo lo de MVC, impresionante.

Ahora vamos a abrir la pagina _Layout.cshtml que se encuentra en la carpeta Views/Shared y agregamos un nuevo link al menú principal.

Si ejecutamos nuestra aplicación hasta aquí de seguro podremos ver ya el en el menú un nuevo enlace a nuestra nueva Page y ver la lista de usuarios.

Ahora creamos la página de detalles, para eso volvemos a HomeController y agregamos un método ViewResult y a este le pasamos un string que en este caso cera el username que traeremos.

Creamos la vista haciendo  clic en el botón derecho sobre el nuevo ViewResult y agregar vista, indicando el modelo de datos y también diciéndole que es una Page para details.

Este es el código que genera.

Y si lo ejecutamos, podemos ver los detalles.

Creamos la página de edición del usuario, para esto vamos a HomeController y creamos dos ViewResult de EditUser uno para la llamada a la Page y otro para cuando se realiza el post de la misma, pasándole un string que va a ser el username.

Ahora agregamos la vista de editar como lo hemos indicado anteriormente eligiendo el modelo e indicándole que es una vista de edición donde nos crea una Page con html y código Razor por default.

De esta forma ya podremos ejecutarlo y ver en acción nuestro código, que contiene un formulario que valida los campos por medio de Javascript.

De seguro ya tendremos habilitada la validación en el web.config y puesto los js en la aplicación, sino fuera así tendríamos que activar en nuestro config y poner los siguientes js, para que valide.

Creamos la page de crear nuevo usuario, para esto vamos de nuevo a HomeController y agregamos dos ViewResult uno para la llamada y el otro para cuando se realice el post de la page.

Creamos la vista eligiendo el modelo y le decimos que nuestra vista la vamos a usar para crear un usuario.

Y por ultimo vamos a crear la Page de eliminar usuario, para esto hacemos lo mismo que en las anteriores, en el HomeController creamos un ViewResult, uno para la primer llamada y el otro va a ser un RedirectToRouteResult que es para re direccionar una vez que a realizado el post, después agregamos la vista indicando el modelo y que es para eliminar usuarios.

Ahora podemos eliminar o crear nuevo usuario

     En resumen hoy hemos aprendido a:
Agregar un Modelo de datos para su uso.
Crear un nuevo ítem en el menú principal modificando el Layout.
Crear las Vistas utilizando el modelo creado para crear, editar, eliminar y mostrar los detalles de un usuario

Recomendaciones:
WebMatrix Parte 3 – Demos un poco de estilo
WebMatrix Parte 4 – Utilizando Layout
WebMatrix Parte 5 – utilizando datos

Bueno gente hasta aquí hacemos hoy, para la próxima vamos a ver como se trabaja con MemberShip en MVC 3 y vamos a ver como utilizar los comentarios de servidor y la palabra reservada @model de Razor.

Para cualquier consulta pueden dejar sus mensajes aquí o mandar me un correo electrónico a Moises.Rivas@msptechrep.com.

Tweet