时间戳

首页 > 解决方案 > 将自定义属性添加到 ASP.net 复选框列表

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

问题描述

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

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

但它仍然没有显示除默认值之外的任何属性。

如何做到这一点？

标签： c#asp.net.netwebforms

解决方案

非常有趣的问题！它暴露了 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>

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

推荐阅读