C# 如何在渲染时从WebControl中删除span标记

当使用ASP.NET

复选框

（在本例中，继承自

复选框

）时，它会在复选框输入控件周围呈现一个范围，该范围控件会影响jQuery脚本

---

渲染时是否可以删除此范围？

如果不需要标签，可以直接使用输入/复选框控件，也可以自己放置一个：

<input type="checkbox" id="CheckBox1" runat="server" />
<label for="CheckBox1">My Label</label>

我的标签

---

CSS适配器可能能够删除复选框/标签周围的span，但我还没有看到用于此目的的span。

为什么不使用jquery删除span？

我只是在测试页面上尝试了这一点，但我没有看到复选框控件周围的span。。。你确定是复选框呈现了这个吗？这是有条件的吗

---

更新：好的，这似乎取决于复选框是否具有额外属性，包括CssClass设置。。。或者一个“disabled”属性。

您可以改用文本控件吗？这两种选择之间有很大区别：

<p>12345<asp:Label ID="lblMiddle" runat="server" Text="6"></asp:Label>7890</p>
<p>12345<asp:Literal ID="ltlMiddle" runat="server" Text="6"></asp:Literal>7890</p>

123457890

123457890

我不知道这是否适用于这个特定的示例。但是，如果您创建自己的WebControl，并且不希望它在自身周围渲染跨距，则可以像下面这样覆盖控件渲染方法：

public class MyWebControl : WebControl
{

  /* Your code 
             between here */

  protected override void Render(HtmlTextWriter writer)
  {
    RenderContents (writer);
  }
}

public class MyCheckBox : CheckBox 
{

  /* Your code 
             between here */

  protected override void Render(HtmlTextWriter writer)
  {
    RenderContents (writer);
  }
}

public MyControl() : base() 
{
}

我想你可以在继承的复选框中添加相同的内容。。。大概是这样的：

public class MyWebControl : WebControl
{

  /* Your code 
             between here */

  protected override void Render(HtmlTextWriter writer)
  {
    RenderContents (writer);
  }
}

public class MyCheckBox : CheckBox 
{

  /* Your code 
             between here */

  protected override void Render(HtmlTextWriter writer)
  {
    RenderContents (writer);
  }
}

public MyControl() : base() 
{
}

这里更好地解释了解决方案的基本问题：
找到了以下有用的提示：

在代码隐藏中，使用InputAttribute而不是属性

例如，键入以下内容：

chk.InputAttributes.Add("onchange", "updateFields()")

与此相反：

chk.Attributes.Add("onchange", "updateFields()")

或者代替内联声明：

<asp:CheckBox ID="chk" runat="server" onchange="updateFields()" />

---

最后两个将导致包装跨度。

尝试向类中添加一个构造函数，如下所示：

public class MyWebControl : WebControl
{

  /* Your code 
             between here */

  protected override void Render(HtmlTextWriter writer)
  {
    RenderContents (writer);
  }
}

public class MyCheckBox : CheckBox 
{

  /* Your code 
             between here */

  protected override void Render(HtmlTextWriter writer)
  {
    RenderContents (writer);
  }
}

public MyControl() : base() 
{
}

如果您注意到，控件将作为默认跨距呈现，因为“WebControl”使用的是跨距（如果您使用Reflector）：

参考：

---

我花了3个小时来解决这个问题

结果如下：

using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
/// Represents a custom checkbox web control.
/// Prevents itself to be wrapped into a <span> tag when disabled.
/// </summary>
public class CustomCheckBox : CheckBox
{
    /// <summary>
    /// Renders the control to the specified HTML writer.
    /// </summary>
    /// <param name="writer">The HtmlTextWriter object that receives the control content.</param>
    protected override void Render(HtmlTextWriter writer)
    {
        // Use custom writer
        writer = new HtmlTextWriterNoSpan(writer);

        // Call base class
        base.Render(writer);
    }
}

具有相同的效果，但：

它不像checkbox那么方便。Enalbed=false

当复选框位于ListView中时，回发后该属性将被删除

---

我发现，通过实现下面这样的构造函数，可以为控件指定容器标记

public MyCustomControl() : base(HtmlTextWriterTag.Div)
{
}

您可以将

htmltextwittertag

替换为任何可用选项，例如上面示例中的Div。默认值为

Span

    protected override HtmlTextWriterTag TagKey
    {
        get
        {              
            return HtmlTextWriterTag.Div;
        }
    }

---

应该做的事我想知道，有没有一个理由提到这一点：

public MyControl() : base(string.Empty)

我用Jquery得到了flaviotsf提到的这篇文章

<script>
        $(".selector input").unwrap().addClass("cssclass");
</script>

$（“.selector输入”）.unwrap（）.addClass（“cssclass”）；

$（文档）.ready（函数（）{
/*删除涉及禁用输入的相对垃圾邮件*/
$（'input[type=“checkbox”]'）。父项（'.aspNetDisabled'）。每个（函数（）{
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示例*/
.css输入{
位置：相对位置；
显示：内联块；
边际：2px0；
字体大小：400；
光标：指针；
}
.css输入{
位置：绝对位置；
不透明度：0；
}
.css输入：焦点+范围{
长方体阴影：0.3pxRGBA（0,0,0,0.25）；
}
.css输入+span{
位置：相对位置；
显示：内联块；
页边顶部：-2px；
右边距：3倍；
垂直对齐：中间对齐；
}
.css输入+span:之后{
位置：绝对位置；
内容：“；
}
.css输入已禁用{
不透明度：.5；
光标：不允许；
}
.css复选框{
边际：7px0；
}
.css复选框输入+span{
宽度：20px；
高度：20px；
背景色：#fff；
边框：1px实心#ddd；
-webkit过渡：背景色0.2s；
过渡：背景色0.2s；
}
.css复选框输入+span:after{
排名：0；
右：0；
底部：0；
左：0；
字体系列：“FontAwesome”；
字体大小：10px；
颜色：#fff；
线高：18px；
内容：“\f00c”；
文本对齐：居中；
}
.css复选框：悬停输入+span{
边框颜色：#ccc；
}
.css复选框主要输入：选中+span{
背景色：#5c90d2；
边框颜色：#5c90d2；
}

残废


/*删除涉及禁用输入的相对垃圾邮件*/
$（'input[name=”“]”）。父项（'.aspNetDisabled'）。每个（函数（）{
var$this=$（this）；
var cssClass=“onoffswitch复选框”；
$（'input[name=“”）.addClass（cssClass）.unwrap（）.parent（'label[for]，span'）.first（）.addClass（'onoffswitch-checkbox'）；
});
这将允许您正常使用复选框，仍然让它调用服务器端代码，并使用引导切换。（我使用的是Inspina主题，但其他切换应该采用相同的格式）
我刚刚遇到了这个问题，并使用了Jon的答案，这很好，而且很有效。缺点是类是在codebehind中定义的，而不是在标记中定义的

因此，我得到了答案，并用一种渐进的方式检索控件的所有属性，将它们复制到InputAttribute，并从属性中删除这些复制的属性

请注意，虽然这是从RadioButton扩展的，但您可以使用该方法扩展任何控件，例如标签或复选框

using System.Web.UI;
using System.Web.UI.WebControls;

namespace Hidistro.UI.Common.Controls
{
    /// <summary>
    /// Just like a normal RadioButton, except that the wrapped span is disabled.
    /// </summary>
    public class CleanRadioButton : RadioButton
    {
        protected override void Render(HtmlTextWriter writer)
        {
            List<string> keysToRemove = new List<string>();

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

使用System.Web.UI；
使用System.Web.UI.WebControl；
命名空间Hidistro.UI.Common.Controls
{
/// 
///与普通单选按钮一样，只是包裹的跨距被禁用。
/// 
公共类CleanRadioButton:RadioButton
{
受保护的覆盖无效渲染（HtmlTextWriter编写器）
{
List keystemove=新列表（）；
foreach（Attributes.Keys中的对象键）
<input id="generated" type="radio" name="generated" value="generated" class="class1">
<input id="generated" type="radio" name="generated" value="generated" class="class2">