Атрибут checkbox и html атрибута Asp.net

В asp.net, если вы используете пользовательский атрибут, обычно он отображается как-есть.

Учитывая эту разметку (примечание:), такие как id, name и for были удалены во всех примерах, поскольку их сгенерированные идентификаторы/имена являются подробными):

<asp:TextBox runat="server" data-foo="bar" />

Отображается в asp.net как:

<input type="text" data-foo="bar" />

То есть asp.net сохраняет data-foo нетронутым.

Флажок обычно отображается следующим образом:

<asp:CheckBox runat="server" Text="Normal" />

Относится как:

<input type="checkbox" />
<label>Normal</label>

Но если вы добавите специальный флажок:

<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar"  />

Он отображается как:

<span data-foo="bar">
    <input type="checkbox" />
    <label>Custom attribute</label>
</span>

Как вы можете видеть, диапазон в rendered для хранения атрибута. Это также происходит, если вы добавите атрибут в код позади. Этого не происходит с другими HtmlControl, AFAIK.

Кто-нибудь знает, почему этот диапазон отображается для хранения атрибута?

Есть ли способ визуализации атрибута во входном теге?

Ответы

Ответ 1

Я не уверен, почему это отображается с помощью диапазона, но я полагаю, вы можете добавить атрибут непосредственно к элементу input CheckBox в code-behid следующим образом:

myCheckBox.InputAttributes.Add(...)

Ссылки ссылки:

Обновление

Используется дополнительный родительский элемент, так что атрибуты, которые вы применяете к CheckBox, могут влиять как на input, так и на текст. Я полагаю, что это span (а не div), потому что это встроенный элемент, что делает его более удобным для использования в разных сценариях.

Ссылки ссылки:

Ответ 2

Это способ, которым движок рендеринга создает элемент управления CheckBox, его не так много.

Что-то, что вы могли бы сделать, это создать вход runat="server".

<input id="myInput" runat="server" type="checkbox" data-foo="bar"/>
<label>Custom attribute</label>

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

$(function(){
    $('span[data-foo]').each(function(){
        var $span = $(this);
        var value = $span.data('foo');
        $span.find('input').data('foo',value);        
    });
})

Ответ 3

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

Разметка:

<asp:Literal ID="myLiteral" runat="server"/>

Codebeside:

myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)