3

primero que nada, muchas gracias por dedicarse a leer la pregunta!

Les comento, hace un tiempo estoy trabajando en un proyecto con ASP.NET MVC 5, resulta que de un día para el otro, al abrirlo, el estilo del _Layout.cshtml se rompió completamente (sin hacer ningún cambio en el aproximadamente 10 días atras)

Volví al _Layout.cshtml que genera automáticamente Visual Studio y el problema persiste..

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

Los bundles también los tengo por defecto

BundleConfig.cs

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Utilice la versión de desarrollo de Modernizr para desarrollar y obtener información. De este modo, estará
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));


    }

Cabe destacar, que hace un tiempo actualicé a Bootstrap 4.0, sin embargo, actualicé y todo siguió funcionando de manera correcta, recién ahora, 10 días después explotó todo

En la consola del navegador no hay ningun error de problema de lectura de ninguna librería, sin embargo, dejo una imágen para que se aprecie lo que se genera al compilar.

En la imágen falla el navbar y se nota un importante cambio en el botón de Learn More y la fuente

Captura del Home con el layout (observar el navbar)

Cuando lo que debería generar es lo siguiente.

Captura sin error

Bueno gente, antes que nada muchas gracias y espero que alguno tenga la idea de porque está pasando esto!

Saludos!

3
  • 1
    La plantilla por defecto de ASP.NET MVC no es compatible con Bootstrap 4, por eso los fallos de tu página, ¿Has considerado escribir nuevamente la vista para adaptarla a bootstrap 4?
    – NaCl
    Commented el 20 mar. 2018 a las 12:02
  • @NaCI muchas gracias, actualmente estoy en bootstrap 3 y el problema persiste, lo que note es que no se están generando los ::after y ::before en el html renderizado, sabes porque podrá ser? Posiblemente por ahí ande el problema, de nuevo, Gracias! Commented el 20 mar. 2018 a las 12:15
  • 1
    Ahí te he dejado una respuesta :^)
    – NaCl
    Commented el 20 mar. 2018 a las 12:36

1 respuesta 1

3

Esto pasa porque la plantilla por defecto de ASP.NET MVC no es compatible con Bootstrap 4, he intentado cambiar tu plantilla para que funcione con Bootstrap 4, ten en cuenta que la librería tiene las siguientes dependencias:

  • Popper.js
  • jQuery Slim

y que he cambiado los @Render de tu vista porque .NET Fiddle no acepta esos métodos, sin más preambulo, te dejo lo que me funcionó:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <div class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="container">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li>@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link" })</li>
                        <li>@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <!-- Aquí va tu contenido :^) @RenderBody -->
            <hr />
            <footer>
                <p>© @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
    </body>
</html>

El código de arriba fue convertido a una vista normal, más que para un _Layout.cshtml, no usar en Layouts, para hacerlo funcionar como Layout, agregar el método @RenderBody() dentro del div con clase body-content

Esto pasa porque los nombres de muchas clases (Como navbar-fixed-top) fueron cambiados para un mejor uso, de igual forma tambien cambia la forma en la que los links se generan, hay que agregarles una clase nav-link para que aparezcan como parte del navbar, aquí te dejo un fiddle de como lo hice funcionar con la plantilla que aparece por defecto en la página de Bootstrap.

De igual forma haría bien que te pases por el getting started de Bootstrap 4 para que veas cuales son las etiquetas meta y las dependencias que necesitas para utilizar Bootstrap 4.

Para terminar, sería buena idea que agregaras un nuevo ScriptBundle a tu colección, para que solo tengas que modificar los nombres de las clases CSS en tu vista:

bundles.Add(new ScriptBundle("~/bundles/popper").Include(
          "~/Ruta/de/popper.js"));

No he trabajado muy bien con ScriptBundle, pero debería funcionar al hacer @Scripts.Render("~/bundles/popper") y dejar tu plantilla lista para Bootstrap 4.

3
  • Muchísimas gracias!, resultó siendo una combinación de cosas.. resulta que el problema no se solucionaba cuando volvía a Bootstrap 3 porque al parecer Chrome estaba guardando el .css de Bootstrap 4 en caché, al hacer Ctrl+F5 noté en la consola que se agregó una linea de código.. así que fui, borré el caché completo de Chrome y levantó bien con el 3, de todos modos sigo en la necesidad de migrar a Bs4 así que te recontra agradesco! Saludos! Commented el 20 mar. 2018 a las 12:42
  • Prueba a utilizar el código arriba en tu _Layout.cshtml luego de actualizar a Bs4, recuerda agregar la librería Popper.js e intenta realizar los cambios, seguro que te funciona :^)
    – NaCl
    Commented el 20 mar. 2018 a las 12:43
  • 2
    Funcionó de diez, muchísimas gracias! Commented el 20 mar. 2018 a las 12:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.