Hoje farei o primeiro POST técnico de nosso blog. Falarei sobre os PageMethods, um recurso bastante útil do AJAX no ASP.NET.
É muito comum a necessidade de realizar algum tipo de operação no lado servidor da aplicação sem renderizar novamente grandes blocos de código HTML. As vezes a idéia é atualizar apenas um pequeno valor que é calculado no servidor e exibí-lo em uma label, ou então atualizar um ícone de acordo com o status de uma operação.
Os PageMethods são chamadas de métodos no servidor utilizando Javascript. Para utilizá-los algumas pequenas configurações e implementações são necessárias. Para ilustrar os procedimentos vou utilizar um exemplo bem simples. Nosso exemplo consiste na necessidade de realizar a soma de dois números. Apesar de ser uma operação bastante simples e que poderia ser realizada apenas através de Javascript, vamos imaginar que essa soma só pudesse ser realizada no lado servidor da aplicação.
1 – Formulário
Nosso formulário contém apenas duas caixas de texto, um botão e uma span (controle onde será exibido o resultado do cálculo).
<form id="form1" runat="server"> <asp:ScriptManager runat="server" EnablePageMethods="true"> </asp:ScriptManager> <div> <p> Primeiro número:<br /> <input type="text" id="numero1" /> </p> <p> Segundo número:<br /> <input type="text" id="numero2" /> </p> <p> <input type="button" value="Somar" onclick="javascript: somar();" /> </p> <p> Resultado:<br /> <span id="resultado"></span> </p> </div> </form>
É importante atentar para a necessidade de existir um ScriptManager na página e que o mesmo tenha habilitado o uso de PageMethods.
<asp:ScriptManager runat="server" EnablePageMethods="true"> </asp:ScriptManager>
2 – Operação no codebehind
Agora criaremos no codebehind o método responsável por realizar a soma dos números. Para que tudo funcione corretamente não se pode esquecer o atributo WebMethod que deve ser colocado logo acima do método. Outro detalhe importante é que o método deve ser estático para que possa ser acessado através de Javascript.
1 2 3 4 5 6 7 8 9 10 11 | /// <summary> /// Realiza a soma de dois números. /// </summary> /// <param name="numero1">Primeiro número.</param> /// <param name="numero2">Segundo número.</param> /// <returns>Resultado da soma.</returns> [WebMethod] public static string Somar(int numero1, int numero2) { return (numero1 + numero2).ToString(); } |
3 – Métodos no cliente
Para controlar os eventos e atualizar o resultado da operação na página é necessário que sejam implementados alguns métodos em javascript. Em nosso exemplo teremos 3 métodos:
- somar: método que é chamado quando o botão Somar é clicado. Esse método é responsável por recuperar os valores do formulário e realizar a chamada da operação no servidor.
- OnSucceed: é chamado através de callback automaticamente quando a operação no servidor for realizada com sucesso.
- OnFailed: é chamado através de callback automaticamente quando ocorrer falha na operação executada no servidor.
Abaixo segue o código das três funções em javascript responsáveis pelo controle da tela:
// Realiza a soma dos dois números informados na tela. function somar() { txtNumero1 = document.getElementById('numero1'); txtNumero2 = document.getElementById('numero2'); PageMethods.Somar(txtNumero1.value, txtNumero2.value, OnSucceeded, OnFailed); } // Executado através de callback em caso de sucesso. function OnSucceeded(result, userContext, methodName) { resultado = document.getElementById('resultado'); resultado.innerHTML = result; } // Executado através de callback em caso de falha. function OnFailed(error, userContext, methodName) { resultado = document.getElementById('resultado'); resultado.innerHTML = 'Erro ao executar soma'; }
O resultado desse exemplo é simples. Sempre que o botão Somar for pressionado, o método somar recupera o valor dos dois números informados no formulário, realiza a requisição ao método Somar no servidor e através do callback atualiza o conteúdo da SPAN resultado.
Espero que esse post possa auxiliar e agregar conhecimentos aqueles que acompanham nosso blog.
Agradeço a todos pelo apoio e visitas.
Um grande abraço. Até a próxima.



