Dlaczego program ASP.Net RadioButton i CheckBox renderuje się w obrębie zakresu?

Question

Spodziewam się następująco:

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

... do renderowania jak ten (z pewnymi atrybutami usuniętymi dla uproszczenia):

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

... gdy w rzeczywistości RadioButton i CheckBox zostanie zapakowany tagiem span, a klasa CSS zostanie tam zastosowana.

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

Czy istnieje ku temu powód i czy istnieje sposób, aby tego uniknąć? To sprawia, selektorów jQuery brzydki, ponieważ nie można złapać wszystkie z nich:

$("input.myClass") 

prawda jest po prostu będzie:

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

... ale to jest brzydkie. Mógłbym napisać własny selektor, ale znowu nie tak elegancko, jak być powinien.

Answer 1

Elementy sterujące w obszarze nazw System.Web.UI.WebControls mogą wyglądać inaczej w różnych przeglądarkach. Nie można na nich liczyć, zawsze renderując te same elementy. Mogą dodać coś, co według nich jest potrzebne, aby działało w określonej przeglądarce.

Jeśli chcesz mieć jakąkolwiek kontrolę nad tym, jak formanty są renderowane jako html, powinieneś zamiast tego użyć kontrolek w przestrzeni nazw System.Web.UI.HtmlControls. To znaczy:

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

Będą renderowane jako odpowiedni element HTML, bez dodatkowych elementów. Oznacza to oczywiście, że będziesz musiał wziąć odpowiedzialność za zgodność przeglądarki, ponieważ kontrola nie działa. Ponadto te elementy sterujące nie mają wszystkich funkcji kontrolek w przestrzeni nazw WebControls.

Answer 2

Każda kontrolka WebControl jest domyślnie renderowana jako znacznik <span> oraz dowolne niestandardowe renderowanie dodawane przez autora kontroli.

Jedną z pierwszych rzeczy, które zwykle robisz, pisząc niestandardowy WebControl, jest nadpisanie właściwości "TagKey" w celu renderowania elementu div lub innego niż span. Domyślną wartością tej właściwości jest HtmlTextWriterTag.Span.

Możesz podklasować elementy pola wyboru i zastąpić właściwość TagKey, aby renderować coś innego, ale musisz uporać się z wprowadzaniem wszystkich pól wyboru w swojej własnej wersji.

Answer 3

Natrafiłem na ten problem i próbowałem go rozwiązać za pomocą adapterów kontrolnych.

Patrz przykład here, aby zapoznać się z przykładem wykonania tej czynności z listą przycisków radiowych.

skończyło się to jako mój 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(" />"); 

    } 
} 

I to dodaje do moich przeglądarek Plik-

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

oczywiście, istnieją pewne wady tego.Wraz z tymi wymienionymi pod adresem the above link tracisz także funkcjonalność, jeśli nie implikujesz wszystkiego (powyższy kod nie pozwala na zaznaczenie przycisku radiowego). Istnieją pewne przyjazne dla CSS adaptery sterujące, ale nie obejmują one sterowania przyciskiem radiowym. Możliwe jest użycie reflektora w celu uzyskania domyślnego adaptera kontrolnego jako punktu wyjścia.

Answer 4

To również doprowadzało mnie do szaleństwa, dopóki nie znalazłem właściwości inputAttributes.

Na przykład, oto jak dodać klasę bezpośrednio sprawie kontroli pole wyboru bez bzdur Okres:

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

Answer 5

Znalezione podobnego problemu, napisałem funkcję prostego jQuery oparciu włączyć/pole wyboru Wyłącz i nadrzędną rozpiętość

function resetChk(ctl, bEnable) { 

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

     } 

Answer 6

najlepszym sposobem, myślę, jest to:

 

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

do użycia I t w sterowaniu niestandardowym:

 

    protected override void Render(HtmlTextWriter writer) 
    { 
     writer = new HtmlTextWriterNoSpan(writer); 
     base.Render(writer); 
     // HERE MORE CODE 
    } 
 

Answer 7

Prosty przycisk radiowy jest często wyświetlany bez rozpiętości. Jeśli ustawisz właściwości CssClass, Style, Enabled, RadioButton będzie renderowany z rozpiętością. Ta niekonsekwencja jest prawdziwym problemem, kiedy muszę manipulować przyciskiem radiowym skryptami po stronie klienta. Zazwyczaj stosuję obojętny CssClass, aby zawsze konsekwentnie renderował rozpiętość.