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

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

저는 이것을 예상합니다.

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

...하지만 그것은 추악합니다.저는 저만의 선택지를 쓸 수 있지만, 다시 한번 그것이 있어야 할 만큼 우아하지는 않습니다.

이것은 내가 inputAttributes 속성을 찾을 때까지 나를 미치게 했습니다.

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

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

의 웹 컨트롤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네임스페이스입니다.

기본적으로 모든 WebControl은 다음과 같이 렌더링됩니다.<span>태그와 제어 작성자가 추가하는 모든 사용자 지정 렌더링이 포함됩니다.

사용자 정의 WebControl을 작성할 때 일반적으로 수행하는 첫 번째 작업 중 하나는 "TagKey" 속성을 재정의하여 div 또는 범위 이외의 것을 렌더링하는 것입니다.이 속성의 기본값은 HtmlTextWriterTag입니다.기간.

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

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

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

제 라디오 버튼 어댑터로 이걸 만들었죠

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>

물론, 이것에는 몇 가지 단점이 있습니다.위 링크에서 언급한 내용과 함께 모든 내용을 구현하지 않으면 기능이 손실됩니다(위 코드에서는 라디오 버튼을 선택할 수 없음).일부 CSS 친화적인 제어 어댑터가 있지만 라디오 버튼 제어에는 적용되지 않습니다.Reflector를 사용하여 기본 제어 어댑터를 시작점으로 가져올 수 있습니다.

일반 라디오 버튼은 종종 스판 없이 렌더링됩니다.CssClass, Style, Enabled 속성을 설정하면 RadioButton이 스팬으로 렌더링됩니다.클라이언트 측 스크립트를 사용하여 라디오 버튼을 조작해야 할 때 이러한 불일치는 정말 큰 문제입니다.제가 주로 하는 일은 더미 CssClass를 적용하여 항상 일관되게 스팬을 렌더링하도록 하는 것입니다.

내가 생각하는 가장 좋은 방법은 다음과 같습니다.

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

사용자 지정 제어에서 사용하기

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

유사한 문제 발견, 확인란 및 상위 범위를 활성화/비활성화하기 위한 간단한 jQuery 기반 함수 작성

function resetChk(ctl, bEnable) { 

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

        }

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