Выпадающий список с изображением для каждого элемента

#css #asp.net

#css #asp.net

Вопрос:

Я пытаюсь создать селектор языков и использую этот код для выпадающего списка

 <asp:DropDownList ID="ddlGender" runat="server" Width="200px">
     <asp:ListItem Text="Select Language"></asp:ListItem>
     <asp:ListItem Text="English" ></asp:ListItem>
     <asp:ListItem Text="Albanian" ></asp:ListItem>
</asp:DropDownList>
  

Но теперь я хочу поместить значки стран в эти 2. У меня есть 2 изображения в папке Images внутри моего проекта. например, изображения/EnglishFlag.png
Как я могу поместить их в выпадающий список?

Я видел много видео или кода, которые это делали, но они получали изображения из базы данных SQL.

Есть предложения?

Ответ №1:

Используйте следующее:

Default.aspx:

 <form id="form1" runat="server">
 <div>
    <asp:DropDownList ID="DropDownList1" runat="server" Width="200px">
    </asp:DropDownList>
 </div>
</form>
  

Default.aspx.cs:

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable objdt = new DataTable();
            objdt = GetData();
            DropDownList1.DataSource = objdt;
            DropDownList1.DataTextField = "Country";
            DropDownList1.DataValueField = "Id";
            DropDownList1.DataBind();

            string imageURL = "";
            for (int i = 0; i < DropDownList1.Items.Count; i  )
            {
                switch (DropDownList1.Items[i].Text)
                {
                    case "Bangladesh": imageURL = "Images/flag-of-Bangladesh.png";
                        break;
                    case "China": imageURL = "Images/flag-of-China.png";
                        break;
                    case "Germany": imageURL = "Images/flag-of-Germany.png";
                        break;
                    case "USA": imageURL = "Images/flag-of-USA.png";
                        break;
                }
                ListItem item = DropDownList1.Items[i];
                item.Attributes["style"] = "background: url("   imageURL   ");background-repeat:no-repeat;";
            }
        }
    }

    public DataTable GetData()
    {
        DataTable _objdt = new DataTable();

        _objdt.Columns.Add("Country", typeof(string));
        _objdt.Columns.Add("Id", typeof(long));

        _objdt.Columns.Add("LabelValue");
        var _objrow = _objdt.NewRow();
        _objrow["Country"] = "Bangladesh";
        _objrow["Id"] = 1;

        _objdt.Rows.Add(_objrow);
        _objrow = _objdt.NewRow();
        _objrow["Country"] = "China";
        _objrow["Id"] = 2;
        _objdt.Rows.Add(_objrow);

        _objrow = _objdt.NewRow();
        _objrow["Country"] = "Germany";
        _objrow["Id"] = 3;
        _objdt.Rows.Add(_objrow);

        _objrow = _objdt.NewRow();
        _objrow["Country"] = "USA";
        _objrow["Id"] = 4;
        _objdt.Rows.Add(_objrow);

        return _objdt;
    }
  

Проверьте это — привязать изображения к ASP.NET Выпадающий список

Комментарии:

1. Спасибо, мне было на чем сосредоточиться, но я просто хотел, чтобы простой выпадающий список управлялся на странице aspx. просто простой выпадающий список. Я имею в виду, что фотографии должны быть там до загрузки страницы, а не только после нее

2. Вы не можете привязать изображение непосредственно к ASP.NET Выпадающий список. Вы должны сделать это в фоновом режиме или с помощью jQuery. Смотрите мой обновленный пост со ссылкой.