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.