Регулировка размера редактора для блока с использованием встроенного файла css или site.css

Question

У меня есть приложение mvc 3, которое использует Razor. На сайте есть несколько форм, где информация запрашивается у пользователя. Проблема в том, что некоторые из этих блоков должны быть длиннее других. Я заблудился о том, как изменить ширину конкретного редактора для блоков с помощью CSS. Приведенное ниже поле является примером одного из полей ...

        <tr>

    <td>@Html.EditorFor(Function(model) model.School_Title)
        @Html.ValidationMessageFor(Function(model) model.School_Title)</td>
    <td> @Html.EditorFor(Function(model) model.Short_Name)
        @Html.ValidationMessageFor(Function(model) model.Short_Name)</td>

  </tr>

Любая помощь будет принята с благодарностью ...

Answer 1

На этот вопрос уже несколько раз отвечали в различных сценариях здесь, на SO. По сути, вы не можете добавить CSS напрямую к EditorFor()

Я НАСТОЯТЕЛЬНО рекомендую использовать Шаблоны редактора . Это определенно «правильный» стиль вашего Editor.

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

Первый (самый простой) - создать шаблон редактора для определенного типа данных - например, DateTime.
Второй способ сделать это - декларативно установить его в своих аннотациях данных, используя UIHint .

В качестве альтернативы, если вы зациклены на использовании встроенного CSS для своего редактора, вам нужно будет использовать TextBoxFor()

@Html.TextBoxFor(Function(model) model.School_Title, New With {.class = "CustomCssAttribute" }))

Answer 2

School_Title - текстовое поле. Редактор для текстового поля сгенерирует элемент ввода текста HTML.

Ввод HTML можно стилизовать, добавив в ваш сайт следующее.

input[type="text"]{
   background-color: gray;
   color: white;
}

Это будет применяться ко всем текстовым вводам, которые используют таблицу стилей site.css.

Альтернативное решение - применить класс CSS через атрибуты HTML. Например:

@Html.TextBoxFor(model => model.School_Title, new { @class: "myStyle" })

В вашем site.css вам нужно добавить свой стиль:

.myStyle
{
   background-color: gray;
   color: white;
}

Вы не должны бояться редакторов. Единственный способ привыкнуть к ним, это написать собственный редактор. Напишите редактор, который создает div с некоторыми стилями. Встроенные редакторы для текстовых полей ничем не отличаются. Они способствуют инкапсуляции и повторному использованию кода. В конце концов вы должны увидеть необходимость писать редакторы для графов объектов.

Например, у меня может быть модель представления, которая содержит данные клиента. Если я хочу создать или обновить данные клиента, я буду использовать @Html.EditorFor(model => model, "Customer"), или если я хочу отобразить информацию о клиенте, я буду использовать

@Html.DisplayFor(model => model, "Customer")