如何为使用绑定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
生成的输入对象?
答案 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>