代码之家 › 专栏 › 技术社区 › Mark

为什么ASP。Net单选按钮和复选框在Span内渲染?

webforms asp.net

Mark · 技术社区 · 16 年前

我预计:

<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 用a包起来 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")

7 回复 | 直到 16 年前

127

JohnFx 16 年前

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

Guffa 16 年前

中的Web控件 System.Web.UI.WebControls

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

womp 16 年前

<span>

编写自定义WebControl时,您通常做的第一件事就是重写“ TagKey “属性用于呈现div或span以外的内容。此属性的默认值是HtmlTextWriterTag.span。

您可以对复选框项进行子类化,并覆盖TagKey属性以呈现其他内容,但随后您必须将所有复选框制作成自己的版本。

Spongeboy 16 年前

我遇到了这个问题,并试图使用控制适配器来解决它。

here 例如,对单选按钮列表执行此操作。

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>

the above link

Li Chen 10 年前

普通单选按钮通常在没有跨度的情况下呈现。如果设置CssClass、Style、Enabled属性,则RadioButton将以span呈现。当我需要用客户端脚本操纵单选按钮时,这种不一致性是一种真正的痛苦。我通常做的是应用一个虚拟的CssClass,这样它就可以始终一致地渲染一个跨度。

Jimmi 12 年前


    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
    }

Stas Svishov 13 年前

function resetChk(ctl, bEnable) { 

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

        }