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

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

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

有没有办法向绑定生成的输入对象添加 html 数据属性RadioButtonList？

4

3 回答 3

3

You can use ListItem attributes to add custom attributes to the items in the radio button list. You can check how your html is generated for radio button list and make jquery to get the required data attribute for you.

On server side

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

Generated html for radio button list

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

Accessing in jquery

$(':radio[id*=RadioButtonList1]').click(function(){
      alert($(this).closest('span').data('flag'));
})
于 2012-12-07T18:42:19.337 回答
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>
于 2012-12-07T18:43:13.267 回答
1

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

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

于 2012-12-07T18:40:04.070 回答