Ajax in a Simple way with ASP.NET
Clique aqui para ver este post em Português
Hello. In this post I'll show a very nice way to enable Ajax in our ASP.NET WebForms I learned.
When I (and most people) learned Ajax, the solution was to use a javascript object (XmlHttpRequest), create a separate script to process the request and write code to display the results that come in XML or plain text. I must confess that I always liked to work with Ajax, even with all that code effort xD
Another interesting point is the debugging and the error tracking.
In VS 2008 there are a couple of simple, but very useful components that allows us to work with Ajax in an easy and transparent way: ScriptManager and UpdatePanel.
To demonstrate the use of these components I'll create an ASP.NET WebForm that searches an object collection, and next add these componentes to enable Ajax. So, Let's start with an ASP.NET WebSite and edit the Default.aspx. Here goes the Markup source code:<%@ 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>
Now the source code of 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();
}
}
With that we can query the private member Pessoas according to the filter criteria in the textbox. But this way each request will produce a full round trip just to update the grid contents. Let's see how to avoid this with the Ajax components.
We'll add the ScriptManager component in our WebForm in order to enable Ajax. Next we'll add the UpdatePanel and put the grid "inside" it.
The UpdatePanel is a very interesting component. It represents a "piece" of the WebForm that is updated when certain events are fired up. But which events? Here comes the interesting part: We configure which component's events we want to "trigger" the update panel. In other words: When that action fires up the only part updated is the content inside the UpdatePanel. Let's see the markup here:<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>
Now the entire WebForm markup:<%@ 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>
Try to run the WebSite and notice that the page doesn't refresh anymore. And the best part is that we didn't need to write any javascript code and create any "support" files.
Thank you for the support and until next time.
Nenhum comentário:
Postar um comentário