Флажок asp.net и атрибут данных html

В 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>

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

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

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


asp.net asp.net-4.0 asp.net-3.5
person Ortiga    schedule 22.05.2012    source источник
comment
Интересно .. Просто любопытно, для чего вы используете дополнительный атрибут? \   -  person Nick Rolando    schedule 22.05.2012

Ответы (4)


arrow_upward
21
arrow_downward

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

myCheckBox.InputAttributes.Add(...)

Справочные ссылки:

Обновить

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

Справочные ссылки:

person Lukasz M    schedule 22.05.2012
comment
Хорошо, я никогда раньше не замечал этого InputAttributes. Я попробовал Attributes.Add, но это не сработало. - person Ortiga; 22.05.2012

arrow_upward
4
arrow_downward

Таким способом движок рендеринга создает элемент управления 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);        
    });
})
person Claudio Redi    schedule 22.05.2012

arrow_upward
1
arrow_downward

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

Разметка:

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

Codebeside:

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

arrow_upward
0
arrow_downward

Если вы пытаетесь получить доступ к этому атрибуту при событии щелчка, вы можете сделать это, применив элемент управления. Например, у меня есть флажок, и я назначаю ему настраиваемый атрибут, как и вы.

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

Теперь на OnCheckedChanged мне нужно получить это значение, и в моем методе я получил объект sender.

protected void chk1_CheckedChanged(object sender, EventArgs e)
{
    CheckBox myControl = (CheckBox)sender;
    string value = myControl.Attributes["data-foo"].ToString();

}

Надеюсь, это кому-то поможет

person jazz b    schedule 21.02.2019