Я пытаюсь добавить класс к входу.
Это не работает:
@Html.EditorFor(x => x.Created, new { @class = "date" })
ASP.NET MVC 3 Razor - Добавление класса в EditorFor
Ответ 1
Добавление класса в Html.EditorFor не имеет смысла, так как внутри его шаблона может быть много разных тегов. Поэтому вам нужно назначить класс внутри шаблона редактора:
@Html.EditorFor(x => x.Created)
и в пользовательском шаблоне:
<div>
@Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>
Ответ 2
Как и в 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 для шаблонов редакторов
Ответ 3
Вы не можете установить класс для универсального редактора. Если вы знаете редактор, который вы хотите, вы можете использовать его сразу, там вы можете установить класс. Вам не нужно создавать какие-либо пользовательские шаблоны.
@Html.TextBoxFor(x => x.Created, new { @class = "date" })
Ответ 4
У меня была такая же неприятная проблема, и я не хотел создавать EditorTemplate, который применялся ко всем значениям DateTime (в моем интерфейсе были моменты, когда я хотел отображать время, а не jQuery UI раскрывающийся календарь). В моих исследованиях я столкнулся с коренными проблемами:
- Стандартный помощник TextBoxFor разрешил мне применить пользовательский класс "date-picker" для отображения ненавязчивого календаря пользовательского интерфейса jQuery, но 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 (это выражение HtmlHelper htmlHelper, Expression > , объект htmlAttributes = null) { var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, выражение, htmlAttributes?? new {@class= "текстовый блок однострочный выбор даты}}; 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');
});
Ответ 5
Вы можете использовать:
@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })
(По крайней мере, с ASP.NET MVC 5, но я не знаю, как это было с ASP.NET MVC 3.)
Ответ 6
Можно предоставить класс или другую информацию через дополнительнуюViewData - я использую это, когда я разрешаю пользователю создавать форму на основе полей базы данных (propertyName, editorType и editorClass).
На основе вашего первоначального примера:
@Html.EditorFor(x => x.Created, new { cssClass = "date" })
и в пользовательском шаблоне:
<div>
@Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>
Ответ 7
Не существует переопределения EditorFor, которое позволяет передавать анонимный объект, свойства которого каким-то образом будут добавлены в качестве атрибутов для некоторого тега, особенно для встроенных шаблонов редакторов. Вам нужно будет написать собственный собственный шаблон редактора и передать нужное значение в качестве дополнительных представлений.
Ответ 8
Используя jQuery, вы можете сделать это легко:
$("input").addClass("class-name")
Вот твой тег ввода
@Html.EditorFor(model => model.Name)
В DropDownlist вы можете использовать этот файл:
$("select").addClass("class-name")
В раскрывающемся списке:
@Html.DropDownlistFor(model=>model.Name)
Ответ 9
@Html.EditorFor(m=>m.Created ...)
не позволяет передавать какие-либо аргументы в поле "Текст"
Вот как вы можете применять атрибуты.
@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })
Ответ 10
Вы можете создать такое же поведение, создав простой настраиваемый редактор под названием 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 и т.д.
Ответ 11
Я использовал другое решение, используя селектор атрибутов CSS, чтобы получить то, что вам нужно.
Укажите атрибут HTML, который вы знаете, и введите нужный относительный стиль.
Как ниже:
input[type="date"]
{
width: 150px;
}
Ответ 12
Вы также можете сделать это через jQuery:
$('#x_Created').addClass(date);
Ответ 13
Мне просто нужно было установить размер одного текстового поля на одной странице. Атрибуты кодирования на модели и создание настраиваемых шаблонов редакторов были чрезмерными, поэтому я просто завернул вызов @Html.EditorFor с тегом span, который называется классом, который определяет размер текстового поля.
Объявление класса CSS:
.SpaceAvailableSearch input
{
width:25px;
}
Просмотреть код:
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>
Ответ 14
Один из лучших способов применения класса к @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.
Ответ 15
Нет необходимости создавать собственный шаблон для MVC 4. Используйте TextBox вместо EditFor, здесь специальные атрибуты html не поддерживаются, поддерживается только с MVC 5. TextBox должен поддерживать MVC 4, я не знаю о другой версии.
@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })
Ответ 16
Пока вопрос был нацелен на 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" })
(не забудьте включить пространство имен метода расширения в виде бритвы)
Объяснение:
Идея состоит в том, чтобы внедрить в существующий HTML. Я решил провести синтаксический анализ текущего элемента с использованием Linq-to-XML с помощью XDocument.Parse(). Я передаю htmlAttributes как тип object. Я использую MVC RouteValueDictionary для синтаксического анализа переданных htmlAttributes. Я объединяю атрибуты, в которых они уже существуют, или добавляет новый атрибут, если он еще не существует.
В случае, если вход не обрабатывается XDocument.Parse(), я отказываюсь от надежды и возвращаю исходную строку ввода.
Теперь я могу использовать преимущества DisplayFor (рендеринг типов данных, таких как валюта), но также иметь возможность указывать классы css (и любой другой атрибут, если на то пошло). Может быть полезно добавить такие атрибуты, как data-* или ng-* (Angular).