Passagem dos objetos em parâmetros durante as chamadas AJAX

Introdução

Uma das principais vantagens da exploração da tecnologia AJAX com o ASP.NET é a possibilidade de serializar objetos .NET passando do servidor para o cliente e desserializando-os no sentido contrário, passando do cliente para o servidor. Isso deve acontecer de forma transparente, mas você deve prestar atenção à formulação dos objetos do JavaScript.

Pré-requisitos

Suponhamos que os nossos leitores conhecem, pelo menos um pouco,a plataforma .NET e as páginas ASP.NET com tecnologia AJAX. Além disso, vamos nos basear no Framework.NET 3.5 com o IDE Microsoft Visual Studio 2008. 

Construção da solução

Vamos construir uma solução Web ASP.NET com uma página aspx, um serviço web e uma estrutura de objetos da seguinte forma: 


Nós vamos, então, tentar chamar o serviço através da nossa página aspx, comunicando no sentido servidor/cliente, uma estrutura de objetos construída no servidor, e no outro sentido, passando uma estrutura JSon do cliente para o servidor . 

Retornar uma estrutura do servidor

Na nossa página aspx, definimos um botão html chamando uma função JavaScript durante o seu clique: 

<input type="button" value="Retornar uma estrutura do servidor" onclick="javascript: chamadaRetorrnarUmaEstrutura();" />

A função chamada, por seu lado, chama o AJAX para o nosso serviço web passando dois parâmetros da seguinte maneira:  

function chamadaRetorrnarUmaEstrutura() {  
    var dataDaChamada = new Date();  
    contadorDeChamadas++;  
    AplicativoWebAjax.ServiçoWebAjax.RetornarUmaEstrutura(dataDaChamada, contadorDaChamada, RetornarUmaEstrutura_SucceededCallback, FailedCallback);  
}  

No servidor, nosso serviço vai construir uma estrutura de objetos para fazê-la retornar como valor de retorno de sua função "RetornarUmaEstrutura" para o cliente: 

[WebMethod]  
público MeuEspaço.MeuObjeto RetornarUmaEstrutura(DateTime dataDaChamada, int contador Da Chamada)  
{  
    MeuEspaço.MeuObjeto meuObjeto = new MeuEspaço.MeuObjeto();  
    meuObjeto.MeuParamString = "Data da chamada: " + dataDaChamada.ToString() + " - Contador da chamada : " + contadorDaChamada.ToString();  
    meuObjeto.MeuParamInt = contadorDaChamada;  
    meuObjeto.MeuParamDecimal = contadorDaChamada / 2;  
    meuObjeto.MeuParamDateTime = dataDaChamada;  
    meuObjeto.MeusSubObjetos.Add(new MeuEspaço.MeuSubObjeto("Param 1"));  
    meuObjeto. MeusSubObjetos.Add(new MeuEspaço.MeuSubObjeto("Param 2"));  
    return meuObjeto;  
}

A estrutura devolvida ao cliente pode ser usada com o código JavaScript sem problemas: 

function RetornarUmaEstrutura_SucceededCallback(resultado) {  
    
 document.getElementById('testDiv').innerHTML +=  

        '<b>Objeto recebido do servidor :</b><br />' +  
        '<b>    MeuParamString = ' + resultado.MeuParamString + '</b><br />' +  
        '<b>    MeuParamInt = ' + resultado.MeuParamInt + '</b><br />' +  
        '<b>    MeuParamDecimal = ' + resultado.MeuParamDecimal + '</b><br />' +  
        '<b>    MeuParamDateTime = ' + resultado.MeuParamDateTime + '</b><br />' +  
        '<b>    MeusSubObjetos[0].MeuParamString = ' + resultado.MeusSubObjetos[0].MeuParamString + '</b><br />' +  
        '<b>    MeusSubObjetos[1].MeuParamString = ' + resultado.MeusSubObjetos[1].MeuParamString + '</b><br />';  
}

Como se trata de uma estrutura JSon, o processamento do cliente é bastante simplificado, porque podemos encontrar facilmente os nossos atributos com seus nomes definidos no servidor. 

Receber uma estrutura no servidor

Vamos definir outro botão html: 

<input type="button" value="Receber uma estrutura no servidor" onclick="javascript: chamadaReceberUmaEstrutura();" />

Este botão chama o método que se encarrega, em primeiro lugar, da construção de uma estrutura JSon conforme à estrutura objeto definida no servidor e, em segundo lugar, da chamada do método do serviço web, fazendo-o comunicar a estrutura pré-construída: 

function chamadaReceberUmaEstrutura() {  
   
  var meuObjeto = {  
        "MeuParamString": "A ser tratado no servidor",  
        "MeuParamInt": 3,  
        "MeuParamDecimal": 1,  
        "MeuParamDateTime": new Date(2008, 10, 10, 10, 30, 59, 88),  
        "MeusSubObjetos": [{ "MeuParamString": "Param 1" }, { "MeuParamString": "Param 2"}]  
        };  
    AplicativoWebAjax.ServiçoWebAjax.ReceberUmaEstrutura(meuObjeto, ReceberUmaEstrutura_SucceededCallback, FailedCallback);  
}

Observamos aqui, em particular, a necessidade de utilizar valores corretamente digitados. Este é o caso das datas que devem ser definidas respeitando o tipo de data JavaScript. É por isso que usamos em nosso exemplo o objeto "Data" JavaScript e não uma sequência de caracteres representando uma data formatada. 

O uso das variáveis corretamente digitadas nos proporciona uma enorme vantagem na medida em que permanece independente da cultura escolhida no cliente e a outra, escolhida no servidor. 

Finalmente, passemos à nossa função de servidor que deve receber a nossa estrutura, mas desta vez como um verdadeiro objeto.NET corretamente desserializado, se supomos, naturalmente, que proporcionamos um Json conforme: 

[WebMethod]  
public string ReceberUmaEstrutura(MeuEspaço.MeuObjeto meuObjeto)  
{  
    meuObjeto.MeuParamString = "Data da chamada: " + DateTime.Now.ToString();  
    return "<b> MeuParamString = " + meuObjeto.MeuParamString + "</b><br />" +  
        "<b>    MeuParamInt = " + meuObjeto.MeuParamInt + "</b><br />" +  
        "<b>    MeuParamDecimal = " + meuObjeto.MeuParamDecimal + "</b><br />" +  
        "<b>    MeuParamDateTime = " + meuObjeto.MeuParamDateTime + "</b><br />" +  
        "<b>    MeusSubObjetos[0].MeuParamString = " + meuObjeto.MeusSubObjetos[0].MeuParamString + "</b><br />" +  
        "<b>    MeusSubObjetos[1].MeuParamString = " + meuObjeto.MeusSubObjetos[1].MeuParamString + "</b><br />";  
}

Conclusão

Olhando para o exemplo apresentado aqui, podemos concluir que não há nada mais fácil do que fazer passar um objeto .NET de um lado ou de outro, ou vice-versdo servidor para o cliente mas, na verdade, isso poderia esconder as dificuldades a serem ultrapassadas em função da complexidade dos objetos tratados. Recomendamos que você use uma ferramenta para observar o tráfego na web e visualizar a estrutura dos objetos enviados do servidor para o cliente, a fim de aprender, construindo esses objetos no cliente. 


Tradução feita por Lucia Maurity y Nouira