如何向RadioButtonList项目添加自定义属性？

Question

我该如何为绑定的RadioButtonList生成的项目添加一个绑定的Html5 data- attribute？以下是我的代码：

<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;
}

我需要在UI中添加 SomeFlag 以供jQuery使用，因此生成的每个项目最终应该看起来像这样：

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

有没有办法在绑定的RadioButtonList生成的输入对象中添加一个html data属性？

- Rachel

Answer 1

您可以使用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'));
})

- Adil

---

有趣的是，以前那不起作用。我猜我已经好几个版本没有尝试过了！ - Ann L.

+1 提醒如何从jQuery访问它 :) 我花了一分钟才注意到属性被添加到span标签而不是input标签。 - Rachel

Answer 2

您可以在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>

- Felipe Oriani

---

这非常有趣。我记得几年前尝试向ListItem添加属性，但它们没有被呈现。我猜自从上次尝试以来事情已经改变了！ - Ann L.

这个可以工作，但它将属性应用于包围输入和标签的<span>标记。虽然对我来说没问题，谢谢 :) - Rachel

Answer 3

如果您需要在服务器端生成属性，最好的选择是子类化 RadioButtonList 控件并重写 Render 方法。

如果您有 Reflector 或类似产品的副本，可以显示反编译代码，这将非常有助于确定 ListItem 元素被呈现为单选按钮的确切位置。

- Ann L.

---

жҲ‘жІЎжңүReflectorгҖӮдҪ зҹҘйҒ“RadioButtonList.Renderж–№жі•зҡ„й»ҳи®Өд»Јз ҒжҳҜеҗҰеңЁзҪ‘дёҠд»»дҪ•ең°ж–№йғҪеҸҜд»ҘжүҫеҲ°еҗ—пјҹ - Rachel

@Rachel 我恐怕不知道。我相信至少还有另外一种工具可以像Reflector一样工作，但我暂时不知道它的名字。抱歉。:( - Ann L.

无论如何+1，因为它仍然是一个可行的解决方案，可能是更复杂模板的最佳选择 :) - Rachel

9年晚了，但 https://referencesource.microsoft.com/#System.Web/UI/WebControls/RadioButtonList.cs - Rayanth