如何在呈现时从WebControl中删除span标记
当使用ASP.NET CheckBox （以及在完整的情况下，inheritance自CheckBox ）时，它会在复选框输入控件周围呈现一个范围，此跨度控件正在影响jQuery脚本。
渲染时是否可以删除此跨度？
找到这个有用的提示：
在Code Behind中，使用InputAttributes而不是Attributes。
例如，键入以下内容：
chk.InputAttributes.Add("onchange", "updateFields()")
而不是这个：
chk.Attributes.Add("onchange", "updateFields()")
或者代替内联声明：
最后两个将导致包装跨度。
我只是在测试页面上尝试过这个并且我没有得到我的CheckBox控件…你确定它是CheckBox吗？ 有条件吗？
更新：好的，它似乎取决于CheckBox是否有额外的属性，包括CssClass设置……或“禁用”属性。
我不知道这是否适用于这个特定的例子。 但是如果您创建自己的WebControl并且您永远不希望它自己渲染跨度，您可以覆盖控件渲染方法，如下所示：
public class MyWebControl : WebControl { /* Your code between here */ protected override void Render(HtmlTextWriter writer) { RenderContents (writer); } }
我想你可以将它添加到一个inheritance的CheckBox ……就像这样：
public class MyCheckBox : CheckBox { /* Your code between here */ protected override void Render(HtmlTextWriter writer) { RenderContents (writer); } }
解决方案的基本问题在这里有更好的解释：
http://www.marten-online.com/net/stripping-span-tag-from-webcontrol.html
我花了最后3个小时拉头发找到解决这个问题的方法。
这是出来的：
using System.Web.UI; using System.Web.UI.WebControls; /// /// Represents a custom checkbox web control. /// Prevents itself to be wrapped into a tag when disabled. /// public class CustomCheckBox : CheckBox { /// /// Renders the control to the specified HTML writer. /// /// The HtmlTextWriter object that receives the control content. protected override void Render(HtmlTextWriter writer) { // Use custom writer writer = new HtmlTextWriterNoSpan(writer); // Call base class base.Render(writer); } }
除了自定义控件，您还需要一个自定义的HtmlTextWriter：
using System.IO; using System.Web.UI; /// /// Represents a custom HtmlTextWriter that displays no span tag. /// public class HtmlTextWriterNoSpan : HtmlTextWriter { /// /// Constructor. /// /// Text writer. public HtmlTextWriterNoSpan(TextWriter textWriter) : base(textWriter) { } /// /// Determines whether the specified markup element will be rendered to the requesting page. /// /// Name. /// Tag key. /// True if the markup element should be rendered, false otherwise. protected override bool OnTagRender(string name, HtmlTextWriterTag key) { // Do not render tags if (key == HtmlTextWriterTag.Span) return false; // Otherwise, call the base class (always true) return base.OnTagRender(name, key); } }
仅供参考，使用：
checkbox.InputAttributes.Add("disabled", "disabled");
具有相同的效果，但：
- 它不像checkbox.Enalbed = false那么方便;
- 当复选框位于ListView中时，在回发后删除该属性。
使用Jquery
如果您不需要标签，可以直接使用输入/复选框控件，或者可以自己放置：
CSS适配器可能能够删除复选框/标签周围的范围，但我没有看到一个用于此目的。
为什么不使用.remove和jquery删除跨度？
你可以使用文字控件吗？ 这两种选择之间存在很大差异：
12345
12345
我发现通过实现类似下面的构造函数，您可以为控件指定容器标记。
public MyCustomControl() : base(HtmlTextWriterTag.Div) { }
您可以使用任何可用选项替换HtmlTextWriterTag ，例如上面示例中的Div。 默认值为Span 。
protected override HtmlTextWriterTag TagKey { get { return HtmlTextWriterTag.Div; } }
应该做
$(document).ready(function() { /* remove the relative spam involving inputs disabled */ $('input[type="checkbox"]').parent('.aspNetDisabled').each(function() { var $this = $(this); var cssClass = $this.attr('class'); $this.children('input[type="checkbox"]').addClass(cssClass).unwrap().parent('label[for],span').first().addClass('css-input-disabled'); }); });
/* CSS Example */ .css-input { position: relative; display: inline-block; margin: 2px 0; font-weight: 400; cursor: pointer; } .css-input input { position: absolute; opacity: 0; } .css-input input:focus + span { box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); } .css-input input + span { position: relative; display: inline-block; margin-top: -2px; margin-right: 3px; vertical-align: middle; } .css-input input + span:after { position: absolute; content: ""; } .css-input-disabled { opacity: .5; cursor: not-allowed; } .css-checkbox { margin: 7px 0; } .css-checkbox input + span { width: 20px; height: 20px; background-color: #fff; border: 1px solid #ddd; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .css-checkbox input + span:after { top: 0; right: 0; bottom: 0; left: 0; font-family: "FontAwesome"; font-size: 10px; color: #fff; line-height: 18px; content: "\f00c"; text-align: center; } .css-checkbox:hover input + span { border-color: #ccc; } .css-checkbox-primary input:checked + span { background-color: #5c90d2; border-color: #5c90d2; }
尝试在类中添加一个构造函数，如下所示：
public MyControl() : base() { }
如果你注意到，控件将作为默认显示为跨度，因为这是“WebControl”使用的（如果你使用Reflector）：
protected WebControl() : this(HtmlTextWriterTag.Span) { }
参考： http ： //aspnetresources.com/blog/stripping_span_from_webcontrol
我想知道，有没有理由提到这个：
public MyControl() : base(string.Empty)
我读了这篇文章http://aspnetresources.com/blog/stripping_span_from_webcontrol中提到了flaviotsf
/ *删除涉及输入禁用的相关垃圾邮件* /
$（'input [name =“”]'）。parent（'。aspNetDisabled'）。each（function（）{
var $ this = $（this）;
var cssClass =“onoffswitch-checkbox”;
$（ '输入[名称= “”]'）addClass（的CssClass）.unwrap（）的父（ '标签（用于），跨度'）第一（）addClass（ 'onoffswitch-复选框'）。。
}）;
这将允许您正常使用复选框，仍然让它调用服务器端代码，并使用bootstrap中的切换。 （我正在使用Inspina主题，但它应该是其他切换的相同格式）
我刚刚遇到了这个问题，并使用了Jon的答案，这很好，而且很有效。 缺点是您的类是在代码隐藏中定义的，而不是您的标记。
所以我采用了答案并采用了一种方法来检索控件的所有属性，将它们复制到InputAttributes并从属性中删除那些复制的属性。
请注意，虽然这可以从RadioButton扩展，但您可以使用该方法扩展任何控件，例如标签或复选框。
using System.Web.UI; using System.Web.UI.WebControls; namespace Hidistro.UI.Common.Controls { /// /// Just like a normal RadioButton, except that the wrapped span is disabled. /// public class CleanRadioButton : RadioButton { protected override void Render(HtmlTextWriter writer) { List keysToRemove = new List (); foreach (object key in Attributes.Keys) { string keyString = (string)key; InputAttributes.Add(keyString, Attributes[keyString]); keysToRemove.Add(keyString); } foreach (string key in keysToRemove) Attributes.Remove(key); base.Render(writer); } } }
这样，您需要做的就是以下内容，它将输出没有跨度的标签。
HTML输出:(注意“生成”是自动生成的）