none
instalar bootstrap en MVC4 ayuda RRS feed

  • Pregunta

  • hola muy buenas a todos vengo a ustedes a pedirle algo de ayuda nuevamente gggg la verdad es que no he podido instalar bootstrap en MVC4 (estoy usando visual estudio 2013 no se si hace la diferencia pero lo menciono)de la forma correcta cada ves que instalo bootstrap en una plantilla de MVC4  no me funicona algo o me sale algun error y es pordemas decir que no me funciona el bootstrap instalado quisiera que me ayuden porfavor en eso como instalarlo correctamente que tengo que instalar primero que despues como validar y todo eso porfavor de antemano les agradesco su tiempo y su ayuda

    hector

    martes, 19 de julio de 2016 16:39

Todas las respuestas

  • Hola oconner999,

    Lo has descargado mediante Nuget?

    Vas a tu proyecto, click derecho Administrar packetes Nugets y lo instalas.

    Qué error te muestra? Qués es lo que no funciona? Explica con más detalle.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    martes, 19 de julio de 2016 16:45
  • oconner999,

    ¿Por qué no haces uso de MVC 5 con Visual Studio 2015? Lo digo para que no te quedes relegado con la tecnología, incluso ya con MVC 5.

    La plantilla para un proyecto MVC 4 no viene con BootStrap así que queda realizar la instalación a mano y nada mejor que delegar la tarea a NuGet.

    Ve al menú Herramientas > Administrador de paquetes NuGet > Consola del Administrador de paquetes

    En la consola escribes:

    PM> Install-Package bootstrap -Version 3.3.6


    Espero que la información proporcionada te haya sido de utilidad, quedo atento a tus comentarios.
    martes, 19 de julio de 2016 16:53
  • este es el error q tengo cuando intento usar bootstrap ya lo instale de todas las formas

    Error de servidor en la aplicación '/'.

    No se ha llamado al método "RenderBody" para la página de diseño "~/Views/Shared/_Layout.cshtml".

    Descripción: Excepción no controlada al ejecutar la solicitud Web actual. Revise el seguimiento de la pila para obtener más información acerca del error y dónde se originó en el código. 

    Detalles de la excepción: System.Web.HttpException: No se ha llamado al método "RenderBody" para la página de diseño "~/Views/Shared/_Layout.cshtml".

    Error de código fuente: 
    Se ha generado una excepción no controlada durante la ejecución de la solicitud Web actual. La información sobre el origen y la ubicación de la excepción pueden identificarse utilizando la excepción del seguimiento de la pila siguiente.

    Seguimiento de la pila: 
    [HttpException (0x80004005): No se ha llamado al método "RenderBody" para la página de diseño "~/Views/Shared/_Layout.cshtml".]
       System.Web.WebPages.WebPageBase.VerifyRenderedBodyOrSections() +192202
       System.Web.WebPages.WebPageBase.PopContext() +316
       System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +95
       System.Web.WebPages.<>c__DisplayClass7.<RenderPageCore>b__6(TextWriter writer) +233
       System.Web.WebPages.HelperResult.WriteTo(TextWriter writer) +10
       System.Web.WebPages.WebPageBase.Write(HelperResult result) +71
       System.Web.WebPages.WebPageBase.RenderSurrounding(String partialViewName, Action`1 body) +64
       System.Web.WebPages.WebPageBase.PopContext() +246
       System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +95
       System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) +258
       System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) +115
       System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +295
       System.Web.Mvc.ControllerActionInvoker.InvokeActionResult(ControllerContext controllerContext, ActionResult actionResult) +13
       System.Web.Mvc.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() +23
       System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +242
       System.Web.Mvc.<>c__DisplayClass1c.<InvokeActionResultWithFilters>b__19() +21
       System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +177
       System.Web.Mvc.Async.<>c__DisplayClass2a.<BeginInvokeAction>b__20() +89
       System.Web.Mvc.Async.<>c__DisplayClass25.<BeginInvokeAction>b__22(IAsyncResult asyncResult) +102
       System.Web.Mvc.Async.WrappedAsyncResult`1.End() +57
       System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult) +43
       System.Web.Mvc.<>c__DisplayClass1d.<BeginExecuteCore>b__18(IAsyncResult asyncResult) +14
       System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +23
       System.Web.Mvc.Async.WrappedAsyncResult`1.End() +62
       System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +57
       System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +23
       System.Web.Mvc.Async.WrappedAsyncResult`1.End() +62
       System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult) +47
       System.Web.Mvc.Controller.System.Web.Mvc.Async.IAsyncController.EndExecute(IAsyncResult asyncResult) +10
       System.Web.Mvc.<>c__DisplayClass8.<BeginProcessRequest>b__3(IAsyncResult asyncResult) +25
       System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +23
       System.Web.Mvc.Async.WrappedAsyncResult`1.End() +62
       System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) +47
       System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) +9
       System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +9658236
       System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155


    hector

    miércoles, 20 de julio de 2016 16:42
  • oconner999,

    Pero la excepción que obtienes nada tiene que ver con BootStrap, la excepción la obtienes porque no se encuentra el método RenderBody() en el Layout.

    Ve al explorador de soluciones, busca la carpeta Shared, dentro encontrarás el archivo _Layout.cshtml, el layout debe de invocar al método RenderBody().

        <body>       
            <...>
            @RenderBody()
            <...>
        </body>

    Coméntanos como te fue

    miércoles, 20 de julio de 2016 16:55
  • gracias por la sugerencia ya me funciona pero algo me anda mal aca dejo como me sale cuando intento hacer un menu desplegable

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
        <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
    
        <div class="row">
            <div class="col-lg-12">
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Registrar
                        <samp class="caret"></samp>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"></a>uno</li>
                            <li><a href="#"></a>dos</li>
                            <li><a href="#"></a>tres</li>
                        </ul>
                    </button>
                </div>
            </div>
    
        </div>
        <h1>Hello, world!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        @RenderBody()
    
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
    </html>
    

    en que he fallado


    hector

    miércoles, 20 de julio de 2016 17:20
  • oconner999,

    <div class="col-lg-12">
        <div class="dropdown">
            <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Registrar
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dLabel">
                <li><a href="#"></a>uno</li>
                <li><a href="#"></a>dos</li>
                <li><a href="#"></a>tres</li>
            </ul>
        </div>            
    </div>

    miércoles, 20 de julio de 2016 17:31
  • gracias por tu ayuda pero nada y estube leyendo en otro foro donde me dicen q tengo q agregar el

    BootstrapBundleConfig.cs y resgitrarlo en Global.asax

    y no lo tengo fijense

    perque por mas q ponga codigo bootstrap (si puedo llamarlo asi) no me va a funcionar por ahora nose como hacer eso aca les dejo lo q me salio luego de hacer las correcciones

    aun no es menu desplegable


    hector

    miércoles, 20 de julio de 2016 17:56
  • oconner999,

    Ve al archivo BundleConfig.cs de la carpeta App_Start, dentro del archivo valida que tengas los siguientes bundles:

    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"));

    En el HEAD valida tener las referencias al bundle '/Content/css'

    <head>
        <...>
        @Styles.Render("~/Content/css")
        <...>
    </head>

    Y al final del Body valida tener la referencia al bundle '/bundles/bootstrap'

        <...>
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>

    Cuida no realizar doble referencia. 

    miércoles, 20 de julio de 2016 18:11
  • esto es lo q me salio de la correcion q ise pero me sale el boton menu pero no me desplega mis submenu

    y asi quedo el bundle luego q añadi las referncias

    using System.Web;
    using System.Web.Optimization;
    
    namespace MvcApp
    {
        public class BundleConfig
        {
            // Para obtener más información acerca de Bundling, consulte http://go.microsoft.com/fwlink/?LinkId=254725
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                            "~/Scripts/jquery-ui-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                            "~/Scripts/jquery.unobtrusive*",
                            "~/Scripts/jquery.validate*"));
    
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
                //esto de ca lo quite por lo puse abajo junto con css de bootstrap
              //  bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
    
                bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));
    
                //lo que introduje incluyendo el Site.css
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js",
                          "~/Scripts/bootstrap.mimjs",
                          "~/Scripts/respond.js"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                                      "~/Content/bootstrap.css",
                                      "~/Content/bootstrap.min.css",
                                      "~/Content/bootstrap-theme.min.css",
                                      "~/Content/bootstrap-theme.css",
                                      "~/Content/site.css"));
            }
        }
    }

    y aca el como referencie en mi pagina Html

    <!DOCTYPE html>
    <html lang="es">
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - Mi aplicación ASP.NET MVC</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")
            @Styles.Render("~/Content/bootstrap")
       
        </head>
        <body>
                    <div class="col-lg-12">
                        <div class="dropdown">
                            <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Registrar
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="#"></a>uno</li>
                                <li><a href="#"></a>dos</li>
                                <li><a href="#"></a>tres</li>
                            </ul>
                        </div>
                    </div>
            @RenderBody()
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @RenderSection("scripts", required: false)
        </body>
    </html>
    

    en que pude fallar

    teambien estoy lleyendo en otro foro aqui

    y este otro tambien aqui

    esta en ingles lo traduje con google ggg

    • Editado oconner999 miércoles, 20 de julio de 2016 19:25
    miércoles, 20 de julio de 2016 19:09
  • oconner999,

    De acuerdo. Fíjate en el bundle ~/bundles/bootstrap agregas "~/Scripts/bootstrap.mimjs", está mal escrito, debería ser: "~/Scripts/bootstrap.min.js". Por otro lado, en el HEAD haces referencia a @Styles.Render("~/Content/bootstrap"), pero ese bundle no existe, retíralo.

    miércoles, 20 de julio de 2016 23:43
  • tambien tengo q poner el bundle en el head por lo estoy poniendo en el body el bundle

    <body> <div class="col-lg-12"> <div class="dropdown"> <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Registrar <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dLabel"> <li><a href="#"></a>uno</li> <li><a href="#"></a>dos</li> <li><a href="#"></a>tres</li> </ul> </div> </div> @RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body>


    quedaria algo asi

     <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - Mi aplicación ASP.NET MVC</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")
            @Scripts.Render("~/bundles/bootstrap")
            @Styles.Render("~/Content/bootstrap")
       
        </head>
    
    
    


    hector

    viernes, 22 de julio de 2016 13:02
  • oconner999,

    Nota que no tienes registrado ningún Bundle llamado "~/Content/bootstrap", por otro lado, sólo define una referencia a un Bundle en el Layout, no las repliques.

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <meta charset="utf-8" />
            <title>@ViewBag.Title - Mi aplicación ASP.NET MVC</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            <meta name="viewport" content="width=device-width" />
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")        
    </head>
    
    <...>
    
    	@RenderBody()
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/bootstrap")
            @RenderSection("scripts", required: false)
    </body>


    Espero que la información proporcionada te haya sido de utilidad, quedo atento a tus comentarios.
    viernes, 22 de julio de 2016 21:22