How do I use bundling in MVC4?

See more:

C#

ASP.NET

C#4.0

MVC4

Hi All,

I have created a bundle config file and added bundles to it. Then I have added its references in _Layout.cshtml file. but the styles and scripts are not working. but it works when I add them normally as in an html page.

My code in BundleConfig file

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/bootstrap.min.js"));
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-1.9.0.js",
                       "~/Scripts/jquery-1.9.0.min.js",
                       "~/Scripts/jquery-1.9.0-vsdoc.js",
                        "~/Scripts/jquery-1.6.4.js",
                       "~/Scripts/jquery-1.6.4.min.js",
                       "~/Scripts/jquery-1.6.4-vsdoc.js"
                       ));
            bundles.Add(new ScriptBundle("~/bundles/jqueryUI").Include(
                       "~/Scripts/jquery-ui-1.10.3.custom.min.js",
                       "~/Scripts/jquery-ui-1.11.1.js",
                       "~/Scripts/jquery-ui.min-1.11.1.js"
                       ));
            bundles.Add(new ScriptBundle("~/bundles/jqueryLibrary").Include(
                     "~/Scripts/jquery.bxslider.js",
                     "~/Scripts/jquery.expander.min.js",
                     "~/Scripts/jquery.jscrollpane.min.js",
                     "~/Scripts/jquery.kinetic.min.js",
                     "~/Scripts/jquery.mousewheel.min.js",
                     "~/Scripts/jquery.parade.js",
                     "~/Scripts/jquery.prettyPhoto.js",
                     "~/Scripts/jquery.smoothdivscroll-1.3-min.js",
                     "~/Scripts/jquery.zweatherfeed.min.js"
                     ));
            bundles.Add(new ScriptBundle("~/bundles/scriptLibrary").Include(
                      "~/Scripts/custom_scripts.js",
                      "~/Scripts/docs.min.js",
                      "~/Scripts/google.maps.min.js",
                      "~/Scripts/ie10 - viewport - bug - workaround.js"
                      ));
            bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
                "~/Content/bootstrap.css",
                "~/Content/bootstrap.min.css",
                "~/Content/bootstrap-theme.css",
                "~/Content/bootstrap-theme.min.css"));
            bundles.Add(new StyleBundle("~/Content/font-awesome").Include(
                "~/Content/font-awesome.css",
                "~/Content/font-awesome.min.css"));
            bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
                "~/Content/jquery/jquery-ui-1.8.16.custom.css"));
            bundles.Add(new StyleBundle("~/Content/library").Include(
                "~/Content/jquery.bxslider.css",
                "~/Content/prettyPhoto.css",
                "~/Content/parade_smooth.css",
                "~/Content/zweatherfeed.css",
                "~/Content/custom.css"
                ));
        }

Code in _Layout.cshtml

@Styles.Render("~/Content/bootstrap")
    @Styles.Render("~/Content/font-awesome")
    @Styles.Render("~/Content/library")
    @Styles.Render("~/Content/jqueryui")
@Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryUI")
    @Scripts.Render("~/bundles/jqueryLibrary")
    @Scripts.Render("~/bundles/scriptLibrary")

Any one help me please..