如何在 MVC 5 项目中添加 jQueryUI 库？答案

【问题标题】：How to add jQueryUI library in MVC 5 project?如何在 MVC 5 项目中添加 jQueryUI 库？
【发布时间】：2013-12-03 13:59:41
【问题描述】：

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

我看到了一些类似的部分。例如，在_Layout.cshtml 我有这个代码：

@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 个包含内容的文件夹。我将这个包含所有内容的文件夹添加到我的项目中，我只需要添加引用。

【问题讨论】：

你应该看看 Nuget。这基本上是现在向 .net 项目添加依赖项的首选方式。
你能说得更具体些吗=) 请提供几个步骤列表
Bryuk - 右键单击项目中的引用并选择“管理 Nuget 包”。从那里您可以搜索包、更新包等。当您创建一个新的 MVC5 应用程序时，它会自动为您安装一堆 Nuget 包：jQuery、Bootstrap 等。在 www.nuget.org 了解更多信息

标签： jquery asp.net-mvc jquery-ui asp.net-mvc-4 asp.net-mvc-5

【解决方案1】：

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

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

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

BundleConfig.RegisterBundles(BundleTable.Bundles);

这转到注册任何捆绑包的BundleConfig 类。对于 jQueryUI，您可以执行以下操作：

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

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

然后可以通过这样做将它添加到您的布局页面：

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

然后你会为 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。对于一个空项目，您必须自己添加它。不是 100% 确定新的 MVC 5。
你可以从 NuGet 安装 jQueryUi，但是官方包没有添加这个捆绑的东西。
您可以对您的 css 和 js 文件进行老式引用（例如 <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />

【讨论】：

谢谢！太完美了！
如果你想要整个主题那么你只需要参考jquery.ui.all.css
仅包含 jquery.ui.all.css 存在问题。 See hear to read about it
@Luminous all.css 在我刚刚创建的项目中似乎工作正常。
很好的说明@simon-c。 CSS 文件命名约定在 jQuery UI 版本 1.12 中有所不同。开发人员可以删除“jquery.ui”。这些路径中“base/”之后的前缀。这对我有用： bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/jquery-ui.min.css"));

【解决方案2】：

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

`

【讨论】：

【解决方案3】：

要安装 jQueryUI + 最新版本的 jQuery，您可以使用 NuGet：

Install-Package jQuery.UI.Combined

这会将您现有的 jQuery 库更新为 latest version。

然后您可以通过进入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"));

然后您可以在单个页面上或在_Layout.cshtml 中全局使用它

@Styles.Render("~/Content/themes/base/css") // Add to <head> tags
@Scripts.Render("~/bundles/jqueryui") // Add above </body>

【讨论】：

天哪。我被困了一整天，因为我一直在将脚本添加到头部而不是身体......谢谢。
@Rinktacular 不客气！我们都去过那里:)

【解决方案4】：

使用 NuGet 安装 JQuery ui 后，将以下 sn-ps 添加到 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/jquery.ui.core.css",
        "~/Content/themes/base/jquery.ui.autocomplete.css",
        "~/Content/themes/base/jquery.ui.theme.css"));

现在将以下 sn-ps 添加到您的 _Layout.cshtml 中，如下所示

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

和

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

我只想说清楚一点，希望这会有所帮助。谢谢

【讨论】：

【解决方案5】：

正如 Simon C 在接受的答案中所指定的，确实有必要捆绑 jQuery UI js：

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

以及调用方式的使用：

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

截至 2021 年 1 月 23 日，css 文件不包含 jquery.ui.* 前缀。

也没有必要包含这些单独的文件，因为它在 jquery-ui.css 的标题中指定：

包括：core.css、accordion.css、autocomplete.css、menu.css、button.css、controlgroup.css、checkboxradio.css、datepicker.css、dialog.css、draggable.css、resizable.css、progressbar .css、selectable.css、selectmenu.css、slider.css、sortable.css、spinner.css、tabs.css、tooltip.css、theme.css

所以，你可以写这个来打包 jquery-ui.css：

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

并通过以下方式在页面中使用它：

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

【讨论】：