ASP.NETを使用するCheckBox場合（場合によっては、から継承されますCheckBox）、チェックボックス入力コントロールの周囲にスパンがレンダリングされます。このスパンコントロールはjQueryスクリプトに影響を与えます。
レンダリング時にこのスパンを削除することは可能ですか？
26519 次
15 に答える
36
この便利なヒントを見つけました：
コードビハインドでは、属性の代わりに入力属性を使用します。
たとえば、次のように入力します。
chk.InputAttributes.Add("onchange", "updateFields()")
これの代わりに：
chk.Attributes.Add("onchange", "updateFields()")
またはインライン宣言の代わりに：
<asp:CheckBox ID="chk" runat="server" onchange="updateFields()" />
最後の2つは、ラッピングスパンを引き起こします。
于 2012-09-07T21:04:49.977 に答える
10
テストページでこれを試しましたが、CheckBoxコントロールを回避できません...これをレンダリングしているのはCheckBoxですか？条件付きですか？
更新：わかりました。チェックボックスにCssClass設定などの追加の属性があるかどうか、または「無効」属性があるかどうかが条件になっているようです。
于 2010-02-01T20:38:40.377 に答える
8
これがこの特定の例で機能するかどうかはわかりません。ただし、独自のWebControlを作成し、それ自体の周りにスパンをレンダリングしたくない場合は、次のようにControlsレンダリングメソッドをオーバーライドできます。
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);
}
}
ソリューションの基本的な問題は、ここでよりよく説明されています：http:
//www.marten-online.com/net/stripping-span-tag-from-webcontrol.html
于 2011-12-22T15:01:04.400 に答える
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");
同じ効果がありますが：
- チェックボックスほど便利ではありません。Enalbed=false;
- チェックボックスがListViewにある場合、属性はポストバック後に削除されます。
于 2013-01-26T01:44:49.270 に答える
2
protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Div;
}
}
する必要があります
于 2013-07-05T11:03:36.477 に答える
2
Jqueryの使用
<script>
$(".selector input").unwrap().addClass("cssclass");
</script>
于 2014-06-11T11:33:04.233 に答える
1
ラベルが必要ない場合は、入力/チェックボックスコントロールを直接使用するか、自分でラベルを付けることができます。
<input type="checkbox" id="CheckBox1" runat="server" />
<label for="CheckBox1">My Label</label>
CSSアダプターはチェックボックス/ラベルの周りのスパンを削除できるかもしれませんが、私はその目的のためにそれを見たことがありません。
于 2010-01-31T21:11:18.617 に答える
1
.removeとjqueryを使用してスパンを削除してみませんか？
于 2010-01-31T21:13:44.630 に答える
1
代わりにリテラルコントロールを使用できますか？これら2つの選択肢には大きな違いがあります。
<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>
于 2010-02-14T20:41:17.593 に答える
1
以下のようなコンストラクターを実装することで、コントロールのコンテナータグを指定できることがわかりました。
public MyCustomControl() : base(HtmlTextWriterTag.Div)
{
}
HtmlTextWriterTagは、上記の例のDivなどの実行可能なオプションのいずれかに置き換えることができます。デフォルトはですSpan。
于 2013-06-07T15:46:58.310 に答える
1
$(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>于 2016-02-11T13:52:35.250 に答える
0
次のようなコンストラクターをクラスに追加してみてください。
public MyControl() : base()
{
}
お気づきのように、コントロールはデフォルトでスパンとしてレンダリングされます。これは、「WebControl」が使用するものであるためです（Reflectorを使用する場合）。
protected WebControl() : this(HtmlTextWriterTag.Span) { }
参照： http ：//aspnetresources.com/blog/stripping_span_from_webcontrol
于 2012-09-22T04:48:37.110 に答える
0
no1がこれに言及した理由があるのだろうか：
public MyControl() : base(string.Empty)
flaviotsfが言及したhttp://aspnetresources.com/blog/stripping_span_from_webcontrolを読んでもらいました
于 2013-11-19T15:21:19.960 に答える
0
<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テーマを使用していますが、他のトグルでも同じ形式である必要があります）
于 2017-08-28T17:22:56.037 に答える
0
私はちょうどこの問題を抱えていて、ジョンの答えを使用しました。これは良いことであり、機能します。欠点は、クラスがマークアップではなくコードビハインド内で定義されることです。
そこで、私は答えを受け取り、コントロールのすべての属性を取得し、それらを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">
于 2018-10-27T17:59:57.010 に答える