Pourquoi ne ASP.Net RadioButton et la Case à cocher rendre à l'intérieur d'un Span?

Question

Je m'attends à ce:

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

...pour render comme ceci (avec certains attributs supprimés pour des raisons de simplicité):

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

...alors qu'en fait, l' RadioButton et CheckBox sont enveloppés avec un span balise et la classe CSS est appliqué.

<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" />

Est-il une raison pour cela, et est-il un moyen de l'éviter? Il fait des sélecteurs jQuery laid puisque vous ne pouvez pas toutes les attraper avec:

$("input.myClass")

Accordé, il va tout simplement:

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

...mais que c'est laid. Je pourrais écrire mon propre sélecteur, mais encore une fois pas aussi élégant comme il se doit.

Answer 1

Cela a été me rend fou trop jusqu'à ce que j'ai trouvé le inputAttributes de la propriété.

Par exemple, voici comment ajouter une classe directement sur la case de contrôle sans que la durée de non-sens:

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

Answer 2

Les contrôles Web de l' System.Web.UI.WebControls de l'espace de noms peut s'afficher différemment dans les différents navigateurs. Vous ne pouvez pas compter sur eux rendu les mêmes éléments toujours. Ils peuvent ajouter quoi que ce soit qu'ils pensent qu'il est nécessaire pour le faire fonctionner dans le navigateur.

Si vous voulez avoir plus aucun contrôle sur la façon dont les contrôles sont rendus au format html, vous devez utiliser les contrôles de l' System.Web.UI.HtmlControls de l'espace de noms à la place. C'est:

<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" />

Ils rendront tout comme le correspondant de l'élément html, sans éléments supplémentaires ajoutés. Bien sûr, cela signifie que vous aurez à prendre la responsabilité de la compatibilité du navigateur, ainsi que le contrôle ne fonctionne pas. Aussi, ces contrôles n'ont pas toutes les fonctionnalités des commandes de l' WebControls d'espace de noms.

Answer 3

Chaque WebControl par défaut rendu sous la forme d'un <span> tag, en plus de toute de rendu personnalisé que le contrôle de l'auteur ajoute.

L'une des premières choses que vous faites habituellement lorsque vous écrivez une coutume WebControl est de remplacer la "TagKey" propriété de rendre un div, ou quelque chose de plus que d'un empan. La valeur par défaut de cette propriété est HtmlTextWriterTag.Span.

Vous pourriez sous-classe votre case d'articles et de remplacer les TagKey propriété de rendre quelque chose d'autre, mais alors vous avez à traiter avec toutes les cases à cocher dans votre propre version.

Answer 4

Je suis tombé sur ce problème et je suis tenté de le résoudre à l'aide de contrôle des adaptateurs.

Voir ici pour un exemple de le faire à un bouton radio liste.

J'ai fini avec ce que mon 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(" />");

    }
}

Et cela ajouté à mon navigateur de fichier

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

Bien sûr, il ya certains inconvénients à cela. Avec ceux mentionnés dans le lien ci-dessus, vous perdez également des fonctionnalités, si vous n'avez pas impliment tout (le code ci-dessus ne permettent pas un bouton radio à vérifier). Il y a un peu de CSS de contrôle amicale des adaptateurs, mais elles ne couvrent pas le bouton radio de contrôle. Il peut être possible d'utiliser un Réflecteur pour obtenir le contrôle par défaut de l'adaptateur comme un point de départ.

Answer 5

Trouvé de problème similaire, a écrit un jQuery simple fonction pour activer/désactiver la case à cocher et parent span

function resetChk(ctl, bEnable) { 

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

        }