渲染时如何从 WebControl 中删除 span 标签

Question

当使用 ASP.NET CheckBox （在特殊情况下，继承自 CheckBox）时，它会在复选框输入控件周围呈现一个跨度，此跨度控件会影响 jQuery 脚本。

渲染时可以去掉这个跨度吗？

Answer 1

发现这个有用的提示：

在代码隐藏中，使用 InputAttributes 而不是 Attributes。

例如，键入此：

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

而不是此：

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

或而不是内联声明：

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

最后两个将导致换行跨度。

Answer 2

我刚刚在测试页上尝试过这个，但我没有得到我的 CheckBox 控件...您确定是 CheckBox 正在渲染它吗？是有条件的吗？

更新：好的，这似乎取决于 CheckBox 是否具有额外的属性，包括 CssClass 设置...或“禁用”属性。

Answer 3

我不知道这是否适用于这个特定的例子。但是，如果您制作自己的 WebControl 并且您永远不希望它在自身周围呈现跨度，您可以像这样重写 Controls 渲染方法：

public class MyWebControl : WebControl
{

  /* Your code 
             between here */

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

我猜您可以将相同的内容添加到继承的 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

Answer 4

我花了过去 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);
    }
}

除了自定义控件之外，您还需要一个自定义 HtmlTextWriter：

using System.IO;
using System.Web.UI;

/// <summary>
/// Represents a custom HtmlTextWriter that displays no span tag.
/// </summary>
public class HtmlTextWriterNoSpan : HtmlTextWriter
{
    /// <summary>
    /// Constructor.
    /// </summary>
    /// <param name="textWriter">Text writer.</param>
    public HtmlTextWriterNoSpan(TextWriter textWriter)
        : base(textWriter)
    { }

    /// <summary>
    /// Determines whether the specified markup element will be rendered to the requesting page.
    /// </summary>
    /// <param name="name">Name.</param>
    /// <param name="key">Tag key.</param>
    /// <returns>True if the markup element should be rendered, false otherwise.</returns>
    protected override bool OnTagRender(string name, HtmlTextWriterTag key)
    {
        // Do not render <span> tags
        if (key == HtmlTextWriterTag.Span)
            return false;

        // Otherwise, call the base class (always true)
        return base.OnTagRender(name, key);
    }
}

仅供参考，使用：

checkbox.InputAttributes.Add("disabled", "disabled");

具有相同的效果，但是：

1. 它不如 checkbox.Enalbed = false; 方便；
2. 当复选框位于 ListView 中时，回发后该属性将被删除。

Answer 5

使用 Jquery

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

Answer 6

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

应该做

Answer 7

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

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

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

Answer 8

为什么不使用 .remove 和 jquery 删除跨度？

Answer 9

您可以使用文字控件来代替吗？这两种选择之间有很大的区别：

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

Answer 10

我发现通过实现如下所示的构造函数，您可以为控件指定容器标记。

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

您可以将 HtmlTextWriterTag 替换为任何可用选项，例如上例中的 Div。默认值为 Span。

Answer 11

$(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;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Generate from asp.net -->
<label for="CheckBox1" id="Label4" class="css-input css-checkbox css-checkbox-primary">
  <span class="aspNetDisabled">
    <input id="CheckBox1" 
           type="checkbox" 
           checked="checked" 
           disabled="disabled">
  </span>
  <span></span>Disabled
</label>

Answer 12

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

public MyControl() : base() 
{
}

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

protected WebControl() : this(HtmlTextWriterTag.Span) { }

参考：
http://aspnetresources.com/blog/stripping_span_from_webcontrol

Answer 13

我想知道，没有人提到这一点有什么原因吗：

public MyControl() : base(string.Empty)

我读到了这个http://aspnetresources.com/blog/stripping_span_from_webcontrol< /a> flaviotsf 提到的

Answer 14

                <div class="onoffswitch">
                     <asp:CheckBox ID="example1" runat="server" AutoPostBack="true" OnCheckedChanged="chkWifiRequired_CheckedChanged" CssClass="aspNetDisabled onoffswitch-checkbox"/>
                    <label class="onoffswitch-label" for='<%= example1.ClientID.ToString() %>'>
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>

            /* remove the relative spam involving inputs disabled */
            $('input[name=""]').parent('.aspNetDisabled').each(function () {
                var $this = $(this);
                var cssClass = "onoffswitch-checkbox";
                $('input[name=""]').addClass(cssClass).unwrap().parent('label[for],span').first().addClass('onoffswitch-checkbox');
            });

这将允许您正常使用该复选框，仍然让它调用服务器端代码，并使用引导程序中的切换。 （我使用的是 Inspina 主题，但其他切换的格式应该相同）

Answer 15

我刚刚遇到这个问题并使用了乔恩的答案，这很好而且有效。缺点是您的类是在代码隐藏中定义的，而不是在标记中定义的。

因此，我接受了答案，并采用了一种编程方式来检索控件的所有属性，将它们复制到 InputAttributes 并从属性中删除这些复制的属性。

请注意，虽然它扩展自 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);
        }
    }
}

这样，您只需执行以下操作，它将输出不带跨度的标签。

<namespace:CleanRadioButton class="class1" />
<namespace:CleanRadioButton class="class2" />

HTML 输出：
（注意“生成”是自动生成的）

<input id="generated" type="radio" name="generated" value="generated" class="class1">
<input id="generated" type="radio" name="generated" value="generated" class="class2">