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

【问题标题】：Add custom properties to ASP.net checkboxlist将自定义属性添加到 ASP.net 复选框列表
【发布时间】：2019-10-28 13:13:51
【问题描述】：

复选框列表项具有默认的“Text”、“Value”、“Enabled”和“Selected”属性。

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

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

如何做到这一点？

【问题讨论】：

添加这些属性的目的是什么？如果只是稍后检索值，您可以使用data-imageUrl 或类似的东西。但是，如果您希望 ListItem 有一个 Image 那么您需要重新考虑您的方法。 developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
@JohnPete22 是的，我需要每个项目都在旁边显示他的图像。有什么建议吗？
好吧，你受限于 ASP:Checkbox。如果您需要使用 ASP 控件，您可以尝试使用 ASP:Repeater，并且对于每一行，您可以有一个标签和一个图像。这需要更多的工作，但你会得到想要的效果。
或者您可以尝试一个非 ASP 复选框 (w3schools.com/tags/att_input_type_checkbox.asp)，它们通过名称属性链接，但您可以在它们之间添加其他 HTML（即图像）。

标签： c# asp.net .net webforms

【解决方案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>

【讨论】：

【解决方案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();
}

【讨论】：