Question

我有一个带有简单表的index.cshtml文件。我下载了css文件和dataTable插件的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")

但现在我收到了这个错误：

未捕获TypeError：对象[object Object]没有方法'dataTable'

当我查看源代码时，我看到dataTables.min.js不存在，但我已将其包含在bundle / 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插件，或者一个用于两者。 e.g。

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

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

2 个答案: