Asp.netでは、カスタム属性を使用する場合、通常はそのままレンダリングされます。
このマークアップを考慮して(注:id
、name
、for
などの属性は、生成されたID /名前が冗長であるため、すべての例で削除されました) :
<asp:TextBox runat="server" data-foo="bar" />
Asp.netで次のようにレンダリングされます:
<input type="text" data-foo="bar" />
つまり、asp.netはdata-foo
を変更せずに保持します。
チェックボックスは通常、次のようにレンダリングされます。
<asp:CheckBox runat="server" Text="Normal" />
次のようにレンダリングします:
<input type="checkbox" />
<label>Normal</label>
ただし、チェックボックスにカスタム属性を追加する場合:
<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar" />
次のようにレンダリングされます。
<span data-foo="bar">
<input type="checkbox" />
<label>Custom attribute</label>
</span>
ご覧のとおり、属性を保持するためにレンダリングされたスパン。これは、コードビハインドで属性を追加した場合にも発生します。これは、他のHtmlControl、AFAIKでは発生しません。
このスパンが属性を保持するためにレンダリングされる理由を誰かが知っていますか?
入力タグの属性をレンダリングする方法はありますか?
スパンでレンダリングされる理由はわかりませんが、コード内のinput
のCheckBox
要素に属性を直接追加できると思います- behidこのように:
myCheckBox.InputAttributes.Add(...)
参照リンク:
更新
追加の親要素が使用されるため、CheckBox
に適用する属性は、input
とテキストの両方に影響を与える可能性があります。これはインライン要素であるため、span
(div
ではない)だと思います。さまざまなシナリオで使用します。
参照リンク:
これは、レンダリングエンジンがCheckBox
コントロールを構築する方法であり、それについて行うことはあまりありません。
できることは、runat="server"
入力を作成することです。
<input id="myInput" runat="server" type="checkbox" data-foo="bar"/>
<label>Custom attribute</label>
別のオプションは、ドキュメントの読み込み時にjqueryを使用してdata-foo
属性を追加することです
$(function(){
$('span[data-foo]').each(function(){
var $span = $(this);
var value = $span.data('foo');
$span.find('input').data('foo',value);
});
})
他のすべてが失敗したときに使用する別のメソッドを追加するだけで、いつでもリテラルコントロールを使用して、必要なものをレンダリングすることができます。ポストバックを処理するときはもう少し作業を行う必要がありますが、必要なhtmlを取得する唯一の方法である場合もあります。
マークアップ:
<asp:Literal ID="myLiteral" runat="server"/>
コードの横:
myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)
クリックイベントでその属性にアクセスしようとしている場合は、コントロールをキャストすることでアクセスできます。たとえば、チェックボックスがあり、あなたが行ったようにカスタム属性を割り当てます
<asp:CheckBox runat="server" data-foo="bar" />
OnCheckedChanged
でその値を取得する必要があり、メソッドでsender
オブジェクトを取得しました。
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
CheckBox myControl = (CheckBox)sender;
string value = myControl.Attributes["data-foo"].ToString();
}
これが誰かを助けることを願っています