Search code examples
c#cssasp.net-mvcasp.net-mvc-4metro-ui-css

METRO UI CSS ASP NET MVC

i want to use METRO UI CSS in my app:

  1. Create ASP NET MVC Project

  2. I downloaded METRO UI MVC by:

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

  1. Change bundles to this image:

            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"));
    }

my head of _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>

before end of the body i have:

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

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

My part of the solution explorer looks like:

enter image description here

and for example in View for controller: Home, action: Index

http://pastebin.com/7UXbWhBQ

result: enter image description here and when i click on the list (f.e Base CSS) nothing happen...

here's the documentation: https://github.com/olton/Metro-UI-CSS/blob/master/docs/navbar.html

what's wrong?

Solution

  • You are duplicating scripts and referring to non existent bundles. This line

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

    renders the 3 scripts included in you bundle definition so remove the corresponding scripts from the <head> section.

    You also have @Styles.Render("~/Content/metro-ui/css") and @Scripts.Render("~/bundles/metro-ui"). Neither of these bundles exist in your BundleConfig.cs file