ASP .NET 4.0 - Ajax e DropDownList com UpdatePanel
Em uma aplicação ASP .NET tudo começa quando o navegador faz uma solicitação
para uma página usando um GET ou POST.
O servidor por sua vez processa a página e envia de volta o resultado como HTML.
O Navegador em seguida analisa o HTML e processa a página para o usuário que
iniciou a requisição.
Quando o usuário interage com a página (clicando em um botão) a página é
enviada de volta para o servidor, após o que a página inteira é carregada no
navegador novamente.
A figura abaixo mostra uma representação pessoal visual deste processo:
Embora este modelo têm sido usado há anos para servir páginas web, ele tem
alguns inconvenientes. Em primeiro lugar, porque toda a página é carregada
depois de um postback, o HTML enviado ao navegador é muito maior do que
ele precisa ser.
Com a utilização do Ajax isso mudou; em vez de enviar a página inteira como uma
resposta, o servidor envia uma resposta parcial (contendo pouco mais do que a
mensagem de texto enviada), que é então utilizado pelo navegador para atualizar
apenas a parte da página que mudou, deixando o resto da página como era.
Outro inconveniente no modelo tradicional que usa a recarga completa da página tem a ver com a maneira como o navegador renderiza a página. A página inteira é substituída o navegador tem que redesenhar novamente a página completa e isso faz com que a página 'pisque' resultando em uma experiência não muito atraente para o usuário final.
A utilização do Ajax é justamente para superar esses problemas como veremos neste artigo.
Os conceitos por trás do Ajax tem sido usados há muitos anos. Os navegadores desde a versão do Internet Explorer 5 tem sido fornecidos com o objeto XMLHttpRequest, que permite fazer chamadas para o servidor de JavaScript para enviar e receber dados. No entanto, outras técnicas também tem sido usadas para emular o comportamento do que agora é chamado Ajax, incluindo Macromedia Flash, elementos iframe, ou frames escondidos.
No entanto, quando o termo Ajax foi introduzido, as coisas realmente decolaram. Em uma tentativa de permanecer à frente , a Microsoft começou a construir o ASP.NET AJAX, e hoje o Framework Ajax está totalmente integrado ao ASP.NET e ao Visual Web Developer 2010. Sendo que o Framework oferece uma série de benefícios que você como um desenvolvedor web pode aproveitar para criar aplicações sensíveis e proporcionar uma melhor experiência final ao usuário.
O ASP .NET AJAX é um framework grátis que pode ser usado para construir uma nova geração de aplicações web com mais interatividade e recursos.
Usando os recursos do AJAX e DropDownlist
Neste artigo eu vou mostrar como usar o controle DropDownlist com AJAX em uma aplicação ASP .NET.
Abra o Visual Web Developer 2010 Express Edition e crie um novo projeto escolhendo o menu File opção New Web Site e o template ASP .NET Web Empty Web Site com o nome Ajax_DropdownList e clicando no botão OK;
A seguir no menu Project clique em Add New Item e selecione o template Web Form aceitando no nome padrão Default.aspx.
Vamos definir o leiaute da página Default.aspx conforme a figura abaixo onde usamos os controles:
O código usado na página é o seguinte:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:UpdatePanel ID="paispanel" runat="server"> <ContentTemplate > <asp:DropDownList ID="ddlPais" AutoPostBack ="true" AppendDataBoundItems="true" runat="server" Height="20px" Width="156px" onselectedindexchanged="ddlPais_SelectedIndexChanged"> </asp:DropDownList> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID ="ddlPais" /> </Triggers> </asp:UpdatePanel> <br /> <asp:UpdatePanel ID="estadopanel" runat="server"> <ContentTemplate > <asp:DropDownList ID="ddlEstado" AutoPostBack ="true" AppendDataBoundItems ="true" runat="server" Height="20px" Width="155px" onselectedindexchanged="ddlEstado_SelectedIndexChanged"> </asp:DropDownList> </ContentTemplate> <Triggers > <asp:AsyncPostBackTrigger ControlID ="ddlEstado" /> </Triggers> </asp:UpdatePanel> <br /> <asp:UpdatePanel ID="cdadepanel" runat="server"> <ContentTemplate > <asp:DropDownList ID="ddlCidade" AutoPostBack ="true" AppendDataBoundItems ="true" runat="server" Height="20px" Width="155px"> </asp:DropDownList> </ContentTemplate> <Triggers > <asp:AsyncPostBackTrigger ControlID ="ddlCidade" /> </Triggers> </asp:UpdatePanel> </div> </form> </body> </html> |
Note que estamos usando 3 controles UpdatePanel, um para cada controle DropDownList.
No arquivo code-behind Default.aspx.cs temos o código que acessa o banco de dados JcmSoft e preenche os dropdownlist:
using System; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page { SqlConnection conn = new SqlConnection("Data Source=.\\SQLEXPRESS;Initial Catalog=JcmSoft;Integrated Security=True"); public void Bind_ddlPais() { conn.Open(); SqlCommand cmd = new SqlCommand("select paisid,pais from Pais", conn); SqlDataReader dr = cmd.ExecuteReader(); ddlPais.DataSource = dr; ddlPais.Items.Clear(); ddlPais.Items.Add("--Selecione--"); ddlPais.DataTextField = "pais"; ddlPais.DataValueField = "paisid"; ddlPais.DataBind(); conn.Close(); } public void Bind_ddlEstado() { conn.Open(); SqlCommand cmd = new SqlCommand("select estadoid,estado from Estados where paisid='" + ddlPais.SelectedValue + "'", conn); SqlDataReader dr = cmd.ExecuteReader(); ddlEstado.DataSource = dr; ddlEstado.Items.Clear(); ddlEstado.Items.Add("--Selecione--"); ddlEstado.DataTextField = "estado"; ddlEstado.DataValueField = "estadoid"; ddlEstado.DataBind(); conn.Close(); } public void Bind_ddlCidade() { conn.Open(); SqlCommand cmd = new SqlCommand("select cidadeid,cidade from Cidades where estadoid ='" + ddlEstado.SelectedValue + "'", conn); SqlDataReader dr = cmd.ExecuteReader(); ddlCidade.DataSource = dr; ddlCidade.Items.Clear(); ddlCidade.Items.Add("--Selecione--"); ddlCidade.DataTextField = "cidade"; ddlCidade.DataValueField = "cidadeid"; ddlCidade.DataBind(); conn.Close(); } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Bind_ddlPais(); } } protected void ddlPais_SelectedIndexChanged(object sender, EventArgs e) { Bind_ddlEstado(); } protected void ddlEstado_SelectedIndexChanged(object sender, EventArgs e) { Bind_ddlCidade(); } |
Observe que estamos tratando o evento SelectedIndexChanged do controle Dropdownlist e chamada a função para preencher o controle conforme condição prévia.
A estrutura das tabelas usadas pela aplicação é a seguinte:
tabela : Pais | tabela : Estados | tabela: Cidades |
Em todas as tabelas o campo chave primária também foi definido como do tipo Identity.
A propriedade IDENTITY é utilizada para atributos (campos/colunas) das tabelas nas funções CREATE TABLE e ALTER TABLE, e tem como objetivo aumentar um valor a cada nova inclusão. |
Executando o web site teremos a exibição do link para login na página. Ao clicar no linkbutton a janela popup com o formulário de login será exibido:
Ao selecionar um pais no primeiro controle automaticamente o segundo dropdownlist será filtrado de acordo com o país selecionado;
Selecionando o estado teremos o filtro para as cidades no terceiro controle:
Dessa forma vimos como é simples usar os recursos do AJAX em páginas ASP .NET.
Pegue o projeto completo aqui: Ajax_DropdownList.zip
"Mas vós sois a geração eleita, o sacerdócio real, a nação santa, o povo adquirido, para que anuncieis as grandezas daquele que vos chamou das trevas para a sua maravilhosa luz;" 1 Pedro 2:9
Referências: