Este tutorial hace parte de la serie Introducción rápida a ASP.NET MVC:

El controlador

Antes de empezar les recomiendo que añadan algunos datos a la aplicación usando el controllador que generamos en el capítulo anterior, de forma que puedan probar cómo se ven las cosas con datos reales (3 o 4 registros bastarán). Intenten no borrar ningún registro de momento, así podrán ejecutar las pruebas de este capítulo sin ningún problema.

Paso 1

Vamos a modificar la vista inicial yendo al HomeController (ubicado en la carpeta Controllers) y añadiendo el siguiente miembro a la clase HomeController (más abajo pueden ver el punto exacto dónde hay que ponerlo).

Con esa línea podemos utilizar el DbContext que configuramos en el capítulo anterior para interactuar con la base de datos.

Paso 2

Saldrá un error, no porque hayamos escrito mal las cosas, sino porque nuestro DbContext se encuentra en un namespace distinto. Visual Studio nos ayudará a importarlo automáticamente: tenemos que pararnos sobre el error y seleccionar la bombilla que aparece o presionar control + . mientras el cursor de edición (el que indica dónde vas a escribir) está sobre la parte del código resaltada con el error.

Paso 3

Hasta ahora todos los métodos que generamos (en el capítulo anterior) han retornado Views que traen todo el layout, incluyendo el menú superior y un footer, así como la configuración del jQuery y del Bootstrap (entre otras cosas). Como vamos a usar ajax para actualizar sólo una parte de la página, ya no necesitaremos todos esos elementos. En estos casos se utilizan las Partial Views.

Vamos a borrar los métodos About y Contact del controller, ya que no los usaremos. Luego, definiremos dos métodos que retornarán vistas parciales.

  • public ActionResult MostrarTodos(): una acción del controlador que retornará una vista parcial con un listado de todos los juegos que haya en la base de datos.
  • public ActionResult MostrarVideojuego(int id): una acción del controlador que retornará una vista parcial con la información detallada de un juego (dado su id).

Paso 4

El código del controlador debe quedar así:

Recordemos que con el Entity Framework, para traer todos los videojuegos de la base de datos bastará con escribir db.Videojuegos.ToList() (siendo db el miembro que añadimos en el paso 1 al controlador). Cuando ponemos var, automáticamente el compilador intentará inferir el tipo de dato que va a almacenarse en la variable (por ejemplo, la línea 18 puede escribirse como var videojuego, sin alterar el comportamiento del código).

Por su parte, notemos que para retornar una vista parcial utilizamos return PartialView("_MostrarTodos", videojuegos). El guión bajo se usa para indicar que no es una vista completa sino una parcial, y el segundo parámetro que se envía es el modelo que debe usar Razor para generar la vista (pronto veremos como utilizarlo).

Finalmente, el método de MostrarVideojuego busca en la base de datos el videojuego por id usando esta línea de código db.Videojuegos.Find(id), si no lo encuentra retorna un error, en otro caso retorna la vista parcial del videojuego.

Las vistas parciales

Mientras que en los controladores usamos C# para programar, en las vistas tenemos que usar múltiples tecnologías y lenguajes como html, css, jQuery y Razor. En vez de estudiar cada uno por separado, propongo que realicemos nuestras vistas de forma completa, utilizando todas las herramientas; posteriormente les recomiendo revisar con calma cada una de ellas para entenderlas mejor, pero de momento ¡manos a la obra!

Paso 5

Para añadir las vistas parciales (en general cualquier vista) a las acciones del controlador, debemos hacer clic derecho sobre el método del controlador y luego ir a la opción Add View. En nuestro caso, empecemos por hacer clic sobre alguna de las líneas de código del método MostrarTodos y luego en Add View.

Paso 6

En la ventana que se abre usamos la configuración que se ve en la imagen para que Visual Studio nos genere una vista parcial llamada _MostrarTodos que tendrá una lista de videojuegos.

Paso 7

En la vista que nos generá borramos todo a excepción de las siguientes líneas.

La primera define que el modelo con el cuál trabajará la vista será un conjunto de videojuegos, la segunda línea recorre cada elemento en ese conjunto usando un foreach. Todo el código que no es html plano, es decir que se genera de acuerdo al modelo que recibimos, inicia con @ en Razor.

Paso 8

Ahora sí, vamos a definir nuestra vista. Para mostrar los datos usaremos un List Group de Boostrap. La idea es crear un div que use la clase "list-group" y dentro del foreach generar cada uno de los botones para los videojuegos, como se ve en el siguiente código.

Para los botones estamos usando la etiqueta a de html. Por defecto se usaría la propiedad href de dicha etiqueta para indicar a dónde debe ir el navegador cuando una persona hace clic en el vínculo; en nuestro caso lo haremos en la propiedad data-url (pudimos haberle dado otro nombre cualquiera empezando por "data-"), para evitar que el navegador cargue completamente esa página. Posteriormente (¡en el siguiente capítulo de esta serie!), con un script obtendremos esa url y haremos un llamado ajax para cambiar sólo cierta parte del sitio que ya tenemos cargado.

Por otro lado, ya que estamos hablando de urls, miremos cómo podemos solicitar una acción de un controlador en MVC. Las siguientes formas son las que vienen configuradas por defecto:

  • Si la acción no recibe ningún parámetro: ~/Controlador/Acción. Ej: ~/Home/Index, hace un llamado a la acción Index del controlador Home.
  • Si la acción recibe un único parámetro con nombre id: ~/Controlador/Acción/Id. Ej: ~/Home/MostrarVideojuego/2, hace un llamado a la acción MostrarVideojuego del controlador Home enviándole al parámetro id el número 2 (esta es la opción que usaremos en este caso).
  • Si la acción recibe varios parámetros, luego de un signo de interrogación ? se ponen parametro=valor separados por signos &: ~/Controlador/Acción?param1=valor&param2=valor. Ej: La acción anterior podríamos llamarla también con ~/Home/MostrarVideojuego?id=2

Para obtener correctamente la url y evitarse problemas con direcciones relativas, se debe usar siempre el signo ~ que indica la raiz de nuestro sitio. Si ponemos la url en un href bastará con usar dicho signo, pero para obtener la url correcta en cualquier otro atributo o parte de la vista se debe usar @Url.Content.

En nuestro caso, agregamos un string.Format, para reemplazar el {0} con el id del item que estamos procesando actualmente, así cada botón terminará guardando la url que debe llamar de acuerdo al juego que representa, es decir, de nuestro sitio va a solicitar del controllador Home la acción MostrarVideojuego enviándole como parámetro el id del videojuego.

Por su parte, @item.Nombre, sirve para mostrar el nombre del videojuego dentro del botón.

¡Terminamos nuestra primera vista! ¿Suena complejo? La verdad son muchos detalles que hemos tocado (sobre todo si nunca habían visto nada de html), pero con un poco de práctica van a ver que esto resulta siendo algo más bien simple.

Les recomiendo ejecutar el servidor e ir a la url localhost:####/Home/MostrarTodos (dejando el número del puerto que él le genera a cada uno) y probar que sí esté funcionando. Deberían ver una vista desordenada con los títulos de los juegos que tienen en la base de datos. Esto es normal, ya que como dijimos anteriormente, las vistas parciales no traen configuradas las librerías ni las hojas de estilos que se tengan en el layout.

Sin más, continuemos con la otra vista.

Paso 9

Regresamos al HomeController y ahora en el método MostrarVideojuego hacemos clic derecho y le damos clic en Add View. En este caso el view name será _MostrarVideojuego y lo configuramos cómo se ve en la imagen.

Paso 10

Borramos todo el código generado a excepción de la primera línea, que es la que indica que el modelo va a ser un videojuego. En esta ocasión vamos a usar un Panel de Bootstrap para mostrar la información. El título será el nombre del juego que recibamos como modelo; en el cuerpo del panel vamos a poner la imagen (como guardamos la url en nuestro modelo a una etiqueta img le damos como src el valor @Model.ImagenUrl) y para terminar pondremos la descripción del juego. Las etiquetas h1, h2, h3,h4, h5 y h6 permiten definir títulos siendo h1 el de mayor tamaño; el hr pinta una línea horizontal (para separar un poco los datos y que se vean ordenados); la etiqueta p define un párrafo.

Para probar esta vista necesitas saber el id de alguno de los juegos, por defecto arracan desde 1, si borraste alguno de los que creaste probablemente salga un error, intenta con otros valores. Por ejemplo, la url localhost:####/Home/MostrarVideojuego/1 sirve para obtener el videojuego con id = 1.

En próximo capítulo veremos como crear la vista principal y los scripts que harán los llamados ajax para cargar las vistas parciales que hoy construímos.

Espero sus comentarios, dudas, y si les ha gustado ¡un like!

¡Nos vemos la próxima!