C# 将自定义属性添加到ASP.net复选框列表_C#_Asp.net_.net_Webforms

C# 将自定义属性添加到ASP.net复选框列表

c# asp.net .net

C# 将自定义属性添加到ASP.net复选框列表,c#,asp.net,.net,webforms,C#,Asp.net,.net,Webforms,复选框列表项具有默认的“文本”、“值”、“启用”和“选定”属性我需要为列表中的每个项目添加一个“ImageUrl”属性。我使用以下代码： foreach (Zone zn in ZonesList) { ListItem item = new ListItem(zn.Name, zn.Id.ToString()); item.Attributes.Add("ImageUrl", zn.Image ); item.Selected = false; visit

复选框列表项具有默认的“文本”、“值”、“启用”和“选定”属性

我需要为列表中的每个项目添加一个“ImageUrl”属性。我使用以下代码：

foreach (Zone zn in ZonesList)
{
    ListItem item = new ListItem(zn.Name, zn.Id.ToString());
    item.Attributes.Add("ImageUrl", zn.Image );
    item.Selected = false;

    visitPlaceList.Items.Add(item);
}

visitPlaceList.DataBind();

但它仍然不显示除默认值以外的任何属性

如何实现这一点？

添加了属性，但作为围绕输入和标签的

span

元素。看起来像这样

<span imageurl="www.google.nl">
    <input id="ctl00_mainContentPane_visitPlaceList_1" type="checkbox" name="ctl00$mainContentPane$visitPlaceList$1" />
    <label for="ctl00_mainContentPane_visitPlaceList_1">Name 1</label>
</span>


名字1

因此，如果jQuery需要它，请获取正确的元素

<asp:CheckBoxList ID="visitPlaceList" runat="server" ClientIDMode="Static"></asp:CheckBoxList>

<script>
    $("#visitPlaceList input").change(function () {
        var imageurl = $(this).closest('span').attr('imageurl');
        console.log(imageurl);
    });
</script>


$（“#visitPlaceList输入”）.change（函数（）{
var imageurl=$（this）.closest（'span'）.attr（'imageurl'）；
console.log（imageurl）；
});

属性确实会被添加，但作为围绕输入和标签的

span

元素。看起来像这样

<span imageurl="www.google.nl">
    <input id="ctl00_mainContentPane_visitPlaceList_1" type="checkbox" name="ctl00$mainContentPane$visitPlaceList$1" />
    <label for="ctl00_mainContentPane_visitPlaceList_1">Name 1</label>
</span>


名字1

因此，如果jQuery需要它，请获取正确的元素

<asp:CheckBoxList ID="visitPlaceList" runat="server" ClientIDMode="Static"></asp:CheckBoxList>

<script>
    $("#visitPlaceList input").change(function () {
        var imageurl = $(this).closest('span').attr('imageurl');
        console.log(imageurl);
    });
</script>


$（“#visitPlaceList输入”）.change（函数（）{
var imageurl=$（this）.closest（'span'）.attr（'imageurl'）；
console.log（imageurl）；
});

非常有趣的问题！它暴露了web控件有时具有的限制

我相信解决这个问题的正确方法是通过。虽然它并不琐碎，特别是因为

ListItem

和

CheckBoxList

都是密封的类

也可以通过创建用户控件（ascx）来解决此问题。以下内容可以改进，但您得到了这个想法：

ImageCheckBoxList.ascx

<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <table>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:CheckBox ID="CheckBox1" runat="server" /><asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' /><asp:Label ID="Label1" runat="server" AssociatedControlID="CheckBox1" Text='<%# Eval("Text") %>'></asp:Label>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

以下是如何在Web表单页面中使用它：

ASPX

<%@ Register TagPrefix="uc" TagName="ImageCheckBoxList" Src="ImageCheckBoxList.ascx" %>

<uc:ImageCheckBoxList ID="ImageCheckBoxList1" runat="server" />

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

代码隐藏

protected void Page_Load(object sender, EventArgs e)
{
    ImageCheckBoxList1.Items = new List<ImageListItem>()
    {
        new ImageListItem("Item 1", "Item1", "Images/1.png"),
        new ImageListItem("Item 2", "Item2", "Images/2.png"),
        new ImageListItem("Item 3", "Item3", "Images/3.png")
    };
}

protected void Button1_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    foreach (ImageListItem item in ImageCheckBoxList1.Items)
    {
        if (item.Checked)
        {
            sb.AppendLine($"{item.Text} with value {item.Value} is checked.");
        }
    }
    Label1.Text = sb.ToString();
}

受保护的无效页面加载（对象发送方，事件参数e）
{
ImageCheckBoxList1.Items=新列表（）
{
新的ImageListItem（“Item1”、“Item1”、“Images/1.png”），
新的ImageListItem（“Item2”、“Item2”、“Images/2.png”），
新的ImageListItem（“Item3”、“Item3”、“Images/3.png”）
};
}
受保护的无效按钮1\u单击（对象发送者，事件参数e）
{
StringBuilder sb=新的StringBuilder（）；
foreach（ImageCheckBoxList1.Items中的ImageListItem项目）
{
如果（选中项）
{
sb.AppendLine（$“{item.Text}的值为{item.value}已选中。”）；
}
}
Label1.Text=sb.ToString（）；
}