Добавить пользовательские свойства в ASP.net checkboxlist

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

Очень интересный вопрос! Он раскрывает ограничения, которые иногда имеют веб-элементы управления.

Я считаю, что правильный способ его решения - создание пользовательского (веб-элемента) . Хотя это далеко не тривиально, тем более что 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;
    }
}

Вот как использовать его на странице веб-форм:

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

Answer 2

Свойство добавляется, но как элемент 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>