如何在MVC 5项目中添加jQueryUI库？
Bry*_*yuk 59 asp.net-mvc jquery jquery-ui asp.net-mvc-4 asp.net-mvc-5
我刚刚安装了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个包含内容的文件夹.我将包含所有内容的文件夹添加到我的项目中,我只需要添加引用.
Sim*_*n C 112
您在_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类whioch注册任何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" />
- 如果你想要整个主题,那么你只需要引用jquery.ui.all.css (11认同)
小智 33
The css bundle should look as follows for version 1.11.1 now:
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"));
`
ben*_*bia 19
要安装jQueryUI +最新版本的jQuery,您可以使用NuGet:
Install-Package jQuery.UI.Combined
这会将您现有的jQuery库更新为最新版本.
然后你可以通过进入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>
- 哦,我的上帝.我已经被困了一整天,因为我一直在添加脚本而不是身体......谢谢. (2认同)
使用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")
我只想澄清一点，希望这会有所帮助。谢谢
| 归档时间： |
|
| 查看次数： |
74666 次 |
| 最近记录： |