blocks|key|1834292|text|默认情况下，每个WebControl呈现为标记，外加控件作者添加的任何自定义呈现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1834293|在编写自定义WebControl时，您通常要做的第一件事就是重写"TagKey“属性，以呈现一个div或跨度以外的其他东西。此属性的默认值为HtmlTextWriterTag.Span。|1834294|您可以子类化checkbox项并覆盖TagKey属性以呈现其他内容，但随后您必须将所有的checkbox都转换为您自己的版本。|1834295|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.tagkey.aspx^0|L|6|0|X|6|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

Every WebControl by default renders as a <code>&lt;span&gt;</code> tag, plus any custom rendering that the control author adds. 

One of the first things you usually do when you write a custom WebControl is to override the "<a href="http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.tagkey.aspx" rel="noreferrer">TagKey</a>" property to render a div, or something besides a span. The default value of this property is HtmlTextWriterTag.Span.

You could subclass your checkbox items and override the TagKey property to render something else, but then you have to deal with making all your checkboxes into your own version.

blocks|key|1834508|text|System.Web.UI.WebControls命名空间中的Web控件在不同的浏览器中呈现方式可能不同。你不能指望他们总是渲染相同的元素。他们可以添加他们认为需要的任何东西，以使其在特定的浏览器中工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1834509|如果要控制控件如何呈现为html，则应改用System.Web.UI.HtmlControls命名空间中的控件。这就是：|1834510|<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"+/>|code-block|syntax|javascript|1834511|它们将呈现为相应的html元素，没有添加额外的元素。当然，这意味着您必须为浏览器兼容性负责，因为控件没有。此外，这些控件不具备WebControls命名空间中控件的所有功能。|1834512|entityMap^0|0|P|0|L|Q|0|0|1R|B|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

Web controls in the <code>System.Web.UI.WebControls</code> namespace may render differently in different browsers. You can't count on them rendering the same elements always. They may add anything that they think is needed to make it work in the specific browser.

If you want to have any control over how the controls are rendered as html, you should use the controls in the <code>System.Web.UI.HtmlControls</code> namespace instead. That is:

<pre><code>&lt;input type="checkbox" id="CheckBox1" runat="server" class="myClass" /&gt;
&lt;input type="radio" name="RadioButton1" runat="server" class="myClass" /&gt;
&lt;input type="text" id="TextBox1" runat="server" class="myClass" /&gt;
</code></pre>

They will render just as the corresponding html element, with no extra elements added. This of course means that you will have to take responsibility for the browser compatibility, as the control doesn't. Also, those controls doesn't have all the features of the controls in the <code>WebControls</code> namespace.

blocks|key|2048731|text|我遇到了这个问题，我正在尝试使用控制适配器来解决它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2048732|有关对单选按钮列表执行此操作的示例，请参见here。|offset|length|2048733|我最终把它作为我的RadioButtonAdaptor-|2048734|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("+/>");

++++}
}|code-block|syntax|javascript|2048735|这将添加到我的浏览器文件中-|2048736|<browser+refID="Default">
++++++++<controlAdapters>++++++++++++
++++++++++++<adapter+controlType="System.Web.UI.WebControls.RadioButton"
+++++++++++++++adapterType="RadioButtonAdapter"+/>
++++++++</controlAdapters>
</browser>|2048737|当然，这也有一些缺点。除了在the+above+link中提到的那些功能之外，如果您没有实现所有的功能(上面的代码不允许选中单选按钮)，您也会失去功能。有一些CSS友好的控件适配器，但它们不包括单选按钮控件。可以使用Reflector来获取默认控制适配器作为起点。|2048738|entityMap|0|LINK|mutability|MUTABLE|url|http://www.singingeels.com/Articles/How_To_Control_Adapters.aspx|1^0|0|L|4|0|0|0|0|0|0|E|E|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|Z]]]]

I came across this issue and am attempted to solve it using control adaptors.

See <a href="http://www.singingeels.com/Articles/How_To_Control_Adapters.aspx" rel="nofollow noreferrer">here</a> for an example of doing this to a radio button list.

I ended up with this as my RadioButtonAdaptor-

<pre><code>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 &gt; 0)
 {
 writer.WriteAttribute("class", targetControl.CssClass);
 } 

 writer.Write(" /&gt;");

 }
}
</code></pre>

And this added to my browsers file-

<pre><code>&lt;browser refID="Default"&gt;
 &lt;controlAdapters&gt; 
 &lt;adapter controlType="System.Web.UI.WebControls.RadioButton"
 adapterType="RadioButtonAdapter" /&gt;
 &lt;/controlAdapters&gt;
&lt;/browser&gt;
</code></pre>

Of course, there are some downsides to this. Along with those mentioned at <a href="http://www.singingeels.com/Articles/How_To_Control_Adapters.aspx" rel="nofollow noreferrer">the above link</a>, 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.

blocks|key|2048809|text|这也让我抓狂，直到我找到了inputAttributes属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2048810|例如，下面是如何在checkbox控件上直接添加一个类，而不是无意义的span：|2048811|myCheckBoxControl.InputAttributes.Add("class",+"myCheckBoxClass")|code-block|syntax|javascript|2048812|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This was driving me crazy too until I found the inputAttributes property.

For example, here is how to add a class directly on the checkbox control without the span nonsense: 

<pre><code>myCheckBoxControl.InputAttributes.Add("class", "myCheckBoxClass")
</code></pre>

blocks|key|2048907|text|发现了类似的问题，编写了一个简单的基于jQuery的函数来启用/禁用复选框和父范围|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2048908|function+resetChk(ctl,+bEnable)+{+

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

++++++++}|code-block|syntax|javascript|2048909|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>function resetChk(ctl, bEnable) { 

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

 }
</code></pre>

blocks|key|1834790|text|普通的RadioButton通常是不带跨度的。如果设置了CssClass、Style、Enabled属性，则使用跨度呈现RadioButton。当我需要使用客户端脚本操作单选按钮时，这种不一致是一个真正的痛苦。我通常做的是应用一个虚拟的CssClass，这样它将始终一致地呈现一个跨度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1834791|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

I would expect this:

<pre><code>&lt;asp:CheckBox ID="CheckBox1" runat="server" CssClass="myClass" /&gt;
&lt;asp:RadioButton ID="RadioButton1" runat="server" CssClass="myClass" /&gt;
&lt;asp:TextBox ID="TextBox1" runat="server" CssClass="myClass" /&gt;
</code></pre>

...to render like this (with some attributes removed for simplicity):

<pre><code>&lt;input id="CheckBox1" type="checkbox" class="myClass" /&gt;
&lt;input id="RadioButton1" type="radio" class="myClass" /&gt;
&lt;input id="TextBox1" type="text" class="myClass" /&gt; 
</code></pre>

...when in fact, the <code>RadioButton</code> and <code>CheckBox</code> get wrapped with a <code>span</code> tag and the CSS class gets applied there.

<pre><code>&lt;span class="myClass"&gt;&lt;input id="CheckBox1" type="checkbox" /&gt;&lt;/span&gt; 
&lt;span class="myClass"&gt;&lt;input id="RadioButton1" type="radio" /&gt;&lt;/span&gt; 
&lt;input type="text" id="TextBox1" class="myClass" /&gt; 
</code></pre>

Is there a reason for this and is there a way to avoid it? It makes jQuery selectors ugly since you can't catch all of them with:

<pre><code>$("input.myClass")
</code></pre>

Granted it is just going to:

<pre><code>$("input.myClass, span.myClass input")
</code></pre>

...but that is ugly. I could write my own selector, but again not as elegant as it should be.

Why does ASP.Net RadioButton and CheckBox render inside a Span?

jQuery

我希望是这样的：<asp:CheckBox ID="CheckBox1" runat="server" CssClass="myClass" /><asp:RadioButton ID="RadioButton1" runat="server" CssClass="myClass" /><asp:TextB...

问为什么ASP.Net RadioButton和CheckBox在一个范围内渲染？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么ASP.Net RadioButton和CheckBox在一个范围内渲染？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么ASP.Net RadioButton和CheckBox在一个范围内渲染？
EN