jQuery DataTable 在 ASP.NET MVC 中不起作用？

Question

我有一个带有简单表格的 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")

但现在我收到此错误：

Uncaught TypeError: Object [object Object] has no method 'dataTable'

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

Answer 1

默认情况下，如果您的 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 not including .min files

Answer 2

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(){ .... }