Добавить класс CSS в Html.EditorFor в MVC 2
Я пытаюсь добавить класс CSS в текстовое поле. Вот что я имею в виду:
<%: Html.EditorFor(m => m.StartDate) %>
Я попытался следовать инструкциям по этой ссылке, создав свой код:
<%: Html.EditorFor(m => m.StartDate, new { @class: "datepicker" }) %>
Но я получаю сообщение об ошибке компилятора:
Синтаксическая ошибка, ',' ожидается
Что я здесь не так делаю?
8 ответов
Я бы НАСТОЯТЕЛЬНО предложил использовать шаблоны редактора. Это определенно "правильный" стиль вашего EditorFor.
Вы можете указать свойству модели использовать шаблон редактора двумя различными способами.
Первый (самый простой) - создать шаблон редактора для определенного типа данных - DateTime
например.
Второй способ сделать это - декларативно установить его в ваших DataAnnotations с помощью UIHint.
редактировать
Я также хотел бы добавить, что вы должны использовать тип "date" в своем поле ввода, чтобы даже когда JavaScript отключен, ваш пользователь все еще мог видеть встроенный указатель даты (действует только в современных браузерах HTML5)<input id="meeting" type="date" value="2011-01-13"/>
С MVC3 я продолжал биться головой, потому что не мог заставить это работать. Я не хотел создавать целый шаблон EditorTemplate просто для добавления одного класса.
Ну, вместо использования EditorFor, используйте TextBoxFor, со знаком равенства, например, так:
@Html.TextBoxFor(m=> m.ZipCode, new { @class = "zip" })
Я думаю, что быстрый и грязный способ сделать это был бы в jQuery, да?
$(document).ready(function () {
$('#StartDate').addClass('datepicker');
});
Я знаю, что это старый вопрос, но я подумал, что могу внести свой вклад. У меня была такая же проблема, и я хотел избежать создания шаблонов редактора. Я просто хотел универсальное решение для обработки всего, что позволило бы мне задавать атрибуты html при использовании Html.EditorFor в представлении.
Мне очень понравился ответ ЦРУ, но я немного расширил его, чтобы вы могли передавать любые атрибуты, которые вам нужны. Я создал дополнительный метод Html.EditorFor, который принимает атрибуты html:
public static class EditorForExtentions
{
public static MvcHtmlString EditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Object htmlAttributes, bool extendAttributes)
{
string value = html.EditorFor(expression).ToString();
PropertyInfo[] properties = htmlAttributes.GetType().GetProperties();
foreach (PropertyInfo info in properties)
{
int index = value.ToLower().IndexOf(info.Name.ToLower() + "=");
if (index < 0)
value = value.Insert(value.Length - (value.EndsWith("/>") ? 2 : 1), info.Name.ToLower() + "=\"" + info.GetValue(htmlAttributes, null) + "\"");
else if (extendAttributes)
value = value.Insert(index + info.Name.Length + 2, info.GetValue(htmlAttributes, null) + " ");
}
return MvcHtmlString.Create(value);
}
}
Вы можете назвать это в таком виде
<%=Html.EditorFor(m => m.StartDate, new { @class = "datepicker" }, true)%>
Он использует обычный метод Html.EditorFor для получения строки html, а затем вводит необходимые атрибуты html.
В идеале, вы должны использовать шаблоны редактора. Я справился с этой проблемой, используя шаблон редактора внутри MvcHtmlString.Create(), который позволит вам перестроить реальный HTML-код. Конечно, вы захотите скопировать все в разделе "класс", чтобы сохранить шаблон редактора как можно более полезным.
Я попробовал многие из приведенных выше предложений, но в конце концов я остановился на этом, потому что я думаю, что он менее сложен и позволяет мне продолжать использовать шаблоны редактора:
@MvcHtmlString.Create(Html.EditorFor(m => m.StartDate).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line datepicker\""))
Для EditorFor нет перегрузки, которая позволяет устанавливать HtmlProperties. (IDictionary htmlAttributes)
Эта ссылка объясняет, как это сделать:
Я искал решение для применения стиля к конкретному блоку, сгенерированному вспомогательным методом @HTML.EditorFor.
Вопрос касался установки класса CSS для @HTML.EditorFor, но для всех, кто хочет редактировать стиль для одного элемента... вы можете, например, попробовать это:
В моем блоке я добавил стиль на основе идентификатора, сгенерированного помощником:..
<style>
#EnrollmentInfo_Format
{
width:50px;
font: normal 100% 'Lucida Grande',Tahoma,sans-serif;
font-size: 11px;
color: #2e6e9e;
}
</style>
а затем на моей странице (я делаю это в частичном представлении):
@Html.EditorFor(e => e.EnrollmentInfo.Format)
Вот очень простое решение: удалите двойные кавычки из "datepicker"
и перепечатайте их обратно в Visual Studio, и это должно работать.
У меня такая же проблема. Я скопировал / вставил пример кода из Интернета, и в коде был специальный тип цитаты, который вызвал ","
Синтаксическая проблема. Я знаю, это действительно не очевидно.