捆绑javascript / css

时间:2015-05-10 09:14:34

标签: javascript jquery css asp.net-mvc asp.net-mvc-layout

我正在使用ASP.Net MVC项目中的jQuery库。

以下代码段来自“BundleConfig.cs”

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/jqgrid").Include(
            "~/Scripts/jquery.jqGrid.min.js", 
            "~/Scripts/grid.locale-en.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.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",
                    "~/Content/ui.jqgrid.css"));
    }
}

这是我的布局文件中的HTML代码,我有@Stlyes.Render。根据我的理解,它应该包括我在上面的代码中捆绑的所有javascript库和css。但是,当我查看页面源时,它只包含一些库(如下面的屏幕截图所示)。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqgrid")

</head>

enter image description here

不确定为什么即使在将这些文件指定到BundleConfig.cs文件中之后它也没有包含所有的javascript和css文件。

请帮忙!

为javascript文件列表添加了解决方案资源管理器截图。 enter image description here

1 个答案:

答案 0 :(得分:0)

请参阅@ haim770的评论,因为他指定的链接与另一个问题有关。 看起来.Net有问题呈现或包括两个版本的js或css,即使它们是缩小版或常规版。我所做的是将jQuery库文件从min.js重命名为.js。

我在_Layout.cshtml(view)文件中缺少少量@scripts.Render标签,用于少量js和css文件。包括那些代码现在工作正常。谢谢大家的帮助!