0

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

  1. 创建 ASP NET MVC 项目

  2. 我通过以下方式下载了 METRO UI MVC：

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

  1. 将捆绑包更改为此图像：

            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

结果： 在此处输入图像描述 当我点击列表（fe Base CSS）时，什么也没有发生......

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

怎么了？

4

1 回答 1

2

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

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

呈现捆绑定义中包含的 3 个脚本，因此请从该<head>部分中删除相应的脚本。

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

于 2014-09-10T00:51:26.490 回答