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

Question

Checkbox list items have default "Text", "Value", "Enabled" and "Selected" properties.

I need to add an "ImageUrl" property to each item in my list. I use this code:

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

but it still doesn't show any properties other than the defaults.

How can this be achieved?

Answer 1

A property does get added, but as a span element surrounding the input and label. It looks like this

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

So if you need it with jQuery, get the correct element.

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

Answer 2

Very interesting question. It exposes the limitations that web controls sometimes have.

I believe the proper way to solve it is by creating a custom (web) control . It is far from trivial though especially since both ListItem and CheckBoxList are sealed classes.

It can also be solved by creating a user control (ascx). The following can be improved but you get the idea:

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>

ImageCheckBoxList.ascx.cs

public partial class ImageCheckBoxList : System.Web.UI.UserControl
{
    public IList<ImageListItem> Items { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Repeater1.DataSource = Items;
            Repeater1.DataBind();
        }

        for (int i = 0; i < Repeater1.Items.Count; i++)
        {
            var checkBox = (CheckBox)Repeater1.Items[i].FindControl("CheckBox1");
            if (checkBox != null)
            {
                Items[i].Checked = checkBox.Checked;
            }
        }
    }
}

where ImageListItem is:

public class ImageListItem
{
    public string Text { get; set; }
    public string Value { get; set; }
    public string ImageUrl { get; set; }

    public bool Checked { get; set; }

    public ImageListItem(string text, string value, string imageUrl)
    {
        Text = text;
        Value = value;
        ImageUrl = imageUrl;
        Checked = false;
    }
}

Here's how to use it in a Web Forms page:

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>

Code-behind

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