Question

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

Answer 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。对于空项目，您必须自己添加它。对于新的MVC 5不是100％肯定。
您可以从NuGet安装jQueryUi，但官方软件包不会添加此捆绑内容。
您可以对旧的css和js文件进行旧式引用（例如<script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />

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

`

Answer 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>

Answer 4

使用NuGet安装JQuery ui后，将以下片段添加到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"));

现在将以下代码段添加到_Layout.cshtml中，如下所示

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

和

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

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

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

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

5 个答案: