Добавить класс 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)

Эта ссылка объясняет, как это сделать:

http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-_2D00_-ASP.Net-MVC-2.0-Beta_2D00_1.aspx

Я искал решение для применения стиля к конкретному блоку, сгенерированному вспомогательным методом @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, и это должно работать.

У меня такая же проблема. Я скопировал / вставил пример кода из Интернета, и в коде был специальный тип цитаты, который вызвал "," Синтаксическая проблема. Я знаю, это действительно не очевидно.

Другие вопросы по тегам