Plantillas de MDBootstrap listas para usar y cómo hacer la integración con ASP.NET MVC

Utilizaremos el fantástico mdbootstrap.com para embellecer nuestras aplicaciones web

Aquí encontrarás una descripción paso a paso sobre cómo integrar las plantillas de MDBootstrap (un framework construído sobre Bootstrap para desarrollar frontends con Material Design) en tu aplicación .Net y un completo juego de plantillas (templates) gratuitas listas para utilizar.

Este artículo también se encuentra en inglés en el siguiente enlace (sitio oficial de MDB). Además, hay otro artículo sobre cómo integrar MDB a .Net sin el uso de ninguna plantilla en este enlace.

Tendrás absoluto control sobre el proyecto y si debes actualizar alguna dependencia lo lograrás con absoluta libertad. Si necesitás algún componente (como un botón, grilla, tarjeta, etc.) podés buscarlo en el submenú Components del sitio web de MDBootstrap (https://mdbootstrap.com/docs/jquery/components/demo). También podés copiar algo de código desde las plantillas y usar el nuevo “Design Blocks” con secciones listas para usar.

Empecemos con la integración de una plantilla de MDBootstrap a una aplicación existente. Luego podrás encontrar enlaces a las plantillas listas para usar.

1- Versión de Bootstrap

Primero que todo, debes chequear que la versión de la librería Bootstrap que utilizás es la misma que la plantilla que hayas elegido (en el proyecto .Net puedes hacer botón derecho sobre Referencias, luego NuGet y en la solapa Instalados buscar bootstrap; si no está la instalamos). Para chequear eso, bajamos la plantilla desde este enlace y vamos a la carpeta js para abrir el archivo bootstrap.js. Al inicio del archivo encontraremos la versión:

Primeras líneas del archivo bootstrap.js (en la segunda línea se ve la versión)

En este caso es la 4.3.1. Ahora, en tu proyecto ASP.NET MVC actualizá el paquete bootstrap con el Administrador de Paquetes NuGet (botón derecho del ratón sobre Referencias).

2 — Popper.min.js

Hay una librería JavaScript que tuve que reemplazar para que todo funcione bien: popper.min.js. Simplemente mové el archivo desde la plantilla a la carpeta Scripts del proyecto ASP.NET MVC y reemplazá el archivo.

3 — MDB.js y MDB.css

Botón derecho del mouse en la carpeta Content de tu aplicación ASP.NET MVC y haremos click en “Agregar ítem existente”. Luego seleccionamos el archivo “mdb.min.css” dentro de la carpeta “css” de la plantilla. Haremos lo mismo pero con la carpeta “Scripts” de tu proyecto ASP.NET y el archivo “mdb.min.js” dentro de la carpeta “js” de la plantilla.

4- Vista Layout

Tenés que copiar todo lo que se encuentra por encima del tag html “main” y pegarlo en el archivo _Layout.cshtml dentro de la carpeta Views/Shared. Además, necesitarás las sección que están después de esas (“footer” por ejemplo).

5 — Index

El contenido del div de clase “container” dentro del tag html “main” será el contenido del archivo Index.cshtml de la carpeta Views.

6 — Ítems de la Navbar

Si querés agregar páginas al menú, podés editar el tag html “navbar” en el archivo _Layout.cshtml.

7 — Estilos específicos

Abrí el archivo “style.css” dentro de la carpeta css de la plantilla. Copiá todo el contenido y pegalo en el archivo “Site.css” dentro de la carpeta “Content” de tu aplicación.

Si la página home de la plantilla tiene algún tag “style” podés copiar ese contenido al mismo archivo Site.css.

Asegurate de sobreescribir el contenido existente del archivo original “Site.css” del proyecto ASP.NET.

8 — Fuentes (opcional)

Quizás la plantilla necesite alguna fuente en particular. La podés agregar en la carpeta que desees y luego cambiar las referencias en el archivo .css. Podés tomar como ejemplo las plantillas de GitHub de los links de la sección siguiente.

Para saber si hay algún otro recurso faltante podés utilizar “Inspeccionar” (en Chrome, botón derecho del mouse y opción “Inspeccionar”, pestaña consola) la página y buscar errores.

9 — Diseño básico para las páginas

Prefiero utilizar el la distribución de componentes en grilla (grid layout) para darle estructura básica a mis páginas. Lo que debes saber es que el “grid layout” de Bootstrap consiste básicamente en:

a. Un “div” con clase “row”.

b. Una o hasta 12 “div” clase “columnas” que sumarán 12.

Por ejemplo, como una grilla de dos columnas:

HTML de grilla de dos columnas (como una tabla pero “hecha con divs”)

Otro ejemplo, con una grilla de una sola columna:

Entonces, lo que tenés que hacer es reemplazar toda la estructura de tus páginas con esta nueva estructura y las clases utilizadas por MDBootstrap. Afortunadamente, la plantilla ASP.NET MVC predeterminada utiliza Bootstrap por lo que es altamente probable que estés utilizando alguno de estos componentes. Si debes reemplazar algunas clases o una frase en particular intentá utilizar la opción “Reemplazar” en el submenú Editar de Visual Studio (o con la combinación de teclas Control + H).

So, what you have to do is replace all the structures in your pages with this new structure and the classes used by MDBootstrap. Fortunately, the default ASP.NET MVC template uses bootstrap so is highly possible that you are already using some of these components. If you have to replace some classes or particular strings try to use the “Replace” option in the Edit submenu (Ctrl + H).

Plantillas listas para usar

Podés descargarlas y empezar tu aplicación desde ellas!

En algunas de las plantillas encontrarás páginas de ejemplo (como About, Contacto, etc.) para construir tus propias páginas.

¡Si tenés dudas, podés contactarnos!

Plantilla MDB Dashboard (tablero de indicadores y/o gráficos)

Incluye las páginas Perfil, Tablas, Mapas y Órdenes (vacías, para completar con tu contenido).