How to add jQueryUI library in MVC 5 project?

2019-01-10 06:46发布

站内问答 / jQuery
803 4 5

I've just installed Visual Studio 2013 and started new MVC 5 project. I'm kind of new in MVC developing and I can't figure out how to add libraries in my project.

I see some similar parts. For example, on the _Layout.cshtml I have this code:

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

Then in the packages.config file:

<packages>
  <package id="Antlr" version="3.4.1.9004" targetFramework="net45" />
  <package id="bootstrap" version="3.0.0" targetFramework="net45" />
  <package id="EntityFramework" version="6.0.0" targetFramework="net45" />
  <package id="jQuery" version="1.10.2" targetFramework="net45" />
  <package id="jQuery.Validation" version="1.11.1" targetFramework="net45" />
</packages>

Then as far as I know something happens on Global.asax

So, I've downloaded jQuery UI libraries with .js and css files. My question is: Where and what should I add in term of use this libraries everywhere like default libraries (bootstrap or jquery)? And jQuery UI has 3 folders with content. I added this folders with all content to my project, I just need to add references.

4条回答
Deceive 欺骗
2楼-- · 2019-01-10 07:14

The code you see rendering css and scripts on your _Layout.cshtml page (i.e. @Scripts.Render("~/bundles/modernizr")) is called bundling. Check out some info here: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

So, to add jQueryUI you would do the following:

In your Global.asax.cs file you should see a number of registrations: 

BundleConfig.RegisterBundles(BundleTable.Bundles);

This goes to the BundleConfig class whioch registers any bundles. For jQueryUI you could do the following:

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

This is creating a new script bundle called ~/bundles/jqueryui.

Then it can be added to your layout page by doing this:

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

Then you'll do the same for css:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));

and add it with

@Styles.Render("~/Content/themes/base/css")

Note:

  • In MVC4, a non-empty project already has jQuery set up. FOr an empty project you would have to add it yourself. Not 100% sure about the new MVC 5.
  • You can install jQueryUi from nuget, but the official package doesn't add this bundling stuff.
  • You could just do the old fashioned referencing of you css and js files (e.g. <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-01-10 07:21

To install jQueryUI + the latest version of jQuery you can use NuGet:

Install-Package jQuery.UI.Combined

This will update your existing jQuery libraries to the latest version.

You can then reference this by going in App_Start/BundleConfig.cs and add: 

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

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/all.css"));

You can then use it on individual pages or globally in _Layout.cshtml 

@Styles.Render("~/Content/themes/base/css") // Add to <head> tags
@Scripts.Render("~/bundles/jqueryui") // Add above </body>
查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
4楼-- · 2019-01-10 07:34

The css bundle should look as follows for version 1.11.1 now:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/accordion.css",
        "~/Content/themes/base/all.css",
        "~/Content/themes/base/autocomplete.css",
        "~/Content/themes/base/base.css",
        "~/Content/themes/base/button.css",
        "~/Content/themes/base/core.css",
        "~/Content/themes/base/datepicker.css",
        "~/Content/themes/base/dialog.css",
        "~/Content/themes/base/draggable.css",
        "~/Content/themes/base/menu.css",
        "~/Content/themes/base/progressbar.css",
        "~/Content/themes/base/resizable.css",
        "~/Content/themes/base/selectable.css",
        "~/Content/themes/base/selectmenu.css",
        "~/Content/themes/base/slider.css",
        "~/Content/themes/base/sortable.css",
        "~/Content/themes/base/spinner.css",
        "~/Content/themes/base/tabs.css",
        "~/Content/themes/base/theme.css",
        "~/Content/themes/base/tooltip.css"));

`

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
5楼-- · 2019-01-10 07:34

After installing JQuery ui using the NuGet add following snippets to BundleConfig.cs as shown below 

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

also 

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/jquery.ui.core.css",
        "~/Content/themes/base/jquery.ui.autocomplete.css",
        "~/Content/themes/base/jquery.ui.theme.css"));

here is my screen shot

Now add following snippets to your _Layout.cshtml as shown below 

 @Styles.Render("~/Content/themes/base/css")

and 

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

enter image description here

I just want to make it little bit clear, hope this will help. Thanks

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)