为什么 ASP.Net RadioButton 和 CheckBox 在 Span 内呈现？

Question

我希望这样：

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

...但这很难看。我可以编写自己的选择器，但还是没有应有的优雅。

Answer 1

在我找到 inputAttributes 属性之前，这也让我发疯了。

例如，这里是如何直接在复选框控件上添加一个类，而不需要跨度废话：

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

Answer 2

System.Web.UI.WebControls 命名空间中的 Web 控件在不同浏览器中的呈现方式可能不同。你不能指望他们总是渲染相同的元素。他们可能会添加任何他们认为需要使其在特定浏览器中运行的内容。

如果您想控制控件如何呈现为 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 命名空间中控件的所有功能。

Answer 3

默认情况下，每个 WebControl 都呈现为 <span> 标记，以及控件作者添加的任何自定义呈现。

在编写自定义 WebControl 时，您通常要做的第一件事就是覆盖“TagKey”属性以呈现 div 或跨度以外的其他内容。该属性的默认值为 HtmlTextWriterTag.Span。

您可以将您的复选框项目子类化并覆盖 TagKey 属性以呈现其他内容，但是您必须处理将所有复选框变成您自己的版本。

Answer 4

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

有关对单选按钮列表执行此操作的示例，请参阅 here。

我最终将它作为我的 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>

当然，这也有一些缺点。与the above link 中提到的那些一样，如果您不隐含所有内容，您也会失去功能（上面的代码不允许检查单选按钮）。有一些 CSS 友好的控件适配器，但它们不包括单选按钮控件。或许可以使用Reflector来获取默认的控制适配器作为起点。

Answer 5

普通的 RadioButton 通常在没有跨度的情况下呈现。如果设置了 CssClass、Style、Enabled 属性，RadioButton 会以跨度呈现。当我需要使用客户端脚本操作单选按钮时，这种不一致是一个真正的痛苦。我通常做的是应用一个虚拟的 CssClass，以便它始终一致地呈现一个跨度。

Answer 6

我认为最好的方法是：

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 }

Answer 7

发现类似问题，写了一个简单的基于jQuery的函数来启用/禁用复选框和父跨度

function resetChk(ctl, bEnable) { 

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

        }