如何在 MVC 5 项目中添加 jQueryUI 库? [英] How to add jQueryUI library in MVC 5 project?

问题描述

我刚刚安装了 Visual Studio 2013 并开始了新的 MVC 5 项目.我是 MVC 开发的新手，我不知道如何在我的项目中添加库.

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.

我看到了一些相似的部分.例如，在 _Layout.cshtml 上我有这个代码:

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

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

然后在 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>

然后据我所知 Global.asax

所以，我下载了带有 .js 和 css 文件的 jQuery UI 库.我的问题是:在使用这个库的地方，我应该在哪里添加什么，比如默认库(bootstrap 或 jquery)?jQuery UI 有 3 个包含内容的文件夹.我将此文件夹的所有内容添加到我的项目中，我只需要添加引用.

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.

推荐答案

您在 _Layout.cshtml 页面上看到的渲染 css 和脚本的代码(即 @Scripts.Render("~/bundles/modernizr")) 称为捆绑.在此处查看一些信息:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

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

因此，要添加 jQueryUI，您需要执行以下操作:

So, to add jQueryUI you would do the following:

在您的 Global.asax.cs 文件中，您应该看到许多注册:

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

BundleConfig.RegisterBundles(BundleTable.Bundles);

这将转到注册任何包的 BundleConfig 类.对于 jQueryUI，您可以执行以下操作:

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

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

这是创建一个名为 ~/bundles/jqueryui 的新脚本包.

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

然后你会对 css 做同样的事情:

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

并添加

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

注意:

• 在 MVC4 中，一个非空项目已经设置了 jQuery.对于空项目，您必须自己添加.对新的 MVC 5 不是 100% 确定.
• 您可以从 NuGet 安装 jQueryUi，但官方软件包并没有添加这个捆绑的东西.
• 您可以对 css 和 js 文件进行老式引用(例如 <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js"/>

这篇关于如何在 MVC 5 项目中添加 jQueryUI 库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！