Question

使用ASP.NET CheckBox时（以及从CheckBox继承而来），它会在复选框输入控件周围呈现一个范围，这个跨度控件会影响jQuery脚本。

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

Answer 1

找到这个有用的提示：

在Code Behind中，使用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而你永远不希望它自己渲染跨度，你可以覆盖控件渲染方法，如下所示：

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

具有相同的效果但是：

它不像checkbox.Enalbed = false;
如果复选框位于ListView中，则在回发后删除该属性。

Answer 5

使用Jquery

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

Answer 6

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

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

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

Answer 7

为什么不使用.remove使用jquery删除范围？

Answer 8

您可以使用文字控件吗？这两种选择之间存在很大差异：

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

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

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

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

Answer 10

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

应该

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

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

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

Answer 15

我刚遇到这个问题，并使用了乔恩（Jon）的答案，这很好，而且行得通。缺点是您的类是在代码背后定义的，而不是您的标记。

所以我回答了这个问题，并采取了一种编程方式来检索控件的所有属性，将它们复制到InputAttributes并从属性中删除那些复制的属性。

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

sum()

这样，您所需要做的就是以下操作，它将输出不带跨度的标签。

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

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

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

如何在呈现时从WebControl中删除span标记

15 个答案: