jQuery DataTable не будет работать в ASP.NET MVC?

у меня есть индекс.cshtml файл с простой таблицей. Я загрузил файл css и файл min js для плагина dataTable. Я поместил следующий код в 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")

наконец, в моем индексе.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: объект [объект объекта] не имеет метода "dataTable"

когда я просматриваю источник, я вижу dataTables.минута.js нет там, но я включил его в bundles / table.

6
asp.net-mvc jquery jquery-datatables

2 ответов

по умолчанию, если у вас есть Debug= "True" в вашем интернете.config, свернутые файлы 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 files

7

модернизатор, из коробки с 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(){ .... }
1