把jQuery UI的CSS加到ASP.NET MVC项目的bundle中

在ASP.NET MVC项目中,通过NuGet把jQuery UI加入工程后调试页面,会发现这些jQuery UI的控件的样式都不对。这主要是因为最新的MVC里默认启用了一个bundle的功能,这个功能会把javascript和css等文件分组,压缩打包,从而实现网站的性能优化。NuGet不会自动把jQuery UI的css文件加到bundle里,所以需要手工添加以下,才能让jQuery UI的控件在页面上显示正常。

具体的步骤是

  1. 找到App_StartBundleConfig.cs
  2. 加入下面代码段:
    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"));
  3. 在ViewShared_Layout.cshtml中部分加入@Styles.Render(“~/Content/themes/base/css”)

在步骤2中,可以不用全部都添加,只需要添加项目中用到的控件即可。

Leave a Reply

Your email address will not be published. Required fields are marked *