sábado, 28 de março de 2009

Ajax-enabled Web Services with ScriptManager

Clique aqui para ver este post em Português

In this post I'll show an incredible ASP.Net feature I've learned recently: Ajax-enabled Web Services.

With the ScriptManager component (that we've already seen in this post) we're able to consume a Web Service in our Web Site and use the results in JavaScript with little to none specific programming effort. With this component, the Web Service looks like it's a client script object.


Let's start with a new Web Site in Visual Studio (the Visual Web Developer express edition works fine, too). Choose a folder to save the Web Site (you don't need the IIS installed in order to test de project). Now we'll create the Web Service.

Right-click the Web Site's root directory and choose Add New Item. In the dialog box select Web Service. Name it AjaxWs.asmx and click Ok. The IDE should open the file App_Code/AjaxWs.cs. This is where we're gonna work.

Let's leave its implementation as it is for now. It should come with a sample method HelloWorld. The only thing we'll do is "enable" the client script calls. To do that find the class definition:

public class AjaxWs : System.Web.Services.WebService


In the line above there's a commented class decoration that we only need to remove the comment bars to enable this feature:

// [System.Web.Script.Services.ScriptService]


So, remove the comment and save the file and click the menu Build > Build Web Site.

The Web Service part is done (for now). Now we're gonna code the Web Form that calls the Web Service. Open the Default.aspx file and go to the visualization "Source" or "Split". Below the form tag

<form id="form1" runat="server">


We're gonna add a ScriptManager component. You can drag it from the toolbox or simply type manually the asp:ScriptManager tag. The VS makes the effort of type the tags manually very smooth, even if it may not seem that way. After done the tag looks like this:

<asp:ScriptManager runat="server" ID="ScriptMngr">
<Services>
<asp:ServiceReference Path="~/AjaxWs.asmx" />
</Services>
</asp:ScriptManager>


We'll now create a client script block in our Web Form. Find the head section and add a script block inside. Here's the code:

<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function executarWs() {
AjaxWs.HelloWorld(
function(resultado) {
alert(resultado)
}
)
}
</script>
</head>


I'll give a brief explanation about this script:

AjaxWs - Our Web Service - was created by VS when we added the ScriptManager component and referenced the ~/AjaxWs.asmx Web Service. We're coding a method call to Hello World and pass a function as an argument - more precisely a callback. A callback is a function definition that is called when the function that took is as an argument needs. Think of it as some sort of event handler. But it's subject for another post.

Now we need to call this method. We've seen "new feature" part. Now we're gonna call our Web Service's methods as an ordinary JavaScript call. We'll create a HTML button to call the JavaScript function:

<button onclick="executarWs()">Clique aqui</button>


Here goes the complete WebForm's 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>Untitled Page</title>
<script type="text/javascript">
function executarWs() {
AjaxWs.HelloWorld(
function(resultado) {
alert(resultado)
}
)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptMngr">
<Services>
<asp:ServiceReference Path="~/AjaxWs.asmx" />
</Services>
</asp:ScriptManager>
<div>
<button onclick="executarWs()">Clique aqui</button>
</div>
</form>
</body>
</html>


Now run the Web Site (F5) to see what we've done in action. When we click the button the message "Hello World" will pop up. This alone is very nice already; but, what if we could return objects with properties instead of pure strings and ints? Well, we can!

First, let's create a class in our Web Site. Right click in the App_Code folder below the root folder and choose Add New Item. In the dialog box choose Class. Name it Pessoa.cs and click Ok. Here's the complete code:

public class Pessoa {

public string Nome { get; set; }
public string Sobrenome { get; set; }

}


Now let's get back to our Web Service and create a new method that take two parameters and returns an instance of Pessoa. Open the AjaxWs.cs again and add the following code under the HelloWorld method:

[WebMethod]
public Pessoa ObterPessoa(string nome, string sobrenome) {
return new Pessoa { Nome = nome, Sobrenome = sobrenome };
}


Now get back to Default.aspx and modify the HelloWorld method call to ObetrPessoa, giving the nome and sobrenome arguments before the callback argument:

function executarWs() {
AjaxWs.ObterPessoa(
"Estação",
"ZN",
function(resultado) {
alert(resultado.Nome + " " + resultado.Sobrenome)
}
)
}


Now run the Web Site again and see the result. Awesome! We had nearly zero effort and the possibilities are many with this technology. Thank you and take care.

Artigo completo (View Full Post)

Web Services em Ajax com ScriptManager

Click here to see this post in English

Neste post eu mostro uma facilidade incrível do ASP.Net que eu aprendi: Acessar Web Services via Ajax.

Com o componente ScriptManager - é o mesmo daquele post sobre ASP.Net e Ajax - podemos incluir referência para um Web Service criado no nosso WebSite, executá-lo e recuperar o resultado com um esforço mínimo de código. Com este componente parece que o Web Service é um objeto do próprio Script cliente da nossa página.


Bem, vamos começar criando projeto WebSite no Visual Studio (pode ser o Visual Web Developer Express Edition também). Escolham uma pasta para abrigar o WebSite (lembrando que para testar o VS inicia um servidor Web virtual com o nosso site) e pronto. Agora vamos criar nosso Web Service.

Clique com o botão direito na raiz do WebSite e selecione Add New Item. Na janela de New Item escolha Web Service. Chame de AjaxWs.asmx e clique Ok. A IDE vai abrir o arquivo App_Code/AjaxWs.cs. É nele que vamos trabalhar

Vamos Deixar a implementação dele como está por enquanto. Ele já vem com um método de exemplo HelloWorld. A única coisa que vamos fazer é "habilitar" que ele seja chamado por Script cliente. Para isso procure a definição da classe:

public class AjaxWs : System.Web.Services.WebService


Na linha acima desta há uma decoração comentada que nós só precisamos descomentar para adicionar esta funcionalidade:

// [System.Web.Script.Services.ScriptService]


Portanto descomente esta linha e salve o arquivo e chame o menu Build > Build Web Site.

A parte do Web Service está pronte (por enquanto). Agora vamos trabalhar no nosso WebForm para chamar este Web Service. Abra o arquivo Default.aspx e vá para a visualização "Source" ou "Split". Abaixo da tag do form

<form id="form1" runat="server">


vamos colocar um componente ScriptManager. Você pode arrastar da toolbox ou simplesmente digitar a tag. O VS deixa o tabalhar de digitar os componentes muito rápido e produtivo, apesar de parecer o contrário. Enfim, a tag fica assim depois de pronta:

<asp:ScriptManager runat="server" ID="ScriptMngr">
<Services>
<asp:ServiceReference Path="~/AjaxWs.asmx" />
</Services>
</asp:ScriptManager>


Com ele aí vamos criar um bloco de script na nossa página. Procure a seção <header> do WebForm e crie um bloco de script dentro. Abaixo está o código:

<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function executarWs() {
AjaxWs.HelloWorld(
function(resultado) {
alert(resultado)
}
)
}
</script>
</head>


Vou dar uma breve explicação sobre este script:

AjaxWs - que é o nome do nosso Web Service - foi definido automaticamente pelo VS quando nós colocamos o ScriptManager no WebForm. Estamos chamando o método HelloWorld do nosso Web Service e passando como argumento uma função - mais precisamente um callback. Um callback é uma definição de função que será chamado pela função que nós invocamos quando necessário. É um conceito semelhante ao de manipuladores de eventos. Em outro post eu me dedico somente a JavaScript.

Agora precisamos executar esta função de alguma maneira. A novidade da tecnologia já passou; agora podemos fazer como uma chamada normal de alguma função JavaScript. Para este exemplo vou criar um botão HTML no WebForm:

<button onclick="executarWs()">Clique aqui</button>


Abaixo segue o WebForm completo:

<%@ 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>Untitled Page</title>
<script type="text/javascript">
function executarWs() {
AjaxWs.HelloWorld(
function(resultado) {
alert(resultado)
}
)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptMngr">
<Services>
<asp:ServiceReference Path="~/AjaxWs.asmx" />
</Services>
</asp:ScriptManager>
<div>
<button onclick="executarWs()">Clique aqui</button>
</div>
</form>
</body>
</html>


Agora execute o programa (F5) para ver o que nós fizemos em ação. Quando clicamos no botão a mensagem "Hello World" aparece. Isso por si só já é muito legal, mas imagine se, em vez de retornar somente uma string, pudéssemos retornar objetos com propriedades? Mas só pode!

Primeiro vamos criar uma classe no Web Site. Clique com o botão direito na pasta App_Code dentro da raiz do Web Site e clique Add New Item. Na janela selecione Class. chame o arquivo de Pessoa.cs e clique Ok. abaixo segue a classe pronta:

public class Pessoa {

public string Nome { get; set; }
public string Sobrenome { get; set; }

}


Agora vamos voltar no nosso Web Service e criar um novo método que pegue dois parâmetros e retorne uma instância de PEssoa. Abra o AjaxWs.cs outra vez e adicione o seguinte método abaixo do HelloWorld:

[WebMethod]
public Pessoa ObterPessoa(string nome, string sobrenome) {
return new Pessoa { Nome = nome, Sobrenome = sobrenome };
}


Agora volte no Default.aspx e modifique a chamada do método HelloWorld para ObterPessoa, passando agora os argumentos nome e sobrenome antes da função de callback:

function executarWs() {
AjaxWs.ObterPessoa(
"Estação",
"ZN",
function(resultado) {
alert(resultado.Nome + " " + resultado.Sobrenome)
}
)
}


Agora execute novamente e veja o resultado. Demais! Nosso esforço foi praticamente zero o as possibilidades são muitas com esta tecnologia. Um grande abraço a todos e até a próxima!

Artigo completo (View Full Post)

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.

Artigo completo (View Full Post)

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.

Artigo completo (View Full Post)

quarta-feira, 11 de março de 2009

Rapidinha


Essa eu tenho que postar!


"Quanto mais desesperadora é a situação, mais otimista é o relatório de progresso"


daqui


Qualquer relação com a minha realidade é ... ah, vocês sabem.


[]s, Rodrigo.

Artigo completo (View Full Post)

 
BlogBlogs.Com.Br