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

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 les rendre comme ça (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, le RadioButton et CheckBox sont enveloppés avec un span et étiquette de la classe CSS est appliqué là.

<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 juste:

$("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.

  • comment combat seulement $(".maclasse")?
  • Pas de réponse, mais juste se consolant - quand j'ai commencé à travailler sur le .NET plate-forme quelques années en arrière et a été en utilisant les JS pour trouver la valeur d'une case à cocher, j'ai passé quelques heures à essayer de comprendre pourquoi mes valeurs n'étaient pas les alertes. Devinez quoi - les balises span. Je me suis toujours demandé pourquoi MS ajout de balises redondantes pour leurs composants radiobutton et cases à cocher!
  • Parfois, ce sera la durée et parfois, ce sera l'entrée. C'est le problème. $("input.maclasse") pourrait être un peu plus spécifique, mais $(".maclasse") serait de vous donner le même mal de tête.
  • Si vous utilisez la Case à cocher.Propriété de texte, une étiquette est ajoutée. La durée sera alors entourent à la fois, et les styles s'applique à la fois. C'est la raison pour laquelle les environs span.
  • Probablement à cause de choses comme ceci: stackoverflow.com/questions/7398462/...
  • Pour l'asp:case à cocher, j'ai remarqué que la durée est également ajouté lorsque vous utilisez le CssClass de la propriété.

InformationsquelleAutor Mark | 2009-06-15
  1. 48

    Contrôles Web dans le System.Web.UI.WebControls 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 commandes de la System.Web.UI.HtmlControls espace de noms à la place. Qui 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 contrôles dans le WebControls espace de noms.

    • Avec comment de nombreuses publications se produire, je pense que ce serait plus de maux de tête. Je suis d'accord que nous devrions être à l'aide de ces contrôles par défaut et d'intensifier les contrôles webcontrols en cas de besoin.
    • Si vous allez le faire, vous pourriez tout aussi bien utiliser ASP.Net MVC 😉
    • J'aimerais ça être une option.
    InformationsquelleAutor Guffa
  2. 113

    Cela a été me rend fou trop jusqu'à ce que j'ai trouvé le inputAttributes 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")
    • Si je pouvais, je donnerais +100, que j'en suis incapable je donne un +1 🙂 Merci!
    • Excellent travail de recherche de ce. Notez également que LabelAttributes fonctionne pour le style de la Case à cocher correspondante de l'étiquette.
    • c'est étrange parce que myCheckBoxControl.Attributes.Add va déclencher le même comportement que myCheckBoxControl.CssClass où il l'enveloppe dans un <span> tag, mais myCheckBoxControl.InputAttributes.Add ne sera pas - yay!
    • Malheureusement, les classes ajoutées à l'aide de cette méthode ne sont pas saisis dans le viewstate, tandis que les classes ajoutées à l'aide de CssClass NE saisis dans viewstate.
    • où ajouter cet. Je n'arrive pas à obtenir InputAttributes dans le code derrière c#
    • Merci pour ce meilleur conseil utile. Solution parfaite. En ce qui concerne meilleur.
    • sauvé ma journée +1
    • Mérite certainement +de 100

    InformationsquelleAutor JohnFx
  3. 5

    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.

    • Je suppose que vous avez à choisir votre poison. Laid sélecteurs jQuery ou sporadique sous-classé contrôles pour la présentation cohérente. Je serait cool si tous les contrôles d'entrée rendu avec un span. La cohérence est un mi-chemin décent chose.
    InformationsquelleAutor womp
  4. 3

    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 à 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.

    • J'aime cette suggestion! Fin de commentaire, je sais, mais cela m'a beaucoup aidé aujourd'hui!
    InformationsquelleAutor Spongeboy
  5. 1

    La plaine RadioButton est souvent rendue sans envergure. Si vous définissez CssClass, le Style, a Permis de propriétés du composant RadioButton est rendu avec une durée. Cette incohérence est une vraie douleur quand j'ai besoin de manipuler le bouton radio avec des scripts côté client. Ce que j'ai l'habitude de le faire est d'appliquer un mannequin CssClass de sorte qu'il sera toujours rendre une durée constante.

    InformationsquelleAutor Li Chen
  6. 0

    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);
            }

        }
    InformationsquelleAutor Stas Svishov
  7. 0

    la meilleure façon, je pense que c'est ce:

    
    public class HtmlTextWriterNoSpan : HtmlTextWriter
    {
        public HtmlTextWriterNoSpan(TextWriter textWriter) : base(textWriter)
        { 
        }

        protected override bool OnTagRender(string name, HtmlTextWriterTag key)
        {
            if (name == HtmlTextWriterTag.Span)
            {
                return false;
            }

            return base.OnTagRender(name, key);
        }
    }

    de l'utiliser dans le contrôle personnalisé:

    
    protected override void Render(HtmlTextWriter writer)
    {
        writer = new HtmlTextWriterNoSpan(writer);
        base.Render(writer);
        //HERE MORE CODE
    }
    • j'ai aimé que l'on
    InformationsquelleAutor Jimmi