JS 文件未通过 localhost 默认页面显示答案

【问题标题】：JS files not being displayed past localhost default pageJS 文件未通过 localhost 默认页面显示
【发布时间】：2013-12-13 16:46:13
【问题描述】：

这是我第一次在论坛发帖，请多多包涵。我正在尝试通过 MVC（最终版本的最新版本）在我的 Web 应用程序中使用来自 metro.ui.org 的 bootsrap 文件，并且我包含在我的 html 共享布局中的任何 js 文件仅显示在拉起的第一页（本地主机）上。每当我从第一页链接到该站点的任何其他页面时，它都会显示 site.css 默认文件，而不是我一直在使用的自定义 js 文件。

我尝试使用 Metro 引导程序中的 html 操作链接和按钮。我也在 chrome、internet explorer 10 和 firefox 中运行它，没有任何帮助。我在诅咒 HTML5 文档类型（metro bootstrap 需要）。

第一张图片是当我离开默认页面时顶部的按钮所做的。第二张图片是所有引导文件都使用的第一页（只是 localhost）。

http://imgur.com/a/mHyUx

哇，你们的反应真快！这是我的共享布局代码。我只是在学习如何使用所有这些，所以有点乱。下面的前两个按钮我尝试使用操作链接，但似乎没有任何帮助。

<!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>

【问题讨论】：

你能发布你的布局吗？
您还必须修改您的BundleConfig.cs 和Site.Master Look Here
我刚刚添加了共享布局。我的项目中没有任何部分视图。我检查了我的 bundleconfig.cs 并添加了 Metro，但我检查了 site.master 却找不到任何东西？

标签： javascript html visual-studio twitter-bootstrap web

【解决方案1】：

您有用于联系页面的contact.html 页面吗？如果是这样，您可能只在 index.html 头中链接了 metro-bootstrap.css 文件——这将导致 css 仅在初始 index.html 页面而不是您的联系页面上生效。

在您希望样式生效的任何 html 页面的 <head></head> 中添加 <style type="text/css" url="metro-bootstrap-.css"></style>。

我还要澄清一下，HTML5 文档类型只是浏览器在呈现 html 和 css 时了解您使用的标准版本的一种方式。 http://metroui.org.ua/ 站点要求您的页面拥有它，因为它是最新的，并且可以很好地与当今正在构建的所有内容配合使用。

有关什么是 doctype 的更多详细信息，请参阅 http://alistapart.com/article/doctype。

【讨论】：

感谢皮平的快速回复。 HTML5 的链接很棒。我将代码添加到我的共享布局中，所以我的所有其他视图都只呈现在正文部分。引导文件在这些视图或第一页之后的共享布局中不起作用。