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, despues vamos a crear el controlador y la vista utilizando el modelo creado, miren que facil 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.

image_thumb[72]
Agregamos un modelo
image_thumb[78]

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.
image_thumb[75]

Creamos nuestra clase Users que utiliza la clase UserModel.
image_thumb[91]

El método Create
image_thumb[101]

El método Update.
image_thumb[106]

El método Remove.
image_thumb[116]

El método GetUser.
image_thumb[121]
Nos vamos al HomeController, agregamos el using del modelo creado, creamos una variable que use la clase Users, creamos un nuevo ActionResult.
image_thumb[148] 
Ahora a nuestro ActionResult le creamos una nueva vista.
image

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. 
image_thumb[137]

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 codigo 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.
image_thumb[143]

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.image_thumb[160]

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.
image_thumb[166]

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.
image

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.
image_thumb[177]

Este es el código que genera.
image_thumb[189]

Y si lo ejecutamos, podemos ver los detalles.
image_thumb[194]

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.
image

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.
image_thumb[215]

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.
image

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.
image_thumb[222]

image_thumb[230]

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.
image

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

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.
image

image_thumb[253]

Ahora podemos eliminar o crear nuevo usuario
image
image

     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.


Anuncios

12 Comentarios Agrega el tuyo

  1. Daniel Angulo Jofre dice:

    Hola moises mira tengo una duda y tu me la puedes responder. El tema es si sabes como hacer un menu dinamico en el layout.cshtml, que se alimente de una base de datos, mi duda es ya que la informacion pasa desde los controller a las vistas y el layout.cshtml no tiene un controller asociado y no me parece pasar un un metodo por cada controller, esa es la duda.
    Saludos

    1. Hola Daniel, gracias por pasar por aquí, te cuento que es medio complicado pero se puede hacer, primero tienes que determinar que clase de menu se va a retornar y a que contenido tiene que mostrar en base a tus vistas, de ahí esto aquí puede darte una idea https://gist.github.com/1380185, tambien esto otro http://speakingin.net/2011/01/30/asp-net-mvc-3-layouts-y-secciones-con-razor/, actualmente no tengo un ejemplo, pero cuando tenga tiempo armo un ejemplo, abajo te dejo alguna idea de algo que encontre en la web, no resuelve todos los caso de menu dinamico pero es algo
      // Metodo
      public ActionResult MenuPorUsuario(string perfil, string modulo) {
      List model = _usuariosPerfil.AcessoPorPerfil(perfil, modulo);
      return PartialView(model);
      }
      //Despues en tu Partialview
      @model System.Collections.Generic.IEnumerable

      // Y en la pagina donde se reproduce
      @Html.Action(“MenuPorUsuario”, new { perfil =”[Rol del usuario logueado]”, modulo = “[Modulo menu]” })

  2. aarojasm dice:

    Tienes el código fuente para la descarga?, saludos

    1. No lo tengo, disculpa.

  3. aarojasm dice:

    Estimado tienes el codigo fuente para la descarga?, saludos

  4. moises necesito hacer un treeview que se cargue dinamicamente con datos de una tabla de sql server …me podrias orientar.
    ..gracias de ante mano y muy buenos tus tutoriales

  5. alecua dice:

    Hola tengo una duda, en la aplicacion me da este error:Error 1 La instrucción foreach no puede funcionar en variables de tipo ‘ProyectoMedicar.Models.ModeloUsuario’ porque ‘ProyectoMedicar.Models.ModeloUsuario’ no contiene ninguna definición pública para ‘GetEnumerator’ c:\Documents and Settings\alecua\Mis documentos\Visual Studio 2010\Projects\ProyectoMedicar\ProyectoMedicar\Views\Home\ListaUsuarios.cshtml 27 6 PruebaMedicar1, cual puede ser la correcion, gracias y enhorabuena por el post

    1. Hola alecua, primero que nada gracias por la visita y mil disculpas por contestar tarde, te cuento que no tengo mucha referencia de lo que me indicas pero según lo que veo hay un método en la clase ‘GetEnumerator’ que necesita que sea publico en el caso que lo tengas, de todos modos si te parece enviame un mail con la clase y lo vemos mas en detalle si te parece.

  6. Marcelo dice:

    que onda moises, aqui con dudas jaja

    estuve intentando hacer el ejemplo y todo va bien hasta que genero los detailsusers no me funciona.

    segui al pie de la letra solo que lo modifique a español mas no me despliega la pantalla me marca que no la encuentra.

    Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

    Requested URL: /AccesoUsuario/Detalles

    1. No se como tendras tus metodos, pero segun lo que dice el error es que no encuentra la pagina y en el caso de MVC no encuentra el metodo.
      Esto /AccesoUsuario/Detalles hace referencia a un Controller llamado AccesoUsuarioController y que contiene un metodo Detalles
      Fijate si estas indicando bien el metodo, puede que no tengas el mismo nombre en el metodo.

      Bueno espero haber ayudado, te mando un abrazo.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s