jquery UI CSS не загружается и создает проблемы со страницей asp.net mvc3 (неожиданная ошибка токена) - PullRequest
3 голосов
/ 29 декабря 2010

Во-первых, я вижу, что в моем проекте mvc3 уже был jquery ui, но нет файлов css темы.

Мне нужно было выбрать дату и, как обычно, нужно переопределить EditorFor DateTime. Сегодня я начал с использования файлов jquery ui js по умолчанию, поставляемых с проектом в виде скриптов. Средство выбора даты отображается нормально, только с законченным испорченным пользовательским интерфейсом на основе Site.css.

Итак, теперь я скачал сборку jquery (с темой start ) и проследил эту страницу о том, как ее собрать.

Я использую T4MVC, поэтому моя страница выглядит так:
Layout.cshtml

<script src="@Links.Scripts.jquery_1_4_4_js" type="text/javascript"></script>
<link href="@Links.Content.Site_css" rel="stylesheet" type="text/css" />
<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"></script>

Create.cshtml

 <script src="@Links.Scripts.jquery_validate_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_validate_unobtrusive_min_js" type="text/javascript"></script>
    <script src="@Links.Scripts.jquery_ui_1_8_7_custom_min_js" type="text/javascript"></script>

И вот результат:
alt text

Любые идеи, я пробовал пару комбинаций, где я помещаю теги script и css файлы в разные места, но, похоже, ничего не работает.


Обновление : Таким образом, я был глуп, чтобы в макете был тег <script> вместо <link>! Но проблема все еще существует, средство выбора даты показывает css из Site.css .
alt text


Обновление 2: с решением

Итак, я проверил chrome, и в разделе ресурсов я не вижу файл jquery css. Я запускаю скрипач и не вижу запроса на файл css.

Я вижу это!

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" **rel="Stylesheet"** type="text/css" />

Да! Правильно, я не добавил rel!

Ответы [ 2 ]

3 голосов
/ 29 декабря 2010

В вашем Layout.cshtml вы используете тег script для включения файла css.Изменить:

<script src="@Links.Content.start.jquery_ui_1_8_7_custom_css" type="text/javascript"><script> на

<link href="@Links.Content.start.jquery_ui_1_8_7_custom_css" rel="stylesheet"></link>
1 голос
/ 29 декабря 2010

Вам нужно будет поместить упаковочный контейнер вокруг средства выбора даты.Для этого потребуется выполнить два шага:

  1. При загрузке файла пользовательского интерфейса jquery нажмите «Дополнительные параметры темы», и у вас появится поле «Область CSS».Это позволяет вам локализовать CSS для средства выбора даты для определенного класса / области.Для этого примера давайте назовем его «jqueryui_element».

  2. Как только вы подключите новый CSS-файл, вам нужно будет обернуть его определенным вами классом / областью действия CSS.Самым простым способом, который я нашел, является следующая строка javascript:

    $('#ui-datepicker-div').wrap('<div class="jqueryui_element"></div>');

#ui-datepicker-div - это идентификатор по умолчанию, который применяется кэлементы DatePicker.Если по какой-то причине вы изменили это, его также нужно будет обновить здесь.

Надеюсь, это поможет!

...