正文 

当前位置： 首页 > 问答 >

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

     2023-03-27     36

关键词：

【中文标题】如何在 MVC 5 项目中添加 jQueryUI 库？【英文标题】：How to add jQueryUI library in MVC 5 project? 【发布时间】：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 了解更多信息 【参考方案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 文件进行老式引用（例如 &lt;script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" /&gt;

【讨论】：

谢谢！太完美了！ 如果你想要整个主题那么你只需要参考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")

【讨论】：

如何在 Asp.Net mvc 5 的 grid.mvc 中添加两个按钮

】如何在Asp.Netmvc5的grid.mvc中添加两个按钮【英文标题】：Howtoaddtwobuttoningrid.mvcinAsp.Netmvc5【发布时间】：2017-05-2709:50:57【问题描述】：我在这里遇到问题我正在使用Grid.MVC我想添加两个具有不同操作链接的按钮到View和Delete项目。... 查看详情

如何将 Web API 添加到现有的 ASP.NET MVC (5) Web 应用程序项目中？

】如何将WebAPI添加到现有的ASP.NETMVC(5)Web应用程序项目中？【英文标题】：HowtoaddWebAPItoanexistingASP.NETMVC(5)WebApplicationproject?【发布时间】：2014-11-2122:06:57【问题描述】：假设您在创建新的MVC(5)项目时忘记勾选WebAPI复选框（将其添加... 查看详情

如何在 MVC 5 中使用用户身份中的角色

】如何在MVC5中使用用户身份中的角色【英文标题】：HowtouseRolesinuseridentityinMVC5【发布时间】：2014-12-1113:48:08【问题描述】：我想在mvc5中使用asp.net用户身份，我执行以下步骤：1)创建一个mvc项目。2)创建我自己的数据库并更改web.c... 查看详情

如何将 MVC 5 项目模板添加到 VS 2012？

】如何将MVC5项目模板添加到VS2012？【英文标题】：HowcanIaddtheMVC5projecttemplatetoVS2012?【发布时间】：2013-08-1917:45:04【问题描述】：我有VisualStudio2012并想添加MVC5模板。如何做到这一点，还是仅在VS2013中可用？【问题讨论】：它还没... 查看详情

无法在 mvc 5 项目中添加新模型和更新数据库？

】无法在mvc5项目中添加新模型和更新数据库？【英文标题】：Can\'taddnewmodelandupdatedatabaseinmvc5project?【发布时间】：2015-03-0518:00:21【问题描述】：我正在处理的当前项目存在问题。它可以正常工作，并且可以使用当前的类和功能... 查看详情

如何在mvc中的模型中添加多个项目

】如何在mvc中的模型中添加多个项目【英文标题】：howtoaddmultipleitemsinthemodelinthemvc【发布时间】：2017-06-0209:29:06【问题描述】：我有2个设备，每个设备有10个纬度和10个经度值。我有2个设备，每个设备都有10个latlong值，但只有10... 查看详情

如何将项目引用添加到 ASP.NET Core 1.0 MVC 项目

】如何将项目引用添加到ASP.NETCore1.0MVC项目【英文标题】：HowtoaddprojectreferencetoASP.NETCore1.0MVCproject【发布时间】：2016-11-0115:10:30【问题描述】：我在解决方案X中有一个ASP.NETCore1.0MVC应用程序，在解决方案Y中有一些常见项目（.net4.5... 查看详情

如何在 MVC 5 项目中从 bootswatch 或 wrapbootstrap 实现主题？

】如何在MVC5项目中从bootswatch或wrapbootstrap实现主题？【英文标题】：HowcanIimplementathemefrombootswatchorwrapbootstrapinanMVC5project?【发布时间】：2014-03-1708:31:38【问题描述】：我即将创建一个新的ASP.NetMVC5Web应用程序。我想在应用程序中使... 查看详情

如何在 ASP.Net MVC 中将登录视图实现为 jQueryUI 对话框

】如何在ASP.NetMVC中将登录视图实现为jQueryUI对话框【英文标题】：HowdoiimplementaloginviewasajQueryUIdialogboxinASP.NetMVC【发布时间】：2010-02-2213:40:11【问题描述】：我看过一些类似的例子，我也看过KiGG应用程序，它也使用一个对话框来... 查看详情

我可以在 asp.net MVC-5 项目中的我的 aspnet 数据库中添加新的自定义表吗

】我可以在asp.netMVC-5项目中的我的aspnet数据库中添加新的自定义表吗【英文标题】：Caniaddnewcustomtablesinsidemyaspnetdatabaseinsideasp.netMVC-5project【发布时间】：2017-10-1316:44:46【问题描述】：我有以下几点：-VisualStudio2013。我创建了一个... 查看详情

如何在 xcode 5 现有项目中添加前缀文件？

】如何在xcode5现有项目中添加前缀文件？【英文标题】：Howtoaddprefixfileinxcode5existingproject?【发布时间】：2015-05-1716:50:51【问题描述】：希望你们一切都好。我正在做一个需要添加核心数据功能的项目。我正在研究xcode-5。我需要... 查看详情

如何在 MVC 5 项目中使用 Json.NET 进行 JSON 模型绑定？

】如何在MVC5项目中使用Json.NET进行JSON模型绑定？【英文标题】：HowtouseJson.NETforJSONmodelbindinginanMVC5project?【发布时间】：2014-07-2214:39:39【问题描述】：我一直在互联网上寻找答案或示例，但还没有找到。我只是想更改默认的JSON序... 查看详情

如何在 asp.net mvc 项目中添加 .mp3 或 .wav 文件？

】如何在asp.netmvc项目中添加.mp3或.wav文件？【英文标题】：Howcanadd.mp3or.wavfileinasp.netmvcproject?【发布时间】：2019-05-1018:24:43【问题描述】：我想在cshtml文件中使用javascript播放警告声音。我想将音频文件（wav或mp3）放在内容目录下... 查看详情

MVC如何正确添加业务层

】MVC如何正确添加业务层【英文标题】：MVCHowtoaddabusinesslayerproperly【发布时间】：2014-11-2407:27:51【问题描述】：我（菜鸟）在MVC中重构了一些教学代码。使用不同的网络文章作为指导，我将诸如“添加记录”之类的业务逻辑放入... 查看详情

如何在同一个项目中同时拥有 MVC 和 Razor 页面？

】如何在同一个项目中同时拥有MVC和Razor页面？【英文标题】：HowcanhaveBothMVCandRazorpageinthesameProject?【发布时间】：2022-01-0308:46:06【问题描述】：我有一个带有Razor页面的ASP.NETCore应用程序，我想在其中利用MVC，所以我添加了带有Vi... 查看详情

MVC 5 项目中缺少图标

...署它时找不到图标。因此，由于我不完全了解整个事情是如何工作的，我通过更改summernote-bs3.css和summerno 查看详情

如何在 Visual Studio 3 中添加 Visual Studio 5 项目？

】如何在VisualStudio3中添加VisualStudio5项目？【英文标题】：Howtoaddvisualstudio5projectinvisualstudio3?【发布时间】：2014-01-2207:23:15【问题描述】：我在不知不觉中在VisualStudio5中打开了一个在VisualStudio3中创建的项目。因此，当我尝试在Vis... 查看详情

数据项目中的 MVC 5 HttpContext.User

...织方式如下：数据（实体框架）->服务->Web（MVC）。如何从Controller中的HttpContext获取数据项目中的当前loget用户？我需要在DB中设置列​​，例如CreatedBy和 查看详情