Question

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

我需要向列表中的每个项目添加“ 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();

，但除默认值外，它仍然不显示任何其他属性。

如何实现？

Answer 1

确实添加了属性，但是将其作为包围输入和标签的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>

因此，如果需要使用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>

Answer 2

非常有趣的问题！它揭示了Web控件有时具有的局限性。

我相信解决问题的正确方法是使用creating a custom (web) control。尽管特别是因为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>

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

其中ImageListItem是：

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

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

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

2 个答案: