ASP.NET MVC 3 Razor-добавление класса в EditorFor

по состоянию на ASP.NET MVC 5.1, добавление класса в EditorFor возможно (указан исходный вопрос ASP.NET MVC 3, и принятый ответ по-прежнему является лучшим с учетом этого).

@Html.EditorFor(x=> x.MyProperty,
    new { htmlAttributes = new { @class = "MyCssClass" } })

посмотреть: что нового в ASP.NET MVC 5.1, поддержка Bootstrap для шаблонов редактора

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

@Html.TextBoxFor(x => x.Created, new { @class = "date" }) 

вы можете использовать:

@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })

(по крайней мере, с ASP.NET MVC 5, но я не знаю, как это было с ASP.NET MVC 3.)

у меня была такая же неприятная проблема, и я не хотел создавать EditorTemplate, который применялся ко всем значениям DateTime (в моем пользовательском интерфейсе были времена, когда я хотел отображать время, а не jQuery UI выпадающий календарь). В моем исследовании, корневые проблемы, с которыми я столкнулся были:

• стандартный TextBoxFor helper позволил мне применить пользовательский класс "date-picker" для визуализации ненавязчивого календаря jQuery UI, но TextBoxFor не будет отформатируйте DateTime без времени, что приведет к сбою отрисовки календаря.
• стандартный EditorFor будет отображать DateTime в виде форматированной строки (при оформлении с соответствующими атрибутами, такими как [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")], но это не позволит мне применить пользовательский класс "выбор даты".

поэтому я создал пользовательский класс HtmlHelper, который имеет следующие преимущества:

• метод автоматически преобразует дату и время в ShortDateString, необходимый для календаря jQuery (jQuery не будет работать, если время присутствует).
• по умолчанию помощник будет применять необходимые htmlAttributes для отображения календаря jQuery, но при необходимости их можно переопределить.
• если дата равна нулю, ASP.NET MVC поставит дату 1/1/0001 в качестве значения.

этот метод заменяет пустой строкой.

public static MvcHtmlString CalenderTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAttributes ?? new { @class = "text-box single-line date-picker" });
    var xDoc = XDocument.Parse(mvcHtmlString.ToHtmlString());
    var xElement = xDoc.Element("input");
    if (xElement != null)
    {
        var valueAttribute = xElement.Attribute("value");
        if (valueAttribute != null)
        {
            valueAttribute.Value = DateTime.Parse(valueAttribute.Value).ToShortDateString();
            if (valueAttribute.Value == "1/1/0001")
                valueAttribute.Value = string.Empty;
        }
    }
    return new MvcHtmlString(xDoc.ToString());
}

и для тех, кто хочет знать синтаксис JQuery, что ищет объекты с помощью date-picker украшение класса, чтобы затем отобразить календарь, вот это:

$(document).ready(function () {
    $('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true });
    $('.date-picker').datepicker('option', 'showAnim', 'slideDown');
});

можно предоставить класс или другую информацию через AdditionalViewData - я использую это, где я позволяю пользователю создавать форму на основе полей базы данных (propertyName, editorType и editorClass).

на основе вашего первоначального примера:

@Html.EditorFor(x => x.Created, new { cssClass = "date" })

и в пользовательском шаблоне:

<div>
    @Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>

нет EditorFor переопределение, которое позволяет передать анонимный объект, свойства которого каким-то образом будут добавлены в качестве атрибутов в какой-либо тег, особенно для встроенных шаблонов редактора. Вам нужно будет написать свой собственный шаблон пользовательского редактора и передать значение, которое вы хотите в качестве дополнительных viewdata.

@Html.EditorFor(m=>m.Created ...) 

не позволяет передавать какие-либо аргументы для текстового поля

вот как вы можете применять атрибуты.

@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })

используя jQuery, вы можете сделать это легко:

$("input").addClass("class-name")

вот ваш входной тег

@Html.EditorFor(model => model.Name)

для выпадающего списка вы можете использовать этот:

$("select").addClass("class-name")

Для Dropdownlist С:

@Html.DropDownlistFor(model=>model.Name)

вы можете создать такое же поведение, создав простой пользовательский редактор с именем DateTime.cshtml, сохранение его в Views / Shared / EditorTemplates

@model DateTime

@{
    var css = ViewData["class"] ?? "";
    @Html.TextBox("", (Model != DateTime.MinValue? Model.ToString("dd/MM/yyyy") : string.Empty), new { @class = "calendar medium " + css});
}

и в

@Html.EditorFor(model => model.StartDate, new { @class = "required" })

обратите внимание, что в моем примере я жестко кодирую два класса css и формат даты. Вы можете, конечно, изменить. Вы также можете сделать то же самое с другими атрибутами html, такими как readonly, disabled и т. д.

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

укажите атрибут HTML, который вы знаете, и поместите в относительный стиль, который вы хотите.

, как показано ниже:

input[type="date"]
{
     width: 150px;
}

нет необходимости создавать пользовательский шаблон для MVC 4. Используйте поле вместо EditFor здесь специальные атрибуты html не поддерживаются, он поддерживается только из MVC 5. TextBox должен поддерживать MVC 4, я не знаю о другой версии.

@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })

хотя вопрос был нацелен на MVC 3.0, мы находим, что проблема сохраняется и в MVC 4.0. MVC 5.0 теперь включает в себя изначально перегрузку для htmlAttributes.

я вынужден использовать MVC 4.0 на моем текущем месте работы и должен был добавить класс css для интеграции JQuery. Я решил эту проблему с помощью одного метода расширения...

Метод Расширения:

using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using System.Xml.Linq;

namespace MyTest.Utilities
{
    public static class MVCHelperExtensionMethods
    {
        public static MvcHtmlString AddHtmlAttributes(this MvcHtmlString input, object htmlAttributes)
        {
            // WE WANT TO INJECT INTO AN EXISTING ELEMENT.  IF THE ATTRIBUTE ALREADY EXISTS, ADD TO IT, OTHERWISE
            // CREATE THE ATTRIBUTE WITH DATA VALUES.

            // USE XML PARSER TO PARSE HTML ELEMENT
            var xdoc = XDocument.Parse(input.ToHtmlString());
            var rootElement = (from e in xdoc.Elements() select e).FirstOrDefault();

            // IF WE CANNOT PARSE THE INPUT USING XDocument THEN RETURN THE ORIGINAL UNMODIFIED.
            if (rootElement == null)
            {
                return input;
            }

            // USE RouteValueDictionary TO PARSE THE NEW HTML ATTRIBUTES
            var routeValueDictionary = new RouteValueDictionary(htmlAttributes);

            foreach (var routeValue in routeValueDictionary)
            {
                var attribute = rootElement.Attribute(routeValue.Key);

                if (attribute == null)
                {
                    attribute = new XAttribute(name: routeValue.Key, value: routeValue.Value);
                    rootElement.Add(attribute);
                }
                else
                {
                    attribute.Value = string.Format("{0} {1}", attribute.Value, routeValue.Value).Trim();
                }
            }

            var elementString = rootElement.ToString();
            var response = new MvcHtmlString(elementString);
            return response;
        }
    }
}

HTML-разметки Использование:

@Html.EditorFor(expression: x => x.MyTestProperty).AddHtmlAttributes(new { @class = "form-control" })

(обязательно включите пространство имен метода расширения в представление razor)

объяснение: Идея состоит в том, чтобы внедрить в существующий HTML. Я решил проанализировать текущий элемент с помощью Linq-to-XML с помощью XDocument.Parse(). Я передаю htmlAttributes как тип object. Я использую MVC RouteValueDictionary для разбора переданных htmlAttributes. Я объединяю атрибуты там, где они уже существуют, или добавляю новый атрибут, если он еще не существует существовать.

в случае, если вход не может быть проанализирован с помощью XDocument.Parse() Я оставляю все надежды и возвращаю исходную входную строку.

теперь я могу использовать преимущество DisplayFor (рендеринг типов данных, таких как валюта соответственно), но также иметь возможность указывать классы css (и любой другой атрибут в этом отношении). Может быть полезно для добавления атрибутов, таких как data-* или ng-* (угловые).

вы также можете сделать это с помощью jQuery:

$('#x_Created').addClass(date);

мне просто нужно, чтобы установить размер одного текстового поля на одной странице. Атрибуты кодирования на модели и создание пользовательских шаблонов редактора были излишними, поэтому я просто завернул @Html.Вызов EditorFor с тегом span, который вызвал класс, определяющий размер текстового поля.

объявление класса CSS:

.SpaceAvailableSearch input
{
    width:25px;
}

Просмотр кода:

<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>

одним из лучших способов, чтобы применить класс @Html.EditorFor() в MVC3 RAzor-это

@Html.EditorFor(x => x.Created)


<style type="text/css">

#Created
{
    background: #EEE linear-gradient(#EEE,#EEE);   
    border: 1px solid #adadad;
    width:90%;
    }
</style>

это добавит выше стиль для вашего EditorFor()

он работает для MVC3.