Как удалить тег span из WebControl при отображении - PullRequest
16 голосов
/ 01 февраля 2010

При использовании ASP.NET CheckBox (и в нашем случае, унаследованном от CheckBox) он отображает диапазон вокруг элемента управления ввода флажка, этот элемент управления диапазона влияет на сценарии jQuery.

Возможно ли удалить этот диапазон при рендеринге?

Ответы [ 15 ]

35 голосов
/ 08 сентября 2012

Нашел этот полезный совет:

В Code Behind используйте InputAttributes вместо Attributes.

Например, введите это:

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

вместо этого:

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

или вместо встроенных объявлений:

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

Последние два вызовут интервал переноса.

9 голосов
/ 01 февраля 2010

Я только что попробовал это на тестовой странице, и я не могу обойти мои элементы управления CheckBox ... Вы уверены, что это CheckBox, который рендерит это? Это условно?

ОБНОВЛЕНИЕ: ОК, это зависит от того, имеет ли CheckBox дополнительные атрибуты, включая параметр CssClass ... или атрибут "disabled".

8 голосов
/ 22 декабря 2011

Я не знаю, будет ли это работать на этом конкретном примере. Но если вы создаете свой собственный 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 / нетто / зачистки-пролетный-тегов из-webcontrol.html

3 голосов
/ 26 января 2013

Последние 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.
2 голосов
/ 11 июня 2014

Использование Jquery

<script>
        $(".selector input").unwrap().addClass("cssclass");
</script>
1 голос
/ 11 февраля 2016

$(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>
1 голос
/ 05 июля 2013
    protected override HtmlTextWriterTag TagKey
    {
        get
        {              
            return HtmlTextWriterTag.Div;
        }
    }

должен сделать

1 голос
/ 07 июня 2013

Я обнаружил, что, реализовав конструктор, подобный приведенному ниже, вы можете указать тег контейнера для вашего элемента управления.

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

Вы можете заменить HtmlTextWriterTag любой из доступных опций, таких как Div в примере выше. По умолчанию Span.

1 голос
/ 14 февраля 2010

Можете ли вы использовать буквальный контроль вместо этого? Существует большая разница между этими двумя альтернативами:

<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>
1 голос
/ 01 февраля 2010

Почему бы вам не удалить диапазон, используя .remove с jquery?

...