6

我有一个带有简单表格的 index.cshtml 文件。我下载了 dataTable 插件的 css 文件和 min js 文件。我将以下代码放在 BundleConfig.cs 中：

bundles.Add(new ScriptBundle("~/bundles/table").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

 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/themes/base/jquery.dataTables.css"));
        }

在我的 _Layout.cshtml 中，我有这个：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/table")

最后，在我的 index.cshtml 中，我将以下代码放在我的表格上方：

<script type="text/javascript">
    $(document).ready(function () {
        $('#patients').dataTable();
    });
    </script>

我注意到当我使用表格运行页面并查看源代码时，我看到底部的 jquery 文件和顶部的脚本，所以我收到错误：

Uncaught ReferenceError: $ is not defined

BundleConfig 是添加新 js 和 css 文件的正确位置吗？如果我不希望它在那里，我该怎么做？为什么jquery脚本在页面底部运行？

我在 _Layout.cshtml 中添加了以下内容：

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/table")

但现在我得到这个错误：

未捕获的类型错误：对象 [对象对象] 没有方法“数据表”

当我查看源代码时，我看到 dataTables.min.js 不存在，但我已将其包含在 bundles/table 中。

4

2 回答 2

7

默认情况下，如果您的 web.config 中有 Debug="True"，则最小化的 javascript 文件不会包含在捆绑包中。将此添加到您的 BundleConfig.cs（或使用非缩小的 javascript 文件，或在非调试模式下运行）：

#if DEBUG
            //by default all minimized files are ignored in DEBUG mode. This will stop that.
            bundles.IgnoreList.Clear();
#endif

附加信息：Bundler 不包括 .min 文件

于 2013-04-26T21:20:34.610 回答
1

Modernizer，开箱即用的 asp.net MVC 项目，与 jQuery 无关。

我会更新你的包，所以你有一个用于 jQuery 和一个用于 jQuery 插件，或者两者兼而有之。例如

bundles.Add(new ScriptBundle("~/bundles/jQuery").Include(
                        "~/Scripts/jquery-{version}.min.js"));
bundles.Add(new ScriptBundle("~/bundles/jQueryPlugins").Include(
                        "~/Scripts/jquery.dataTables.min.js"));

如果您添加任何额外的 jQuery 插件，那么只需将它们注册到 jQueryPlugins 捆绑包中。

然后确保在您的 _Layout 中首先渲染 jQuery 包。

@Scripts.Render("~/bundles/jQuery")
@Scripts.Render("~/bundles/jQueryPlugins")

这样你就知道你总是在插件之前包含 jQuery。

笔记

还要确保在页面上的 jQuery 代码之前呈现脚本。例如

@Scripts.Render("...")

前

$(document).ready(function(){ .... }
于 2013-04-26T20:08:42.810 回答