jQuery 如何在 MVC 5 项目中添加 jQueryUI 库？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20081328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add jQueryUI library in MVC 5 project?
提问by Bryuk
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.
我刚刚安装了 Visual Studio 2013 并开始了新的 MVC 5 项目。我是 MVC 开发的新手，我不知道如何在我的项目中添加库。
I see some similar parts. For example, on the _Layout.cshtmlI have this code:
我看到一些类似的部分。例如，在_Layout.cshtml我有这个代码：
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
Then in the packages.configfile:
然后在packages.config文件中：
<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
然后据我所知发生了一些事情 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.
所以，我已经下载了带有 .js 和 css 文件的 jQuery UI 库。我的问题是：在使用这个库的地方，比如默认库（bootstrap 或 jquery），我应该在哪里添加什么？jQuery UI 有 3 个包含内容的文件夹。我将此包含所有内容的文件夹添加到我的项目中，我只需要添加引用。
回答by Simon C
The code you see rendering css and scripts on your _Layout.cshtmlpage (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
您在_Layout.cshtml页面（即@Scripts.Render("~/bundles/modernizr")）上看到的呈现 css 和脚本的代码称为捆绑。在此处查看一些信息：http: //www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
So, to add jQueryUI you would do the following:
因此，要添加 jQueryUI，您需要执行以下操作：
In your Global.asax.cs file you should see a number of registrations:
在您的 Global.asax.cs 文件中，您应该看到许多注册：
BundleConfig.RegisterBundles(BundleTable.Bundles);
This goes to the BundleConfigclass which registers any bundles. For jQueryUI you could do the following:
这将转到BundleConfig注册任何包的类。对于 jQueryUI，您可以执行以下操作：
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
This is creating a new script bundle called ~/bundles/jqueryui.
这将创建一个名为~/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:
然后你会对 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" />
- 在 MVC4 中，一个非空项目已经设置了 jQuery。对于空项目，您必须自己添加。对新的 MVC 5 不是 100% 确定。
- 你可以从 NuGet 安装 jQueryUi，但官方包没有添加这个捆绑的东西。
- 您可以对 css 和 js 文件进行老式引用（例如
<script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />
回答by Doug Dekker
The css bundle should look as follows for version 1.11.1 now:
现在 1.11.1 版本的 css 包应该如下所示：
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"));
`
`
回答by benscabbia
To install jQueryUI + the latest version of jQuery you can use NuGet:
要安装 jQueryUI + 最新版本的 jQuery，您可以使用 NuGet：
Install-Package jQuery.UI.Combined
This will update your existing jQuery libraries to the latest version.
这会将您现有的 jQuery 库更新到最新版本。
You can then reference this by going in App_Start/BundleConfig.csand add:
然后，您可以通过进入App_Start/BundleConfig.cs并添加来引用它：
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
然后您可以在单个页面上或全局使用它 _Layout.cshtml
@Styles.Render("~/Content/themes/base/css") // Add to <head> tags
@Scripts.Render("~/bundles/jqueryui") // Add above </body>
回答by user2662006
After installing JQuery ui using the NuGet add following snippets to BundleConfig.cs as shown below
使用 NuGet 安装 JQuery ui 后，将以下代码段添加到 BundleConfig.cs，如下所示
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"));
Now add following snippets to your _Layout.cshtml as shown below
现在将以下代码段添加到您的 _Layout.cshtml 中，如下所示
@Styles.Render("~/Content/themes/base/css")
and
和
@Scripts.Render("~/bundles/jqueryui")
I just want to make it little bit clear, hope this will help. Thanks
我只是想说清楚一点，希望这会有所帮助。谢谢
