Tiny post – Solución al error de multiples modales de Boostrap

Mas allá de si es correcto tener mas de una ventana modal abierta en simultaneo o si el cliente siempre tiene la razón – discusión que quedo a medias con @camboris – si trabajan con Twitter Bootstrap posiblemente tengan problemas con el primer tema. Es posible que cuando quieran abrir mas de un modal al mismo tiempo el navegador falle :

Crash! :(

Crash! 😦

En este post explican el motivo del problema (que a grandes rasgos se produce por una recursividad infinita entre ambos modales al querer tomar el foco) y una simple solución al problema (comentar la línea de código conflictiva de la librería Boostrap  :)):

Línea que genera el problema

Línea que genera el problema

Espero que les sea de utilidad!

ASP.NET MVC 5 – Bootstrap en los templates de MVC

Otra de las características que trae ASP.NET MVC 5 es que las plantillas de proyectos utilizan por default Twitter Bootstrap  – actualmente en la versión 3.0.0 – como framework para nuestras interfaces de usuario.

Bootstrap, para quienes no lo conozcan, es un User Interface Framework open source desarrollado y mantenido para el equipo de desarrollo de Twitter. Este marco de trabajo nos permite construir, bajo un sistema de cuadrillas y CSS3, páginas responsivas. El diseño  web responsivo establece tener una única interfaz de usuario que se ajusta-alinea automáticamente a las distintas resoluciones de los distintos dispositivos (PCs, tablets, telefonos…). Además nos proporciona de estilos y recursos que hacen que nuestras páginas luzcan más modernas, atractivas y compatibles con las mayorías de los navegadores web.

Página creada con Boostrapt

Página creada con Boostrapt

Si prestan atención, cuando generamos un nuevo proyecto ASP.NET MVC 5 en VS2013 entre los scripts JS está incluida la librería de Bootstrap:

Librerías Boostrapt

Librerías Boostrapt

También están definidos los bundles correspondientes- archivo BundleConfig.cs – tanto para las librerías JS como para la hoja de estilo CSS:

Bundles de Boostrapt

Bundles de Boostrapt

Y por último las referencias en la vista _Layout.cshtml:

Referenciando a Boostrapt desde las vistas

Referenciando a Boostrapt desde las vistas

Otro aspecto importante es que todas las vistas generan por defecto código basado en este framework:

El código de las vistas basado en Boostrapt

El código de las vistas basado en Boostrapt

Si ejecutamos la aplicación y ajustamos el tamaño del navegador a una resolución acorde a la de un dispositivo móvil veremos como actúa el diseño responsivo (todo el contenido se ajusta en la pantalla y el menú superior es agrupado dentro de un icono que se expande al hacer click):

Diseño responsivo en acción

Diseño responsivo en acción

Para que quede claro la intención del post no es enseñarles a trabajar con Boostratp sino comentarles la adopción de este como framework UI por defualt. Si quieren conocer más pueden hacerlo desde aquí.

Antes de finalizar, es importante aclarar que la utilización de Bootstrap es solo una sugerencia (particularmente lo recomiendo), pero es posible utilizar cualquier otra librería o simplemente no utilizar ninguna.

Quienes deseen más de info sobre el tema les recomiendo este artículo de Tom Dykstra y este artículo de mi amigo Julio Avellaneda.

Espero que les sea de utilidad!