ASP .NET 4.0 - Ajax e DropDownList com UpdatePanelEm 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:
- ScripManager
- DropDownList
- UpdatePanel
- Hyperlink
 |
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.
"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:
- Super DVD .NET - A sua porta de entrada na plataforma .NET
- Super DVD Vídeo Aulas - Vídeo Aula sobre VB .NET, ASP .NET e C#
- Seção VB .NET do Site Macoratti.net
- Seção C# do site Macoratti.net
- Seção ASP .NET do site Macoratti.net
- http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
