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

Я пытаюсь добавить класс к входному.

Это не работает:

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

16 ответов


добавить класс Html.EditorFor не имеет смысла, поскольку внутри его шаблона у вас может быть много разных тегов. Поэтому вам нужно назначить класс внутри шаблона редактора:

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

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

<div>
    @Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>

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

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

  • метод автоматически преобразует DateTime в ShortDateString, необходимый календарю jQuery (jQuery завершится ошибкой, если время присутствует).
  • по умолчанию помощник применит необходимые htmlAttributes для отображения календаря jQuery, но при необходимости их можно переопределить.
  • если дата равна null, 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)

для DropDownlist вы можете использовать этот:

$("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 как type 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 бритвы

@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.