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!
Nenhum comentário:
Postar um comentário