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

Question

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

渲染时是否可以删除此跨度？

score 36 · Accepted Answer

发现了这个有用的提示：

在后面的代码中，使用 InputAttributes 而不是 Attributes。

例如，键入：

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

而不是这个：

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

或者代替内联声明：

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

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

score 10 · Accepted Answer

我刚刚在测试页面上尝试过这个，我没有得到我的 CheckBox 控件......你确定是 CheckBox 呈现这个吗？是有条件的吗？

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

score 8 · Accepted Answer

我不知道这是否适用于这个特定的例子。但是，如果您制作自己的 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

score 4 · Accepted Answer

我花了最后 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");

具有相同的效果，但是：

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

score 2 · Accepted Answer

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

should do

score 2 · Accepted Answer

2

使用 jQuery

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

于 2014-06-11T11:33:04.233 回答

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

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

于 2010-01-31T21:13:44.630 回答

score 1 · Accepted Answer

您可以改用文字控件吗？这两种选择之间有很大的不同：

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

我想知道，no1 提到这一点是否有原因：

public MyControl() : base(string.Empty)

我读到了flaviotsf提到的http://aspnetresources.com/blog/stripping_span_from_webcontrol

score 0 · Accepted Answer

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

public MyControl() : base() 
{
}

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

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

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

score 0 · Accepted Answer

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

            /* 删除涉及禁用输入的相关垃圾邮件 */
            $('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 主题，但其他切换的格式应该相同）

score 0 · Accepted Answer

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

所以我接受了答案，并采取了一种程序化的方式来检索控件的所有属性，将它们复制到 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">

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

15 回答 15

Related

Reference