Question

How can I add a bound Html5 data- attribute to the items generated with a bound RadioButtonList?

My code looks like this:

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

It is bound to a class structure that looks like this:

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

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

I need to add SomeFlag to the UI for jQuery to use, so the end result is that each item generated should look like this:

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

Is there a way to add a html data- attribute to the input objects generated from a bound RadioButtonList?

Answer 1

You can set an Attribute in the ItemDataBound event of Repeater, try something like:

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

And remember to set the IDs and Events for your controls

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