JS files not being displayed past localhost default page

Question

this is my first ever forum post anywhere please bear with me. I am trying to use bootsrap files from metro.ui.org in my web application through MVC (latest version of ultimate) and any js files I include in my html shared layout only display on the first page that pulls up (localhost). Whenever I link out of the first page and go to any other page for the site it displays the site.css default files instead of the custom js files I've been using.

I've tried using html actionlinks and buttons from the metro bootstrap. I've also run it in chrome, internet explorer 10, and firefox with no help. I'm cursing HTML5 doc type (required for metro bootstrap).

The first image is what the buttons at the top have been doing when i navigate away from the default page. The second image is of the first page (just localhost) that all of the bootstrap files work with.

https://i.stack.imgur.com/EreqD.jpg

Wow you guys are wonderfully quick to respond! Here is my code for the shared layout. I'm just learning how to use all of this so it is kind of messy. The first two buttons below I tried using an action link but it doesn't seem to help any.

<!DOCTYPE HTML5>
<html lang="en">
    <head>
        <link rel="stylesheet" href="css/metro-bootstrap.css">

        <script src="js/jquery/jquery.min.js"></script>
        <script src="js/jquery/jquery.widget.min.js"></script>

        <script src="js/metro/metro-*.js"></script>

        <meta charset="utf-8" />
        <title>@ViewBag.Title - LangPract</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>
    <body class="metro">
        <header >
            <div id="menu" style="background-color:rgb(51, 51, 51); padding-left: 1%; 
                        height: 115px;width:64%;float:left">
                @Html.ActionLink("LangPract", "Index", "Home")
                <br/>
                @ViewBag.render
                <h8>@ViewBag.Title.</h8>
                <h4>@ViewBag.Message</h4>
            </div>

            <div id="content" style="background-color:rgb(51, 51, 51);  height:115px; 
                        width:35%; float:right">

                <button class="image-button primary">
                        @Html.ActionLink("Home", "Index", "Home")
                    <i class="icon-home bg-cobalt"></i>                            
                </button>                      
                <button class="image-button primary">
                        @Html.ActionLink("About", "About", "Home")
                    <i class="icon-info-2 bg-cobalt"></i>
                </button>               
                <br />                 
                <a href="~/Home/Contact">   
                    <button class="image-button primary">
                        Contact
                        <i class="icon-phone bg-cobalt"></i>
                    </button>
                </a>
                <a href="~/Profile/Student">    
                    <button class="image-button primary">
                        Profile
                        <i class="icon-user bg-cobalt"></i>                            
                    </button>
                </a>
            </div>
        </header>
        <div id="body">
            <hr>
                @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">

                @RenderBody()
            </section>
        </div>

        <footer>
            <hr>
            <div class="content-wrapper">
                <div class="float-left, float-top">
                    <p style="padding-left: 4px;">&copy; @DateTime.Now.Year - LangPract</p>
                </div>
            </div>
        </footer>
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

You also have to modify your `BundleConfig.cs` and `Site.Master` [Look Here](http://stackoverflow.com/questions/12932544/how-to-include-javascript-code-in-asp-net-mvc4-view-page) — Joel, Nov 27 '13 at 20:50
I just added the shared layout. I don't have any partial views in my project. I checked my bundleconfig.cs and metro was added but I checked for a site.master and couldn't find anything? — user3043056, Nov 27 '13 at 22:21

score 0 · Answer 1 · answered Nov 27 '13 at 20:58

Do you have a contact.html page for the contact page? If so, it's possible you've only linked the metro-bootstrap.css file in the index.html head -- which would cause the css to only take effect on the initial index.html page and not your contact page.

Add <style type="text/css" url="metro-bootstrap-.css"></style> in the <head></head> of any html pages you'd like the styles to take effect in.

I should also clarify, the HTML5 doctype is just a way for the browser to understand which standards version you're using when it wants to render your html and css. The http://metroui.org.ua/ site asks for your page to have it because it is the most current and works nicely with everything being built today.

See http://alistapart.com/article/doctype for more detail on what is a doctype.

Thank you for the quick response Pippin. The link for HTML5 is great. I added the code to my shared layout so all my other views just render in the body section. The bootstrap files don't work in those views or the shared layout past the first page. — user3043056, Nov 27 '13 at 22:24

JS files not being displayed past localhost default page

1 Answers1