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

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 上看到的呈现 css 和脚本的代码页面(即 @Scripts.Render("~/bundles/modernizr") )称为捆绑。在这里查看一些信息:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

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

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

BundleConfig.RegisterBundles(BundleTable.Bundles);

这将转到BundleConfig注册任何 bundle 的类。对于 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" />