55 votos

¿Por qué hacen ASP.Net RadioButton y CheckBox dentro de un lapso?

Yo esperaría que este:

<asp:CheckBox    ID="CheckBox1"    runat="server" CssClass="myClass" />
<asp:RadioButton ID="RadioButton1" runat="server" CssClass="myClass" />
<asp:TextBox     ID="TextBox1"     runat="server" CssClass="myClass" />

...para representar como este (con algunos atributos eliminado por simplicidad):

<input id="CheckBox1"    type="checkbox" class="myClass" />
<input id="RadioButton1" type="radio"    class="myClass" />
<input id="TextBox1"     type="text"     class="myClass" />

...cuando en realidad, el RadioButton y CheckBox ser envueltas con un span de la etiqueta y de la clase CSS se aplica allí.

<span class="myClass"><input id="CheckBox1"    type="checkbox" /></span> 
<span class="myClass"><input id="RadioButton1" type="radio"    /></span> 
<input type="text" id="TextBox1" class="myClass" />

Hay una razón para ello y es allí una manera de evitarlo? Esto hace que los selectores de jQuery feo ya que no se puede coger todos ellos con:

$("input.myClass")

De hecho es el ir justo a:

$("input.myClass, span.myClass input")

...pero que es feo. Puedo escribir mi propio seleccionador, pero de nuevo no tan elegante como debe ser.

116voto

JohnFx Puntos 23761

Esto me estaba volviendo loca demasiado hasta que encontré la propiedad inputAttributes.

Por ejemplo, aquí es cómo agregar una clase directamente sobre el control checkbox sin el absurdo palmo:

myCheckBoxControl.InputAttributes.Add("class", "myCheckBoxClass")

50voto

Guffa Puntos 308133

Controles Web de la System.Web.UI.WebControls de espacio de nombres se puede hacer de manera diferente en los distintos navegadores. No se puede contar con ellos de representación de los mismos elementos de siempre. Se puede añadir nada de lo que ellos piensan que es necesario para hacer que funcione en el navegador.

Si usted quiere tener el control sobre el modo en que los controles se representan como html, usted debe utilizar los controles de la System.Web.UI.HtmlControls de espacio de nombres de lugar. Que es:

<input type="checkbox" id="CheckBox1" runat="server" class="myClass" />
<input type="radio" name="RadioButton1" runat="server" class="myClass" />
<input type="text" id="TextBox1" runat="server" class="myClass" />

Ellos rendirán así como el correspondiente elemento html, sin más elementos que se añaden. Por supuesto, esto significa que usted tendrá que tomar la responsabilidad de la compatibilidad del navegador, ya que el control no. Además, los controles no tienen todas las características de los controles en la WebControls de espacio de nombres.

5voto

womp Puntos 71924

Cada WebControl por defecto se muestra como un <span> etiqueta, además de cualquier representación personalizada que el control de la autora agrega.

Una de las primeras cosas que se suelen hacer cuando se escribe una costumbre WebControl es reemplazar la "TagKey" propiedad de procesamiento de un div, o algo además de un palmo. El valor predeterminado de esta propiedad es HtmlTextWriterTag.Span.

Usted podría subclase tu casilla de verificación de los elementos y anular el TagKey propiedad para representar algo más, pero entonces usted tiene que tratar de hacer todas tus casillas de verificación en su propia versión.

3voto

Spongeboy Puntos 1426

Me encontré con este tema y estoy intentado solucionar mediante el control de los adaptadores.

Vea aquí un ejemplo de hacer esto con un botón de radio de la lista.

Terminé con esto como mi RadioButtonAdaptor-

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;

public class RadioButtonAdapter : WebControlAdapter
{
    protected override void Render(HtmlTextWriter writer)
    {
        RadioButton targetControl = this.Control as RadioButton;

        if (targetControl == null)
        {
            base.Render(writer);

            return;
        }

        writer.WriteBeginTag("input");
        writer.WriteAttribute("type", "radio");
        writer.WriteAttribute("name", targetControl.GroupName);
        writer.WriteAttribute("id", targetControl.ClientID);            

        if (targetControl.CssClass.Length > 0)
        {
            writer.WriteAttribute("class", targetControl.CssClass);
        }      

        writer.Write(" />");

    }
}

Y esto añadido a mi navegadores de archivos

<browser refID="Default">
        <controlAdapters>            
            <adapter controlType="System.Web.UI.WebControls.RadioButton"
               adapterType="RadioButtonAdapter" />
        </controlAdapters>
</browser>

Por supuesto, hay algunos aspectos negativos de esta. Junto con los mencionados en el enlace de arriba, también se pierde la funcionalidad si no impliment todo (el código anterior no permite un botón de radio para ser activada). Hay un poco de CSS friendly control de adaptadores, pero no cubren el botón de radio control. Puede ser posible el uso de un Reflector, para obtener el control predeterminado adaptador como punto de partida.

0voto

Stas Svishov Puntos 193

Encontrado problema similar, escribió una función simple jQuery basado para habilitar/deshabilitar la casilla de verificación y padre palmo

function resetChk(ctl, bEnable) { 

            if (bEnable){
                ctl.removeAttr('disabled').parent().removeAttr('disabled');
            }else{
                ctl.attr('disabled', true).parent().attr('disabled', true);
            }

        }

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X