METRO UI CSS ASP NET MVC [关闭]答案

【问题标题】：METRO UI CSS ASP NET MVC [closed]METRO UI CSS ASP NET MVC [关闭]
【发布时间】：2014-09-10 08:51:26
【问题描述】：

我想在我的应用中使用 METRO UI CSS：

创建 ASP NET MVC 项目
我通过以下方式下载了 METRO UI MVC：

Package Manager Console: PM> Install-Package Metro.UI.CSS

将捆绑包更改为此图像：

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/metro-ui/jquery.ui.widget.js",
                        "~/Scripts/metro-ui/metro.min.js"
                        ));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/metro-ui/jquery.ui.widget.js"
                    ));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://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",
                  "~/Content/metro-ui/css/metro-bootstrap.css",
                  "~/Content/metro-ui/css/metro-bootstrap-responsive.css",
                  "~/Content/metro-ui/css/iconFont.min.css"));
    }

我的_Layout.cshtml头：

<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/metro-bootstrap.css" rel="stylesheet" />
    <link href="Content/metro-bootstrap-responsive.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.widget.min.js"></script>
    <script src="Scripts/metro.min.js"></script>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/metro-ui/css")

</head>

在我的身体结束之前：

   <body class="metro">
      (...)
      @RenderBody()

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

我的解决方案浏览器部分如下所示：

例如在控制器视图中：主页，操作：索引

http://pastebin.com/7UXbWhBQ

结果：当我点击列表（f.e Base CSS）时，什么也没有发生......

这是文档： https://github.com/olton/Metro-UI-CSS/blob/master/docs/navbar.html

怎么了？

【问题讨论】：

@Scripts.Render("~/bundles/jquery") 呈现包中包含的 3 个脚本，因此请从 <head> 中删除重复的脚本。您似乎没有 @Styles.Render("~/Content/metro-ui/css") 或 @Scripts.Render("~/bundles/metro-ui") 的捆绑包
成功了！请添加答案，我可以检查它:-)

标签： c# css asp.net-mvc asp.net-mvc-4 metro-ui-css

【解决方案1】：

您正在复制脚本并引用不存在的捆绑包。这一行

@Scripts.Render("~/bundles/jquery")

渲染包定义中包含的 3 个脚本，因此请从 <head> 部分中删除相应的脚本。

您还有@Styles.Render("~/Content/metro-ui/css") 和@Scripts.Render("~/bundles/metro-ui")。您的BundleConfig.cs 文件中不存在这些捆绑软件

【讨论】：