ASP.NET MVC 2 и управление сортировкой таблиц v2 jquery

Question

Надеюсь, кто-нибудь может помочь, я играл с ASP.NET MVC 2 для учебного проекта.Недавно я хотел представить несколько более сложных эффектов, один из которых - сортируемые таблицы.Учитывая, что у меня есть ряд других элементов управления jquery, использование элемента управления jquery показалось хорошей идеей!

Я выбрал tablesorter v2 и принялся добавлять его на свой сайт.

1. Гарантировал, что мои таблицы, которые я хотел стилизовать, имели разделы thead / tbody.
2. Добавил файл .js в мою директорию Scripts.
3. Добавил это в начало моего частичного представления <script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.4.custom.min.js") %>" type="text/javascript"></script>
4. (Для информации) также пытался использовать эту запись в представлении «Site.Master».
5. Добавил id="leagueTable" в мою таблицу.
6. Добавил <script type="text/javascript"> $(document).ready(function () { $("#leagueTable").tablesorter(); }); </script>к частичному виду.

На этом этапе я запустил сайт, и все заработало, как и ожидалось - например, я могу отсортировать контент, но визуально ничего не изменилось.Теперь, чтобы добавить CSS ....

1. Я скачал "blue.zip" и скопировал все это в каталог /Content.
2. Добавил следующее в началоSite.Master, <link href="<%= Url.Content("~/Content/style.css") %>" type="text/css" rel="stylesheet" /> (NB. Style.css - это имя поставляемого CSS - изначально я переименовал его, но после проблем я сократил свои изменения, чтобы сохранить их как поставленные).

На этом этапеЯ перезапустил (убедившись в том, что Ctrl-F5 прекратил любое кэширование), и надеялся увидеть причудливый стиль, как показано в примерах ... вместо этого, хотя он по-прежнему функционален, ничто не выглядит иначе.(с помощью инструментов элемента Inspect) и подтвердил, что CSS загружается - jquery применяется, поскольку у меня работает функция сортировки - но он утверждает, что в CSS ничего не используется (с помощью Audits - "style.css: 100% (оценочный) не используется текущей страницей. ").

Что, черт возьми, я делаю неправильно?Почему я не применяю стили?[20 лет на C ++, в режиме реального времени, но не знаком с веб-разработкой]

Answer 1

Мой личный предпочтительный способ перепроверить, правильно ли ссылается статический ресурс (например, файл CSS), - это выполнить «Просмотр источника» в FireFox.Это представление ссылается на ссылки CSS, поэтому вы можете щелкнуть по нему и посмотреть, что загружается или не загружается.

Однако, поскольку вы упомянули Chrome, я бы сделал следующее:

• Нажмите кнопку «Управление текущей страницей» (вверху справа) и выберите «Разработчик» -> «Инструменты разработчика»

• Далее перейдите к исходному коду CSSссылку в теге заголовка и нажмите ссылку для файла CSS или выберите пункт меню «Ресурсы» вверху, в котором перечислены все ресурсы на странице, и перейдите к файлу CSS

• Это может сказать вам, что вам нужно включить «отслеживание ресурсов» на этом этапе - если это так, разрешите это.Вы можете

• Как только вы перейдете к файлу CSS на странице "Ресурсы", щелкните по нему.Это загрузит ресурс.Если он загружает ожидаемый CSS, тогда да, он загружается правильно.

Теперь давайте предположим, что загружается правильно, но у вас все еще есть проблемы.Я бы попробовал добавить свой собственный стиль CSS в таблицу стилей и посмотреть, обновляет ли она страницу, как вы ожидали.Может быть что-то простое, например

table td{ font-weight: bold; }

Если этот стиль вступает в силу, вы знаете, что таблица стилей применяется.

Если у вас все еще есть проблемы, не могли бы вы направить нас кстраницу (если она общедоступна), или, альтернативно, подготовьте пример того, что не работает на сайте, например http://jsbin.com/

Отправьте сообщение с обновлением, и я постараюсь помочь вам разобраться с этой проблемой.Я сам использовал TableSorter, поэтому знаком с плагином.

Answer 2

Что ж, решение после долгих поисков и следования указаниям @Matt оказалось очень простым - но я дважды проверил документацию для табличного сортировщика и обнаружил, что она там не упоминается!

Когда вы добавляете «синие» или «зеленые» темы, представленные на сайте, обеим требуется, чтобы таблице было присвоено имя класса tablesorter.Я ошибочно предполагал, что jQuery (который работал) изменил бы структуру таблицы, добавив свои собственные классы стилей, которые соответствуют определенным в теме!

Итак, резюмируем:

<script type="text/javascript">
    $(document).ready(function () { 
        $("#leagueTable1").tablesorter();
        $("#leagueTable2").tablesorter();
    });
</script>

<table id="leagueTable1">
    <thead>
    ...  // THIS TABLE WILL NOT BE STYLED
</table>
<table id="leagueTable2" class="tablesorter">
    <thead>
    ...  // THIS TABLE _WILL_ BE STYLED
</table>