5

バインドされたHtml5データ属性をバインドされたアイテムに追加するにはどうすればよいRadioButtonListですか？

私のコードは次のようになります：

<asp:Repeater Id="QuestionList" ...>
    <ItemTemplate>
        <asp:RadioButtonList DataSource='<%# Eval("Answers") %>'
                         SelectedValue='<%# Eval("SelectedAnswerId") %>'
                         DataTextField="Answer" 
                         DataValueField="AnswerId"
                         Tag='<%# Eval("QuestionId") %>' />
    </ItemTemplate>
</asp:Repeater>

var List<Question> questions = GetQuestions();
QuestionList.DataSource = questions;
QuestionList.DataBind();

これは、次のようなクラス構造にバインドされています。

public class Question
{
    int QuestionId;
    string Question;
    List<Answer> Answers;
}

public class Answers
{
    int AnswerId;
    string Answer;
    bool SomeFlag;
}

jQueryを使用するためにUIに追加SomeFlagする必要があるため、最終的に生成される各アイテムは次のようになります。

<input type="radio" data-flag="true" ... />

バインドから生成された入力オブジェクトにhtmldata-属性を追加する方法はありますRadioButtonListか？

4

3 に答える 3

3

ListItem属性を使用して、ラジオボタンリストの項目にカスタム属性を追加できます。ラジオボタンリストのhtmlがどのように生成されるかを確認し、jqueryを作成して必要なデータ属性を取得できます。

サーバー側

ListItem li1 = new ListItem();
ListItem li2 = new ListItem();
li1.Attributes.Add("data-flag", "true");
li2.Attributes.Add("data-flag", "true");
RadioButtonList1.Items.Add(li1);
RadioButtonList1.Items.Add(li2);

ラジオボタンリスト用に生成されたhtml

<table id="RadioButtonList1" border="0">
    <tr>
        <td><span data-flag="true"><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="" /></span></td>
    </tr><tr>
        <td><span data-flag="true"><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="" /></span></td>
    </tr>
</table>

jqueryでのアクセス

$(':radio[id*=RadioButtonList1]').click(function(){
      alert($(this).closest('span').data('flag'));
})
于 2012-12-07T18:42:19.337 に答える
1

サーバー側で属性を生成する必要がある場合の最善の策は、RadioButtonListコントロールをサブクラス化し、メソッドをオーバーライドするRenderことです。

逆コンパイルされたコードを表示できるReflectorまたは同様の製品のコピーがある場合、これは、ListItem要素がラジオボタンとしてレンダリングされている場所を正確に判断するのに非常に役立ちます。

于 2012-12-07T18:40:04.070 に答える
1

RepeaterのItemDataBoundイベントで属性を設定できます。次のようにしてみてください。

protected void repeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // if it is an item (not header or footer)
    if (e.Item.ItemType == ListItemType.Item)
    {
        // get your radioButtonList
        RadioButtonList optionsList = (RadioButtonList)e.Item.FindControl("rblOptionsList");

        // loop in options of the RadioButtonList
        foreach (ListItem option in optionsList.Items)
        {
            // add a custom attribute
            option.Attributes["data-flag"] = "true";
        }
    }
}

また、コントロールのIDとイベントを設定することを忘れないでください

<asp:Repeater Id="QuestionList" ItemDataBound="QuestionList_ItemDataBound" ...>
    <ItemTemplate>
        <asp:RadioButtonList ID="rblOptionsList" DataSource='<%# Eval("Answers") %>'
                         SelectedValue='<%# Eval("SelectedAnswerId") %>'
                         DataTextField="Answer" 
                         DataValueField="AnswerId"
                         Tag='<%# Eval("QuestionId") %>' />
    </ItemTemplate>
</asp:Repeater>
于 2012-12-07T18:43:13.267 に答える