Bootstrap is not being rendered by _Layout

Question

Bootstrap is not being rendered by _Layout

Asked 6 years, 11 months ago

Viewed 343 times

1

I have this layout page. This layout already came, I didn’t make it. I just don’t understand why it was created if I opted for a MVC Empty(Empty) project, but it’s not bothering me.

    <!DOCTYPE html>
    <html ng-app="PedidoApp">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>

        @Styles.Render("~/bundles/bootstrap")
        @Styles.Render("~/bundles/Estilo")
        @Scripts.Render("~/bundles/angularjs")
        @Scripts.Render("~/bundles/app")

    </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" })
                @Html.ActionLink("Pedido", "Pedido", "Pedido", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Logística e Transporte</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

On my page, I made a Fieldset as a test:

<form>
    <fieldset class="scheduler-border">
        <legend class="scheduler-border">Start Time</legend>
        <div class="control-group">
            <label class="control-label input-label" for="startTime">Start :</label>
            <div class="controls bootstrap-timepicker">
                <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
                <i class="icon-time"></i>
            </div>
        </div>
    </fieldset>
</form>

And my file BundleConfig.cs

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.IgnoreList.Clear();
            bundles.Add(new StyleBundle("~/bundles/bootstrap").Include(
                 "~/Content/bootstrap.min.css",
                 "~/Style/jumbotron-narrow.css"));

            bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
            "~/Scripts/angular.js"));

            bundles.Add(new ScriptBundle("~/bundles/Estilo").Include(
            "~/Content/Estilo.css"));
        }
    }

I put a Jumbotron and it didn’t work. That file BundleConfig.cs i made in hand. Below a screenshot of the screen with the fieldset. See that the fieldset does not close and two lines appear in parallel.

My global.asax.Cs

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

EDIT1

Failed to load Resource: the server responded with a status of 404 (Not Found) angular.js:4957 Uncaught Error: [$injector:modulerr] Failed to instantiate module Pedidoapp due to: Error: [$injector:nomod] Module 'Pedidoapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the Second argument. http://errors.angularjs.org/1.6.6/$injector/nomod? P0=Pedidoapp at http://localhost:29348/Scripts/angular.js:116:12 at http://localhost:29348/Scripts/angular.js:2297:17 at ensure (http://localhost:29348/Scripts/angular.js:2218:38) at module (http://localhost:29348/Scripts/angular.js:2295:14) at http://localhost:29348/Scripts/angular.js:4933:22 at foreach (http://localhost:29348/Scripts/angular.js:410:20) at loadModules (http://localhost:29348/Scripts/angular.js:4917:5) creatat Injector (http://localhost:29348/Scripts/angular.js:4839:19) at doBootstrap (http://localhost:29348/Scripts/angular.js:1949:20) at bootstrap (http://localhost:29348/Scripts/angular.js:1970:12) http://errors.angularjs.org/1.6.6/$injector/modulerr? P0=Pedidoapp&p 1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'Pedidoapp'%20is%20not%20available! %20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it. %20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument. %0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fnomod%3Fp0%3DPedidoApp%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A116%3A12%0A%20%20%20at%20http%3A%2F%localhost%3A29348%2Fcripts%2Fcripts%2Fangular.js%3A2297%3A17%0A%20%20%20%20at%20at%20%20%20%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A2218%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A2295%3A14)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A29348%2Fcripts%2Fjs%3A4933%3A22%0A%20%20%20%20at%20forEach%20%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A410%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A4917%3A5)%0A%20%20%20%20at%20createInjector%20(http%2A%2Flocalhost%3A29348%2Fcripts%2Fangular.js%3A4839%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A1949%3A20)%0A%20%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A1970%3A12) at http://localhost:29348/Scripts/angular.js:116:12 at http://localhost:29348/Scripts/angular.js:2297:17 at ensure (http://localhost:29348/Scripts/angular.js:2218:38) at module (http://localhost:29348/Scripts/angular.js:2295:14) at http://localhost:29348/Scripts/angular.js:4933:22 at foreach (http://localhost:29348/Scripts/angular.js:410:20) at loadModules (http://localhost:29348/Scripts/angular.js:4917:5) creatat Injector (http://localhost:29348/Scripts/angular.js:4839:19) at doBootstrap (http://localhost:29348/Scripts/angular.js:1949:20) at bootstrap (http://localhost:29348/Scripts/angular.js:1970:12) http://errors.angularjs.org/1.6.6/$injector/modulerr? P0=Pedidoapp&p 1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'Pedidoapp'%20is%20not%20available! %20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it. %20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument. %0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fnomod%3Fp0%3DPedidoApp%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A116%3A12%0A%20%20%20at%20http%3A%2F%localhost%3A29348%2Fcripts%2Fcripts%2Fangular.js%3A2297%3A17%0A%20%20%20%20at%20at%20%20%20%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A2218%3A38)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A2295%3A14)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A29348%2Fcripts%2Fjs%3A4933%3A22%0A%20%20%20%20at%20forEach%20%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A410%3A20)%0A%20%20%20%20at%20loadModules%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A4917%3A5)%0A%20%20%20%20at%20createInjector%20(http%2A%2Flocalhost%3A29348%2Fcripts%2Fangular.js%3A4839%3A19)%0A%20%20%20%20at%20doBootstrap%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A1949%3A20)%0A%20%20%20%20%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A29348%2FScripts%2Fangular.js%3A1970%3A12) at http://localhost:29348/Scripts/angular.js:116:12 at http://localhost:29348/Scripts/angular.js:4957:15 at foreach (http://localhost:29348/Scripts/angular.js:410:20) at loadModules (http://localhost:29348/Scripts/angular.js:4917:5) creatat Injector (http://localhost:29348/Scripts/angular.js:4839:19) at doBootstrap (http://localhost:29348/Scripts/angular.js:1949:20) at bootstrap (http://localhost:29348/Scripts/angular.js:1970:12) at angularInit (http://localhost:29348/Scripts/angular.js:1855:5) at http://localhost:29348/Scripts/angular.js:33884:5 At Htmldocument.Rigger (http://localhost:29348/Scripts/angular.js:3468:5)

Beauty, pnet. You have added the Bundleconfig.Cs class to Global.asax.Cs?

– Carlos Scherer

2017/12/07 at 23:43
Why don’t you create the standard Asp.net mvc project already with the layout? I think it’s easier to take what you don’t want than to set everything up on the arm.

– Pablo Tondolo de Vargas

2017/12/08 at 00:05
@Carlosscherer, yes, I edited the post and put global.asax.Cs there

– pnet

2017/12/08 at 09:14
@Pablotondolodevargas, this way there will be no learning. I need to do to understand the thing. It has to be on the same arm, it is more didactic. This is a test for a carrier.

– pnet

2017/12/08 at 09:15
Console in browser shows some error?

– Carlos Scherer

2017/12/08 at 09:33
@Carlosscherer, only error in Angular, but I still haven’t done anything in it, I just declared. I edited the post and put there the error in the console.

– pnet

2017/12/08 at 10:02
Well, your Bundle is working because he located Angularjs. Remove the link tag where the duplicated Bootstrap is and check if the header matches as it is applying Bootstrap.

– Carlos Scherer

2017/12/08 at 10:26
@Carlosscherer, although I have posted without the comment, in the code I am using, the link tags are all commented. I just left the Renderers on.

– pnet

2017/12/08 at 10:31
@pnet Is the ~/Style/Jumbotron-Narrow.css file really in this folder? Because there is no problem with the bootstrap since it is being applied to its header as well as Angularjs. So there is no problem with the Bundle.

– Carlos Scherer

2017/12/08 at 13:52

Show 4 more comments

No answers

Browser other questions tagged c# css asp.net-mvc twitter-bootstrap

You are not signed in. Login or sign up in order to post.