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

La vista principal

Ya que tenemos nuestras vistas parciales terminadas, es hora de realizar la vista principal.

Paso 1

Vamos a la carpeta Views > Home y abrimos el archivo Index.cshtml. Borramos todo su contenido excepto lo que se ve en la imagen (cambiando el título por Bievenido, o por el que ustedes quieran ponerle a su página de inicio).

Paso 2

Dentro del archivo vamos a tener nuestra vista principal, definiremos unos contenedores en los que posteriormente cargaremos las vistas parciales que nos retorne el servidor. Como estamos usando Bootstrap, vamos a definir un div con la clase row( que representa una fila) que contendrá dos divs que representarán dos columnas, una donde estará el listado de los juegos (la identificaremos con el html id todos, para poder accederla luego desde nuestro script) y otra donde mostraremos el juego seleccionado (la que tiene el html id videojuego).

Como pueden ver, los divs internos tienen las clases col-sm-4 y col-sm-8. Parte del diseño reponsivo con Bootstrap, es decir, el que se adapta a todo tipo de pantallas (celulares, tablets, computadores de escritorio) se define con un sistema de grillas. En resúmen, el ancho de la pantalla debe sumar 12 (por ejemplo col-sm-4 y col-sm-8) y con xs, sm, md y lg definimos en que pantallas el contenido se apila. Por ejemplo, nuestras columnas estarán una a la izquierda con tamaño 4 y una a la derecha con tamaño 8 en dispositivos sm (pequeños) o más grandes, pero en xs (muy pequeños), el contenido se apilará uno sobre el otro. Para más información pueden ver la documentación oficial, pero sobre todo, experimentar por su propia cuenta.

Los scripts

Ya que tenemos preparadas todas nuestras vistas, es hora de programar cómo se realizarán los llamados ajax para mostrar los contenidos.

Paso 3

En MVC tenemos dos formas de hacer los scripts, una es ponerlos directamente en la vista en una sección denominada scripts(que veremos con mayor atención en el último cápitulo al tratar el tema de layouts), esta opción es para cuándo tenemos códigos muy específicos y cortos que sólo una vista va a utilizar; también podemos crear un archivo .js y tener todo un poco más ordenado y centralizado. En nuestro caso haremos lo más práctico, pero ya saben que si las cosas se crecen pueden hacerlo mejor.

Dicho esto, debajo de la vista que acabamos de realizar en el mismo archivo que estábamos (Views/Home/Index.cshtml), vamos a agregar nuestro script para cargar el menú con todos los juegos. La idea es, apenas cargue la página, hacer un llamado ajax a la acción MostrarTodos (que definimos en el capítulo anterior), así obtendremos la partial view con el listado juegos para ponerla dentro del div con el html id todos.

Dentro de la etiqueta script es dónde programamos todo nuestro código javascript. En jQuery, cuando ponemos una función dentro de $( ); estamos indicando que se ejecute cuando haya terminado de cargar la página. En nuestro caso dicha función hace un llamado ajax con jQuery a la acción MostrarTodos del controlador Home. Si todo sale bien ejecuta la parte del done, que es una función que recibe los datos del llamado ajax y luego accede con $('#todos') al elemento html con id todos (aquí les dejo los posibles selectores que pueden usar) y le cambia su contenido por el que recibió en el llamado ajax. Si hay un error muestra un mensaje emergente (no es muy amigable, pero funciona para nuestro porpósito, luego pueden cambiarlo por otra cosa).

Programar vistas en javascript puede resultar confuso al principio, pero también es cuestión de práctica.

Paso 4

Ahora vamos a definir el script para cuando se haga clic en cualquiera de los botones del listado que acabamos de cargar. Es de anotar que como se realizó la carga con ajax, no podemos usar el .click()de jQuery, sino que debemos utilizar el .on(). Si el menú fuera precargado sí podríamos usar el .click().

Dicho esto, el .on() se le debe pegar a un elemeto estático, en nuestro caso lo haremos del div con id todos. A continuación se le indica que cuando le hagan 'click' en algún elemento dentro de él que sea un a (un vínculo) que tenga un atributo data-url(ver paso 8 del capítulo anterior) ejecute cierta función, como se ve en el siguiente código (que debe ir debajo del que ya programamos y dentro de la misma etiqueta script).

En la función, lo primero que haremos cuando le den clic es sacar la url que guardamos en el atributo data-url del botón, eso lo hacemos tomando del $(this), es decir, del botón al que le han dado clic, el dato llamado url, como se ve en la línea 11.

Se hace el llamado ajax, como en el paso anterior. Si todo sale bien ponemos la vista parcial el div con id videojuego, y al final de la función removemos la clase css active, que muestra un botón con un color especial indicando que esta activo, a cada uno de los a dentro de el elemento con id todos (recordemos que ese es en el que hemos cargado el listado con todos los juegos) y sólamente al elemento actual le añadimos esa clase. De esa forma en el listado de juegos podemos ver cuál es el que actualmente tenemos seleccionado (ver líneas 23 y 26).

Al final, el index debería verse así.

¡Lo hemos conseguido!

Por fin podemos ejecutar el servidor y probar cómo ha quedado nuestro trabajo. Deberían tener algo más o menos así:

Todo debería actualizarse rápidamente y sin necesidad de recargar toda la página. Además las cosas deberían ser reponsivas y adaptarse al tamaño de la pantalla, de momento, es bueno tener en cuenta que el menú de los juego no puede ser muy grande para que se vea bien en dispotivos móviles (luego podríamos hacer que se escondiera y que automáticamente realizará un scroll al escoger un juego). Sin embargo, ¡todo luce muy bien para ser nuestro primer trabajo en MVC!

Aquí les dejo el repositorio Intro-ASP.NET-MVC con todo lo que hemos hecho y el commit de lo que construímos en lso dos últimos capítulos.

Como nuestros botones no tienen un href, podrán ver que el navegador no muestra el ícono de seleccionar cuando pasamos sobre ellos, eso lo pueden corregir añadiendo esta línea en el archivo Site.css que se encuentra en la carpeta Content de nuestro proyecto.

Espero sus comentarios y sus dudas. Si les ha gustado ¡dejen un like!

Nos vemos en el siguiente capítulo de esta Introducción Rápida a ASP.NET MVC.