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

时间:2012-12-07 18:30:00

标签: c# asp.net html5 radiobuttonlist

如何为使用绑定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;
}

我需要将SomeFlag添加到UI以供jQuery使用,因此最终结果是生成的每个项目应如下所示:

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

有没有办法将html数据属性添加到从绑定RadioButtonList生成的输入对象?

3 个答案:

答案 0 :(得分: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'));
})

答案 1 :(得分:1)

如果您需要生成服务器端属性,最好的办法是将RadioButtonList控件子类化,并覆盖Render方法。

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

答案 2 :(得分: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>