Casilla Asp.net y atributo de datos html

Question

En asp.net, si usa un atributo personalizado, generalmente se representa tal cual.

Teniendo en cuenta este margen de beneficio (nota: atributos tales como id, name y for se eliminaron en todos los ejemplos como su identificador generado/nombres son detallado):

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

se representa en asp.net como:

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

es decir, asp.net mantiene intacta data-foo.

Casilla de verificación se suele traducirse así:

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

Renders como:

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

Pero si se agrega un atributo personalizado en una casilla de verificación:

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

que presta como :

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

Como puede ver, un tramo en renderizado para contener el atributo. Esto también ocurre si agrega el atributo en el código detrás. Esto no sucede con ningún otro HtmlControl, AFAIK.

¿Alguien sabe por qué este tramo se representa para mantener el atributo?

¿Hay alguna forma de representar el atributo en la etiqueta de entrada?

Answer 1

No estoy seguro de por qué se representa con un palmo, pero supongo que se puede añadir el atributo directamente a la input elemento de la CheckBoxen el código-behid así:

myCheckBox.InputAttributes.Add(...) 

Re enlaces ferencia:

• http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.inputattributes.aspx
• http://forums.asp.net/p/541142/541562.aspx
• http://msdn.microsoft.com/en-us/library/system.web.ui.attributecollection.add.aspx

actualización

se utiliza un elemento adicional de los padres, de manera que los atributos que se aplican a un CheckBox pueden afectar tanto el input y el texto. Supongo que es un span (y no un div), porque es un elemento en línea, por lo que es más cómodo de usar en diferentes escenarios.

Enlaces de referencia:

• http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior
• http://learnwebdesignonline.com/span-div

Answer 2

Esta es la forma en que el motor de renderizado construye el control CheckBox, no hay mucho que hacer al respecto.

Algo que podría hacer es crear una entrada runat="server".

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

Otra opción es añadir el atributo data-foo usando jQuery en la carga de documentos

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

Answer 3

sólo para añadir otro método que utilizo cuando todo falla, siempre se puede utilizar un control literal y hacer que rinda lo que querer. Necesita hacer un poco más de trabajo al manejar la devolución de datos, pero a veces esta es la única forma de obtener el html que necesita.

de marcado:

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

Codebeside:?

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