ASP.Net RadioButton 및 CheckBox가 Span 내부에서 렌더링되는 이유는 무엇입니까?

ASP.Net RadioButton 및 CheckBox가 Span 내부에서 렌더링되는 이유는 무엇입니까?

---

나는 이것을 기대할 것이다 :

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

... 다음과 같이 렌더링하려면 (간단 함을 위해 일부 속성이 제거됨) :

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

... 때 사실, RadioButton그리고이 CheckBox로 감싸 얻을 span태그와 CSS 클래스가 적용됩니다.

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

이것에 대한 이유가 있고 그것을 피할 수있는 방법이 있습니까? 다음으로 모든 것을 잡을 수 없기 때문에 jQuery 선택기를 추악하게 만듭니다.

$("input.myClass")

허용됩니다.

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

...하지만 그것은 추악합니다. 나만의 선택자를 작성할 수는 있지만 다시는 우아하지 않습니다.

---

System.Web.UI.WebControls네임 스페이스의 웹 컨트롤은 브라우저마다 다르게 렌더링 될 수 있습니다. 항상 동일한 요소를 렌더링한다고 믿을 수는 없습니다. 특정 브라우저에서 작동하는 데 필요하다고 생각하는 모든 것을 추가 할 수 있습니다.

컨트롤이 html로 렌더링되는 방식을 제어하려면 System.Web.UI.HtmlControls대신 네임 스페이스 의 컨트롤을 사용해야합니다 . 그건:

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

추가 요소없이 해당 html 요소로 렌더링됩니다. 이것은 물론 컨트롤이 아닌 브라우저 호환성에 대한 책임을 져야 함을 의미합니다. 또한 이러한 컨트롤에는 WebControls네임 스페이스 에있는 컨트롤의 모든 기능이 포함되어 있지 않습니다 .

---

이것은 inputAttributes 속성을 찾을 때까지 나를 미치게 만들었습니다.

예를 들어, 다음은 스팬 넌센스없이 체크 박스 컨트롤에 직접 클래스를 추가하는 방법입니다.

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

---

기본적으로 모든 WebControl은 <span>태그 로 렌더링되며 컨트롤 작성자가 추가하는 사용자 지정 렌더링도 포함됩니다.

사용자 지정 WebControl을 작성할 때 일반적으로 가장 먼저 수행하는 작업 중 하나는 " TagKey "속성을 재정 의하여 div 또는 범위 이외의 항목을 렌더링하는 것입니다. 이 속성의 기본값은 HtmlTextWriterTag.Span입니다.

확인란 항목을 하위 클래스로 만들고 TagKey 속성을 재정 의하여 다른 것을 렌더링 할 수 있지만 모든 확인란을 고유 한 버전으로 만들어야합니다.

---

이 문제를 발견하고 제어 어댑터를 사용하여 해결하려고 시도했습니다.

라디오 버튼 목록에이 작업을 수행하는 예는 여기 를 참조 하십시오 .

나는 이것을 내 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(" />");

    }
}

그리고 이것은 내 브라우저 파일에 추가되었습니다.

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

Of course, there are some downsides to this. Along with those mentioned at the above link, you also lose functionality if you do not impliment everything (the above code does not allow for a radio button to be checked). There are some CSS friendly control adaptors, but they do not cover the radio button control. It may be possible to use Reflector to get the default control adaptor as a starting point.

---

The plain RadioButton is often rendered without a span. If you set CssClass, Style, Enabled properties, the RadioButton is rendered with a span. This inconsistency is a real pain when I need to manipulate the radio button with client-side scripts. What I usually do is to apply a dummy CssClass so that it will always render a span consistently.

---

Found similar issue, wrote a simple jQuery based function to enable/disable checkbox and parent span

function resetChk(ctl, bEnable) { 

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

        }

---

the best way i think is this:

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

to use it in custom control:

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

ReferenceURL : https://stackoverflow.com/questions/997342/why-does-asp-net-radiobutton-and-checkbox-render-inside-a-span