ASP .NET – DropDownList: múltiplas colunas e seleção com jQuery(CDN)

setembro 9, 2016 12:00 pm Publicado por Deixe um comentário

Neste artigo, eu vou mostrar como podemos exibir mais de um valor em um controle dropdownlist e obter o valor selecionado usando jQuery com a distribuição CDN.

O controle DropDownList é um controle de lista muito versátil e simples para exibir uma lista de opções ao usuário. Para recordar, abaixo relacionei novamente as propriedades de um controle DropDownList:

  • AutoPostBack – Se for True causa um envio (post) do formulário quando o cliente altera o item selecionado;
  • DataSource – Referencia a fonte de dados que o controle usa para preencher os itens;
  • DataTextField – É usado para preencher o campo Text dos itens;
  • DataValueField – Usado para preencher o campo Value dos itens;
  • Items – Coleção de objetos ListItem onde cada objeto representa um item;
  • SelectedItem – Uma referência o item selecionado;
  • SelectedIndex – Informa o índice do item selecionado. O primeiro tem índice igual a zero.

Evento de um DropDownList: OnSelectedIndexChanged – Iniciado quando o controle tem a propriedade AutoPostBack igual a True e ocorre mudança no item selecionado.

A jQuery é a biblioteca JavaScript mais usada em aplicações web atualmente. Ela foi desenvolvida em 2006, por John Resig, e é suportada por uma comunidade de desenvolvedores além do time do projeto jQuery. Ela foi construída para ser leve, poder ser usadas nos principais navegadores e ser compatível com a especificação CSS3.

A jQuery simplifica a maneira de como acessar os elementos DOM, tornando mais fácil a navegação pelas páginas. Para usar jQuery, você pode:

  • Fazer o download da library jQuery a partir do site jQuery.com e referenciar no seu projeto;
  • Incluir a jQuery a partir de uma distribuição CDN (Content Delivery Network), como o Google ou Microsoft;

No exemplo do artigo, eu vou usar a distribuição CDN do Google que tem a seguinte sintaxe:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

Recursos usados: Visual Studio Community 2015

Nota: Baixe e use a versão Community 2015 do VS. Ela é grátis e é equivalente a versão Professional.

Criando o projeto no VS Community

Abra o VS Community 2015 e clique em New Project. Depois selecione a linguagem Visual Basic ou Visual C# e o template ASP .NET Web Application.

Informe o nome DropDownList_MultiplasColunas, ou outro de sua preferência, e clique no botão OK.

aspn_ddljq1

A  seguir, selecione o template Empty e marque a opção Web Forms, pois vamos criar um projeto vazio:

aspn_jqtab2

Em seguida, no menu Project, clique em Add New Item e selecione o template Web Form, informando o nome Default.aspx. Assim, incluímos uma página em nosso projeto.

Para obter a Jquery, podemos usar o Nuget para incluir as referências às biblioteca jQuery.

Isso é feito no menu TOOLS e em Nuget Package Manager e selecione Manage Nuget Package for Solutions.

Na janela do assistente, selecione a guia Online e informe jQuery para localizar o pacote. Selecione o pacote jQuery e clique no botão Install para instalar a biblioteca no projeto:

aspn_jqtab3

No nosso exemplo, não vamos seguir esse caminho, usando a distribuição CDN que é referenciada diretamente na página ASP .NET.

Abra a página Default.aspx no modo Source e inclua a referências na seção <head> para a biblioteca JQuery, usando a CDN do Google.

aspn_ddljq2

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DropDownList_MultiplasColunas.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DropDwonList - Multiplas Colunas/ Seleção com jQuery(CDN)</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript">
        function getValorSelecionado() {
            alert($("#ddl").val());
         }
        function getTextoSelecionado() {
             alert($("#ddl option:selected").text());
         }
    </script>

</head>
<body>
    <h2>Macoratti .net - DropDownList com Múltiplas Colunas/Seleção com jQuery(CDN)</h2>
    <hr />
    <form id="form1" runat="server">
    <div>
     Selecione uma opção : <asp:DropDownList ID="ddl" runat="server" Height="27px" Width="245px" />
    </div>
    <p><asp:Button ID="btnValor" runat="server" Text="Obter o valor Selecionado" OnClientClick="return getValorSelecionado();" /></p>
    <p>
    <asp:Button ID="btnTexto" runat="server" Text="Obter o Texto Selecionado"  OnClientClick="return getTextoSelecionado();" />      
    </p>
    </form>
</body>
</html>

Na tag <head>, definimos as funções jQuery getValorSelecionado e getTextoSelecionado para obter o valor selecionado a partir do controle DropDownList(ddl).

Agora, vamos definir o código no arquivo code-behind Default.aspx.cs, usando o evento Load, para acessar a tabela Customers do banco de dadosNorthwind.mdf e obter o valores para exibir no dropdownlist.

using System;
using System.Data.SqlClient;
       SqlConnection con = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            try {
                string connectionString = @"Data Source=.sqlexpress;Initial Catalog=Northwind;Integrated Security=True";
                con = new SqlConnection(connectionString);
                SqlCommand cmd = new SqlCommand("Select CustomerID, PostalCode  + ' - ' + City as pCep from Customers", con);
                con.Open();
                SqlDataReader rd;
                rd = cmd.ExecuteReader();
                ddl.DataSource = rd;
                ddl.DataMember = "CusrtomerID";
                ddl.DataValueField = "pCep";
                ddl.DataBind();
            }
            catch(Exception ex)
            {
                throw ex;
            }
            finally
            {
                con.Close();
            }
        }

O pulo do gato para exibir mais de um valor no controle dropdownlist é montar a instrução SQL concatenando os campos com os valores que desejamos exibir.

No exemplo, fizermos isso para as colunas PostalCode e City definindo o aliás pCep para este valor.

Select CustomerID, PostalCode  + ‘ – ‘ + City as pCep from Customers

Depois, atribuímos o valor à propriedade DataValueField: ddl.DataValueField = “pCep”;

Executando o projeto, iremos obter:

aspn_ddljq3

Source: IMasters

Categorizados em:

Este artigo foi escrito pormajor

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *