Как сделать, чтобы шаблоны MVC3 Editor соответствовали теме jQueryUI - PullRequest
Новая
       3

Как сделать, чтобы шаблоны MVC3 Editor соответствовали теме jQueryUI

1 голос
/ 04 января 2012

Я использую MVC3 и хочу, чтобы мои представления были полностью интегрированы с темами jQueryUI. Это означает, что для стандартных @Html.EditorFor полей я бы хотел, чтобы их классы css реализовали выбранную мной тему jQueryUI, и если я переключаю темы, мои стандартные входы MVC3 изменятся соответствующим образом, даже если они не украшены улучшениями jQueryUI?

По умолчанию, когда я звоню @Html.EditorFor(x => Model.FirstName), вывод выглядит следующим образом: 

<input class="text-box single-line" data-val="true" data-val-length="The First Name field must be between 3 and 50 characters in length" data-val-length-max="50" data-val-length-min="3" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" type="text" value="John" />

Это красиво и чисто, потому что у меня есть все атрибуты проверки. Однако если я попытаюсь вызвать @Html.EditorFor(x => Model.FirstName, new { @class = "ui-widget ui-state-default ui-widget-content" }) для применения стиля jQueryUI, классы CSS не будут применены к полю ввода (они остаются «однострочными»).

Я обнаружил, что если я изменю @Html.EditorFor() на @Html.ListBoxFor() и включу "new {@class =" ... "}" в мои выбранные классы CSS, он будет отображаться с соответствующими классами jQueryUI, но я действительно как гибкость EditorFor для использования с любым типом ввода. Однако даже при использовании только TextBoxFor я не люблю каждый раз включать классы jQueryUI.

Чтобы попытаться преодолеть это, я попытался создать общий шаблон EditorTemplate, производный от System.String, и вручную вставить классы css, что сработало, но затем я потерял всю автоматическую функциональность для атрибутов проверки, и это кажется «хоккейным». Кажется, должен быть более простой способ автоматически применять пользовательский CSS глобально к помощникам EditorFor.

Итак, мои вопросы:

  1. Как я могу сказать EditorFor использовать пользовательские классы CSS?
  2. Как я могу переопределить EditorFor (или, как минимум, TextBoxFor), чтобы глобально применять классы CSS, чтобы мне не приходилось их повторять?
  3. В качестве бонуса есть какие-либо ссылки на то, для чего используются классы jQueryUI (например, когда я должен применить ui-state-default против ui-widget-content ) чтобы все мои стандартные входы MVC3 выглядели как входы, украшенные улучшениями jQueryUI?

Ответы [ 2 ]

4 голосов
/ 04 января 2012

1) Нельзя использовать существующий EditorFor() для указания дополнительных HTML-параметров. Параметр, который вы используете в своем примере, предназначен для дополнительных данных представления, а не для атрибутов HTML. EditorFor() создаст свои собственные атрибуты HTML.

В качестве альтернативы вы можете использовать TextBoxFor() вместо этого и использовать параметр htmlAttributes: 

@Html.TextBoxFor(m => m.UserName, new { @class = "ui-widget ui-state-default ui-widget-content" })

2) Шаблон EditorFor() можно переопределить с помощью шаблона редактора. Эта ссылка демонстрирует, как.

По сути, для создания EditorTemplate вам потребуется создать папку с именем

EditorTemplates

в папке Views. Имя папки должно быть точным, и местоположение папки является релевантным. Если папка EditorTemplates находится, например, в папке Views / Account (если это существовало, скажем), тогда шаблон будет доступен только для соответствующих представлений учетной записи. Если вы поместите его в общую папку, он будет доступен для всех представлений.

В папке EditorTemplates вы должны создать частичное представление с именем в соответствии с типом данных, который должен быть обработан. Например, я предполагаю, что вы хотите, чтобы строки обрабатывались только с EditorFor, поэтому я назвал его String.cshtml.

Тогда в частичном представлении я определил следующее: 

@inherits System.Web.Mvc.WebViewPage<string>

@Html.TextBoxFor(m => m, new { @class = "ui-widget ui-state-default ui-widget-content" })

И это все. Везде, где EditorFor теперь обрабатывает строку, вы должны получить что-то вроде: 

<input class="ui-widget ui-state-default ui-widget-content" data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />

3) В идеале вы должны задать только один вопрос в вопросе переполнения стека, и простой поиск в Google должен ответить на этот вопрос. Однако вот определения ui-state-default и ui-widget-content :

.ui-state-default: класс, применяемый к кнопкам, похожим на кнопки элементы. Применяет стили элемента «кликабельный по умолчанию» к элементу и его дочерний текст, ссылки и значки.

.ui-widget-content: Класс, применяемый к контейнерам содержимого. относится стили контейнера содержимого для элемента и его дочернего текста, ссылок и иконки. (может применяться к родителю или родному элементу заголовка)

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

0 голосов
/ 05 января 2012

Как сказал Опасный:

1) Вы не можете этого сделать. EditorFor не предоставляет возможности сделать это. Вы можете попытаться реализовать свой собственный метод EditorFor на основе источника (источник MVC доступен для загрузки из codeplex), но это увеличивает ваши затраты на обслуживание, когда появляются новые версии MVC.

2) Шаблоны EditorFor по умолчанию доступны для скачивания. Вы можете скачать их и изменить их для своих нужд. Загрузите фьючерсы MVC3, и шаблоны по умолчанию будут там.

http://aspnet.codeplex.com/releases/view/58781

Единственный способ заставить не шаблонные функции иметь разные стили - это написать свой собственный Html-помощник, опять же, вы можете основывать его на исходном коде и изменять его для своих нужд.

...