web-dev-qa-db-ja.com

Asp.netチェックボックスとhtmlデータ属性

Asp.netでは、カスタム属性を使用する場合、通常はそのままレンダリングされます。

このマークアップを考慮して(注:idnameforなどの属性は、生成された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では発生しません。

このスパンが属性を保持するためにレンダリングされる理由を誰かが知っていますか?

入力タグの属性をレンダリングする方法はありますか?

18
Ortiga

スパンでレンダリングされる理由はわかりませんが、コード内のinputCheckBox要素に属性を直接追加できると思います- behidこのように:

myCheckBox.InputAttributes.Add(...)

参照リンク:

更新

追加の親要素が使用されるため、CheckBoxに適用する属性は、inputとテキストの両方に影響を与える可能性があります。これはインライン要素であるため、spandivではない)だと思います。さまざまなシナリオで使用します。

参照リンク:

21
Lukasz M

これは、レンダリングエンジンが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);        
    });
})
4
Claudio Redi

他のすべてが失敗したときに使用する別のメソッドを追加するだけで、いつでもリテラルコントロールを使用して、必要なものをレンダリングすることができます。ポストバックを処理するときはもう少し作業を行う必要がありますが、必要なhtmlを取得する唯一の方法である場合もあります。

マークアップ:

<asp:Literal ID="myLiteral" runat="server"/>

コードの横:

myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)
1
Joe Capka

クリックイベントでその属性にアクセスしようとしている場合は、コントロールをキャストすることでアクセスできます。たとえば、チェックボックスがあり、あなたが行ったようにカスタム属性を割り当てます

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

}

これが誰かを助けることを願っています

0
jazz b