Wednesday, February 5, 2014

Basics of Installing jQueryUI in .NET MVC with bundles

jQueryUI is sometimes installed by default, depending on the template.  If you find you need to install jQueryUI, follow the following steps.  

* Note that this is assuming you use the default jQueryUI themes and want to include all style sheets (i.e., jquery.ui.all.css), as well as load these in the master layout.

* You can create bundles anyway you want, I included it with the jQuery bundle for simplicity.

  1. Install "jQueryUI combined" package from nuget
  2. Open ~/App_Start/BundleConfig.cs
  3. Add jQueryUI script and CSS to bundle
    1.  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                              "~/Scripts/jquery-{version}.js" ,
                              "~/Scripts/jquery-ui-{version}.js" ));
    2. bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/bootstrap.css",
                            "~/Content/site.css",
                            "~/Content/themes/base/jquery.ui.all.css" ));
  4. Make sure ~/Views/Shared/_Layout.cshtml is loading these:
    1. @ Styles.Render( "~/Content/css")
    2. @Scripts.Render( "~/bundles/jquery")

No comments:

Post a Comment