Что такое параметр «HTML-атрибуты»?

Question

В следующем примере:

@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) 

по-видимому, с помощью второй перегрузки метода LabelFor, где второй параметр, htmlAttributes, документирована как

Объект, содержащий HTML-атрибуты для элемента

Что означает термин «атрибуты HTML» и каков синтаксис, который может использоваться для этого объекта?

Answer 1

Элементы HTML могут иметь атрибуты. Например:

<div class="some-css-class" data-foo="bar" /> 

Здесь все атрибуты, div «s являются class и data-foo.

Различные вспомогательные функции HTML Razor, которые принимают аргумент htmlAttributes, переводят предоставленный объект в атрибуты.

Вы можете использовать это, используя анонимный тип, где его свойства переводятся в имена атрибутов и их значения в значение соответствующего атрибута.

Например:

new 
{ 
    @class = "some-css-class", 
    data_foo = "bar" 
} 

Это приведет к атрибутам, показанных выше.

Подчеркивания в именах свойств переводятся в тире (How to specify data attributes in razor, e.g., data-externalid="23151" on @this.Html.CheckBoxFor(...)) и @ перед тем @class требуется, потому что class зарезервированное ключевое слово, которое не может быть использовано без его побега с @ (How can I add a class attribute to an HTML element generated by MVC's HTML Helpers?).

Там также overload accepting IDictionary<string, object> htmlAttributes, так что вы могли бы вместо того, чтобы передать словарь, а также:

new Dictionary<string, object> 
{ 
    { "class", "some-css-class" }, 
    { "data-foo", "bar" } 
} 

Answer 2

При использовании этого кода:

@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" }) 

Приложение будет использовать этот метод в «System.Web .Mvc "-namespace. И вот второй параметр htmlAttributes. Это атрибут с типом IDictionary. Здесь вы можете ввести любой HTML-атрибут и установить значение.

Пример:

@Html.LabelFor(m => m.Email, new { @class = "SmallInput", value = "someValue", data_validationType = "email" }) 

приведет к следующему HTML-код:

<label class="SmallInput" for="Email" value="someValue" data-validataionType="email">SomeEmailLabelText</label>