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

El tema de Bootstrap

Para definir cómo se ve nuestra aplicación es bastante práctico utilizar plantillas como base para nuestros diseños. En mi caso, siempre me gusta empezar con una plantilla bootstrap y sobre ella comenzar a montar el diseño final; para este ejercicio, simplemente veremos cómo escoger una de esas plantillas y montarla en MVC (en futuros tutoriales ahondaremos en este tópico).

Paso 1

Abrimos Bootswatch, un repositorio de temas gratuitos de bootstrap.

Paso 2

Escogemos el alguno de los temas disponibles. Al abrirlo aparecerá una página donde podemos ver cómo luce el tema en nuestro navegador. Así mismo, es posible ver el código de cada uno de los componentes del ejemplo para utilizarlos en nuestra aplicación.

Hacemos clic en el menú superior en el desplegable con el mismo nombre del tema y luego hacemos clic en bootstrap.css.

Paso 3

Se abre una ventana donde está todo el código del tema en css, seleccionamos todo y copiamos el contenido. Abrimos en el proyecto la carpeta Content y dentro el archivo bootstrap.css y sobreescribimos su contenido con el que previamente copiamos.

Repetimos pasos 2 y 3 para el archivo bootstrap.min.css. En este punto ya hemos cambiado el tema del bootstrap, puedes probar ejecutando la aplicación.

El Layout

A continuación vamos a editar el Layout, que es el define aquellos los componentes de la interfaz gráfica que deberán aparecer en todas las vistas, tales como menús, títulos, footers, entre otros.

Paso 4

Abrimos el archivo _Layout.cshtml que se encuentra en Views -> Shared (como se ve en la imagen). Dicho archivo contiene el layout de nuestro proyecto MVC.

Paso 5

El archivo que abrimos está definido con html y Razor. Pongamos atención en los siguientes puntos:

A: Dentro del tag title, vamos a editar la parte después del - y vamos a ponerle el nombre que deseemos a nuestra aplicación. Yo le he puesto Mis juegos. Ese nombre es el que aparece como título de página en el navegador. La instrucción @ViewBag.Title toma el dato que definimos previamente en la vista, lo que permite tener una parte del título variable en función de la ubicación del usuario.

B: Dentro del div que define el navbar podemos utilizar dos clases diferentes que definen el estilo de la barra de navegación: navbar-inverse y navbar-default. Puedes ensayar a cambiarlos y escoger el que más te guste.

C: Vamos a cambiar el texto del primer vínculo (definido con el helper Html.ActionLink, que lo único que hace es retornar un vínculo html, es decir un elemento "<a href="...">" con el texto indicado como primer parámetro, a la acción indicada en el segudo parámetro, al controlador indicado en el tercer parámetro), puedes ponerle el mismo nombre que usaste para el título de tu aplicación.

Paso 6

Bajando un poco más en el archivo:

D: Vamos a modificar los demás vínculos de la barra de navegación, reemplazando las tres líneas que se ven en la imagen por el siguiente código.

Estamos definiendo un botón para la página principal y un botón con menú desplegable para administrar los géneros y los videojuegos que se muestran en nuestra aplicación

E: Está es la sección en la que se reemplaza el contenido que definimos dentro de cada una de nuestras vistas. Por ejemplo, si llamamos a Home/Index la vista que retorna específicamente ese controlador es ubicada dentro del Layout en la parte que se hace el llamado RenderBody().

F: En el footer podemos cambiar el mensaje del copyright por uno propio para que aparezca en todas las páginas.

G: Aquí es dónde son insertados los scripts de jQuery que definimos en capítulos anteriores. Debe hacerse en este punto para asegurarse que las librerías javascript fueron previamente cargadas, la idea es generalmente poner lo más al final posible la definición de scripts y librerías, para que el resto de la página cargue rápidamente, así rankearemos mejor en los buscadores y los usuarios no tendrán que esperar algunos segundos de más mientras cargan los scripts para ir visualizando el contenido del site.

Paso 7

Para asegurarnos que la edición de los contenidos del sitio se realiza sólo por usuarios autenticados, agregamos el atributo [Authorize] a los controladores de Géneros y Videjuegos, como se ve en la siguiente imagen.

Paso 8

¡Finalmente podemos ejecutar y probar toda nuestra aplicación!

Aquí les dejo el repositorio Intro-ASP.NET-MVC con todo lo que hemos hecho y el commit de lo que construímos en este capítulo.

Palabras finales

Espero que esta serie de tutoriales les haya servido para iniciarse en la programación de aplicaciones web, si es así háganmelo saber dejando un like y comentado qué más les gustaría aprender.

Sé que hemos visto muchas cosas en este Crash Course, no se puede pretender convertirse en un experto, este no más que el primer paso. Los invito a que estén atentos a los próximos contenidos que vamos a publicar en The Science of Code. También pueden visitar la página oficial de ASP para aprender más.

¡Hasta la próxima!