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

У меня есть файл index.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")

Наконец, в моем 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] не имеет метода 'dataTable'

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


jquery asp.net-mvc jquery-datatables
person Xaisoft    schedule 26.04.2013    source источник
comment
Вы вызывали jquery.js перед вызовом datatables?   -  person Shawn Barratt    schedule 27.04.2013
comment
Что ж, когда я смотрю на исходный код, мой скрипт вызывается перед jquery, поэтому я знаю, почему он не определен, но я думал, что модернизатор запустит jquery перед моим скриптом, поскольку он включен в файл _layout.cshtml.   -  person Xaisoft    schedule 27.04.2013
comment
Где вы включаете jQuery на своей странице?   -  person Artyom Neustroev    schedule 27.04.2013
comment
Я думал, что модернизатор включает его, который называется в моем _Layout.cshtml.   -  person Xaisoft    schedule 27.04.2013
comment
Я добавил его в свой _layout.cshtml, но теперь получаю другую ошибку.   -  person Xaisoft    schedule 27.04.2013
comment
Вы уверены, что пакет ~/bundles/modernizr содержит jQuery?   -  person Artyom Neustroev    schedule 27.04.2013
comment
@ArtyomNeustroev - Вроде бы нет, я добавил, но теперь получаю другую ошибку. Я обновил свой пост.   -  person Xaisoft    schedule 27.04.2013
comment
У вас есть ошибки 404 в консоли? Вы указали действительное местоположение для файла datatable.js?   -  person Artyom Neustroev    schedule 27.04.2013
comment
@ArtyomNeustroev - Jquery загружается, а скрипт dataTables - нет.   -  person Xaisoft    schedule 27.04.2013

Ответы (2)


arrow_upward
7
arrow_downward

По умолчанию, если у вас есть Debug="True" в вашем web.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

Дополнительная информация: Компоновщик, не включающий файлы .min

person Andrew Lewis    schedule 26.04.2013
comment
Это было оно. Меня это совершенно сбивало с толку. Спасибо. - person Xaisoft; 27.04.2013
comment
10 месяцев спустя: спасибо!! Наконец-то прошла эта головная боль. - person Stachu; 26.02.2014

arrow_upward
1
arrow_downward

Модернизатор из коробки с проектом 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(){ .... }
person Tim B James    schedule 26.04.2013
comment
Тим, jQuery уже был. Я добавил dataTable как ~/bundles/tables и добавил его в свой _Layout.cshtml, но он говорит, что dataTable не является методом - person Xaisoft; 27.04.2013
comment
Тим, я поместил @Scripts.Render(~/bundles/table) вверху своей страницы, но при просмотре исходного кода я не вижу скрипт плагина dataTables. Кроме того, если он уже отображается с помощью Layout.cshtml, почему я должен также помещать его на свою страницу Index.cshtml? - person Xaisoft; 27.04.2013
comment
Нет, вам это не нужно в вашем Index.cshtml. Просто убедитесь, что код в вашем Index.cshtml находится после рендеринга скриптов на странице _Layout. - person Tim B James; 27.04.2013
comment
Я поставил его вверху, но я даже не вижу загруженного плагина. - person Xaisoft; 27.04.2013
comment
Он вызывает jquery, а затем мой скрипт. Он не загружает плагин dataTable, который я поместил в ~/bundles/table. - person Xaisoft; 27.04.2013
comment
Путь к файлу правильный и существует? /Scripts/jquery.dataTables.min.js — это ваш онлайн-проект, в котором мы можем видеть и проверять сценарии? - person Tim B James; 27.04.2013