ASP .NET - Exibindo imagens em um controle DropDownlist (C#)

 Neste artigo eu vou mostrar como podemos exibir imagens em um controle DropDownList em uma aplicação ASP .NET Web Forms usando a linguagem C#.

Recursos usados:

Criando o projeto no Visual Studio 2013 Express for web

Abra o VS Express 2013 for web e clique em New Project;

A seguir selecione a linguagem Visual C# e o template ASP .NET Web Application;

Informe o nome Asp_DropDownList_Imagem e clique no botão OK;

A seguir selecione o template Empty, marque o folder Web Forms e clique no botão OK;

Será criado um projeto Web Forms com a seguinte estrutura exibida na janela Solution Explorer:

Vamos agora incluir um Web Form em nosso projeto.

No menu PROJECT clique em Add New Item e a seguir selecione o template Web Form.

Altere o nome para Default.aspx e clique no botão Add:

Vamos incluir um controle DropDownList com ID=ddlImagem nesta página a partir da ToolBox conforme o código e leiaute abaixo: 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Asp_DropDownList_Imagem.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Exibindo imagens em um DropDownList</title>
     <style>
        .ddlstyle
        {
            width: 250px;
        }
        option
        {
            padding-left: 40px;
            font-size: 16px;
        }
    </style>
 </head>
<body>
    <form id="form1" runat="server">
    <h2>Macoratti .net</h2>
    <hr />
    <div>
        <asp:DropDownList ID="ddlImagem" runat="server" Width="200px">
        </asp:DropDownList>
    </div>
    </form>
</body>
</html>

O estilo .ddlstyle aplicado permite ajustar os nomes dos países ao lada da imagem da bandeira com os espaçamentos corretos.

Vamos criar uma nova pasta em nosso projeto chamada Imagens com as imagens que iremos exibir.

No menu PROJECT clique em New Folder e informe o nome Imagens. A seguir inclua algumas imagens que deseja exibir nesta pasta.

Agora vamos abrir o arquivo code-behind Default.aspx.cs e definir o código baixo no evento Load para carregar os dados no DropDownList:

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt = GetDados();
                ddlImagem.DataSource = dt;
                ddlImagem.DataTextField = "Pais";
                ddlImagem.DataValueField = "Id";
                ddlImagem.DataBind();
                string imageURL = "";
                for (int i = 0; i < ddlImagem.Items.Count; i++)
                {
                    switch (ddlImagem.Items[i].Text)
                    {
                        case "Brasil": imageURL = "Imagens/brasil_30x30.png";
                            break;
                        case "Grecia": imageURL = "Imagens/grecia_30x30.png";
                            break;
                        case "Espanha": imageURL = "Imagens/espanha_30x30.png";
                            break;
                        case "França": imageURL = "Imagens/franca_30x30.png";
                            break;
                        case "Portugal": imageURL = "Imagens/portugal_30x30.png";
                            break;
                    }
                    ListItem item = ddlImagem.Items[i];
                    item.Attributes["style"] = "background: url(" + imageURL + ");background-repeat:no-repeat;";
                }
            }
        }

No código acima criamos um objeto DataTable e chamamos o método GetDados() para preencher o DataTable.

O código do método GetDados() é dado a seguir:

public DataTable GetDados()
        {
            DataTable dtb = new DataTable();
            dtb.Columns.Add("Pais", typeof(string));
            dtb.Columns.Add("Id", typeof(long));
            dtb.Columns.Add("LabelValue");
            var _olinha = dtb.NewRow();
            _olinha["Pais"] = "Brasil";
            _olinha["Id"] = 1;
            dtb.Rows.Add(_olinha);
            _olinha = dtb.NewRow();
            _olinha["Pais"] = "Grecia";
            _olinha["Id"] = 2;
            dtb.Rows.Add(_olinha);
            _olinha = dtb.NewRow();
            _olinha["Pais"] = "Espanha";
            _olinha["Id"] = 3;
            dtb.Rows.Add(_olinha);
            _olinha = dtb.NewRow();
            _olinha["Pais"] = "França";
            _olinha["Id"] = 4;
            dtb.Rows.Add(_olinha);
            _olinha = dtb.NewRow();
            _olinha["Pais"] = "Portugal";
            _olinha["Id"] = 5;
            dtb.Rows.Add(_olinha);
            return dtb;
        }

 

A seguir definimos as configurações do DropDownList - ddlImagem e percorremos cada item incluindo o caminho da imagem para o país a ser exibido no controle com base no nome do país.

Executando o projeto iremos obter a exibição da página abaixo onde vemos a imagem de cada país exibida na frente do nome do país:

Pegue o projeto completo aqui: Asp_DropDownList_Imagem.zip

Lucas 8:20 E foi-lhe dito: Estão lá fora tua mãe e teus irmãos, que querem ver-te,
Lucas 8:21 Mas, respondendo ele (Jesus), disse-lhes: Minha mãe e meus irmãos são aqueles que ouvem a palavra de Deus e a executam.

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti