Web Forms - Componentes

DropDownList

DropDownList é um componente que armazena uma lista de dados para que o usuário escolha uma opção.

Para inserir o DropDownList no projeto, abrir a ToolBox e arrastar o componente para o Html da página C#.

Precisamos de uma lista de dados para preencher o DropDownList, portanto, vamos carregar esta lista no evento Page_Load da página. Segue o exemplo abaixo:

      
        public partial class _Default : System.Web.UI.Page 
        {
          List< string> contatos = new List< string>();

          protected void Page_Load (object sender, EventArgs e)
          {
            contatos.Add("Danilo");
            contatos.Add("Sheila");
            contatos.Add("Lana");
            contatos.Add("Billy");
          }

        }  
       
    

Na página, clicar no componente e ir em propriedades.Vamos definir a propriedade ID chamada de ddlContatos.

Agora vamos adicionar a lista contatos no ddlContatos, através do método DataSource:

    
      public partial class _Default : System.Web.UI.Page 
      {
        List< string> contatos = new List< string>();

        protected void Page_Load (object sender, EventArgs e)
        {
          contatos.Add("Danilo");
          contatos.Add("Sheila");
          contatos.Add("Lana");
          contatos.Add("Billy");

          ddlContatos.DataSource = contatos;
        }

      }  
     
  

Se tivéssemos em uma aplicação Windows, esses passos ja eram suficientes para o DropDownList funcionar, porém aqui na aplicação Web nós precisamos dizer para o code behind que ele precisa enviar os dados para o Html, ou seja, ele precisa "buildar" e "bindar" esses dados. Para isso existe um método chamado DataBind.

Quando falamos em DataBind basicamente estamos disparando a ação do objeto para ele pegar os dados colocados no DataSource e aplicar diretamente no HTML.

    
      public partial class _Default : System.Web.UI.Page 
      {
        List< string> contatos = new List< string>();

        protected void Page_Load (object sender, EventArgs e)
        {
          contatos.Add("Danilo");
          contatos.Add("Sheila");
          contatos.Add("Lana");
          contatos.Add("Billy");

          ddlContatos.DataSource = contatos;
          ddlContatos.DataBind();
        }

      }  
     
  

Note que se clicarmos no navegador e inspecionar o elemento, veremos que o C# transforma o DropDownList em um Select do HTML.

Inserindo um Select Manualmente

Vamos fazer um Loop da variável contatos que criamos como List para preencher o Select.

Criaremos uma tag dinâmica , representada por < % % > e inserimos dentro dela o loop com o forEach.

    
        
       
      < html xmlns="http://www/w3.org/1999/xhtml">
      < head runat="server> 
        < title > < /title>
      < /head>
      < body>
          < form id="form1" runat="server"
              < select id="SelectManual">
                < % forEach (var valor in contatos) { % > 
                  < option value = "< %=valor ">Danilo< /option>
                < %} % >
              < /select>
          < /form>
      < /body>
      < html>
     
  

Inserindo um Select com runat="server"

Criar Select com runat="server", significa que o select vai ser inserido no ViewState.

    
        
       
      < html xmlns="http://www/w3.org/1999/xhtml">
      < head runat="server> 
        < title > < /title>
      < /head>
      < body>
          < form id="form1" runat="server"
              < div id="SelectManual" runat=""server>
             
              < /div>
          < /form>
      < /body>
      < html>
     
  

O próximo passo será usar o innerHTML para inserir os dados do contato ou seja , nós conseguimos escrever um HTML diretamente neste componente.

    
      public partial class _Default : System.Web.UI.Page 
      {
        List< string> contatos = new List< string>();

        protected void Page_Load (object sender, EventArgs e)
        {
          contatos.Add("Danilo");
          contatos.Add("Sheila");
          contatos.Add("Lana");
          contatos.Add("Billy");

          ddlContatos.DataSource = contatos;
          ddlContatos.DataBind();

          selectManual.innerHTML = "< select>";
          forEach (var valor in contatos) {
            selectManual.innerHTML += " < option value = " + valor + ">" + > + valor + "<  /option>";
          }
          selectManual.innerHTML = "";
        }

      }  
     
  

GridView

O componente GridView é preenchido da mesma maneira que o DropdownList, utilizando os métodos DataSource e DataBind.

    
      public partial class _Default : System.Web.UI.Page 
      {
        List< string> contatos = new List< string>();

        protected void Page_Load (object sender, EventArgs e)
        {
          contatos.Add("Danilo");
          contatos.Add("Sheila");
          contatos.Add("Lana");
          contatos.Add("Billy");

          ddlContatos.DataSource = contatos;
          ddlContatos.DataBind();

          GridView1.DataSource = contatos;
          GridView.DataBind();
        }
      }  
     
    

Criando a Classe Contato para preencher o DropDownList

Vamos criar a classe Contato para declarar o List do tipo Contato , ao invés do tipo string.

      
      public class Contato
        {
          public int Id { get; set;}
          public string Nome { get; set;}

          public override string ToString()
          {
            return Nome;
          }
        }
       
    

Agora vamos alterar o tipo da variavel contatos para List< Contato> e preencher o DropDownList criando uma instância para cada item do componente e definindo as propriedades value com o método dataValueField e o texto com a propriedade dataTextField

        
          public partial class _Default : System.Web.UI.Page 
          {
            List< Contato> contatos = new List< Contato>();
    
            protected void Page_Load (object sender, EventArgs e)
            {
              contatos.Add(new Contato(){ Nome="Danilo",Id = 1 });
              contatos.Add(new Contato(){ Nome="Sheila",Id = 2 });
              contatos.Add(new Contato(){ Nome="Lana",Id = 3 });
              contatos.Add(new Contato(){ Nome="Billy",Id = 4 });
    
              ddlContatos.DataSource = contatos;
              ddlContatos.dataValueField = "Id";
              ddlContatos.dataTextField = "Nome";
              ddlContatos.DataBind();
            }
    
          }