Ajax de um jeito simples em ASP.NET
Click here to see this post in English
Olá a todos. Neste post vou mostrar uma maneira de implementar Ajax no ASP.NET muito legal que eu aprendi.
Quando eu (e a grande maioria) aprendi Ajax a maneira de se fazer era usar um objeto javascript (XmlHttpRequest), criar uma página separada para processar o request e montar o resultado em XML ou texto plano, e tratar este resultado no nosso script principal. Eu confesso que eu sempre achei muito legal programar com Ajax, apesar do trabalhão que dá xD.
Outra parte interessante é o trabalho que dá para depurar e corrigir errors.
No VS 2008 eu vi uns componentes simples, mas que nos permitem trabalhar com Ajax de maneira muito simples e transparente: ScriptManager e UpdatePanel.
Para mostrar o uso destes componentes vou criar uma pequena página ASP.NET que vai fazer uma consulta numa coleção de strings e depois adicionar funcionalidade Ajax a esta página. Para isso vou partir de um WebSite ASP.NET e editar a Default.aspx. Abaixo segue o código-fonte HTML:<%@ 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>Ajax com ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
Busca: <asp:TextBox runat="server" ID="BuscaTxt" Width="200" />
<asp:Button runat="server" ID="BuscaBtn" Text="Buscar"
onclick="BuscaBtn_Click" />
</p>
<div>
<asp:GridView runat="server"
ID="PessoasGridView"
AutoGenerateColumns="false"
CellPadding="4"
CellSpacing="0">
<Columns>
<asp:BoundField DataField="Nome"
HeaderText="Nome"
HeaderStyle-Width="200" />
<asp:BoundField DataField="Sobrenome"
HeaderText="Sobrenome"
HeaderStyle-Width="200" />
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Agora o código Default.aspx.cs:using System;
using System.Collections.Generic;
using System.Linq;
public partial class _Default : System.Web.UI.Page {
class Pessoa {
public string Nome { get; set; }
public string Sobrenome { get; set; }
}
private List<Pessoa> Pessoas = new List<Pessoa>{
new Pessoa { Nome = "Felipe", Sobrenome = "Guerço" },
new Pessoa { Nome = "Gerson", Sobrenome = "Motta" },
new Pessoa { Nome = "Joaquim", Sobrenome = "José" },
new Pessoa { Nome = "João", Sobrenome = "Silva" },
new Pessoa { Nome = "Aristarco", Sobrenome = "Pederneiras" },
};
protected void Consultar() {
PessoasGridView.DataSource =
from p in Pessoas
where p.Nome.Contains(BuscaTxt.Text)
orderby p.Nome
select p;
PessoasGridView.DataBind();
}
protected void Page_Load(object sender, EventArgs e) {
}
protected void BuscaBtn_Click(object sender, EventArgs e) {
Consultar();
}
}
Com isso nosso programa vai consultar a lista no membro privado Pessoas de acordo com o filtro. Mas dessa forma a página está fazendo uma viagem completa ao servidor só para atualizar o grid. Vamos ver como evitar isso com os componentes de Ajax do ASP.NET.
Na página vamos colocar o componente ScriptManager para habilitar o uso do componente que vai realizar o Ajax. Em seguida vamos colocar na página o componente UpdatePanel e colocar o grid dentro dele.
O componente UpdatePanel é muito interessante: Ele representa um "pedaço" do WebForm que vai ser atualizado quando determinada ação acontecer. Mas que ação? Agora vem a parte interessante: No UpdatePanel nós configuramos quais eventos de quais objetos vão disparar o refresh daquela área. Vou colocar só o trecho do grid aqui:<asp:UpdatePanel runat="server" ID="GridUpdatePanel">
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="BuscaBtn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView runat="server"
ID="PessoasGridView"
AutoGenerateColumns="false"
CellPadding="4"
CellSpacing="0">
<Columns>
<asp:BoundField DataField="Nome"
HeaderText="Nome"
HeaderStyle-Width="200" />
<asp:BoundField DataField="Sobrenome"
HeaderText="Sobrenome"
HeaderStyle-Width="200" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Segue abaixo a página modificada:<%@ 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>Ajax com ASP.NET</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="AjaxScriptManager" />
<div>
<p>
Busca: <asp:TextBox runat="server" ID="BuscaTxt" Width="200" />
<asp:Button runat="server" ID="BuscaBtn" Text="Buscar"
onclick="BuscaBtn_Click" />
</p>
<div>
<asp:UpdatePanel runat="server" ID="GridUpdatePanel">
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="BuscaBtn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView runat="server"
ID="PessoasGridView"
AutoGenerateColumns="false"
CellPadding="4"
CellSpacing="0">
<Columns>
<asp:BoundField DataField="Nome"
HeaderText="Nome"
HeaderStyle-Width="200" />
<asp:BoundField DataField="Sobrenome"
HeaderText="Sobrenome"
HeaderStyle-Width="200" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
E o mais legal é que nós criamos zero de código javascript para habilitar Ajax no nosso WebForm.
Um grande abraço a todos e até a próxima.
Nenhum comentário:
Postar um comentário