Como chamar uma função do servidor (server.side) utilizando javascript e Microsoft ASP.NET Ajax 1.0 (Atlas)

Artigo recomendado para Visual Studio 2005 SP1 e Microsoft Ajax 1.0

Hoje aprenderemos como usar a propriedade EnablePageMethods do controle ScriptManager e trabalhar com a biblioteca Sys.Net.PageMethod oferecida pelo Microsoft ASP.NET Ajax 1.0 para utilização em conjunto com a linguagem Javascript.

Introdução:

Muitos têm essa necessidade de interagir com as funções e classes server-side do ASP.NET utilizando o Ajax (antigo Atlas) utilizando a linguagem Javascript. Por falta de um exemplo claro e material para estudo sobre esse assunto específico, muitas pessoas acabam recorrendo a outros componentes e bibliotecas Ajax encontradas no mercado. Eu mesmo já me deparei com aplicativos utilizando duas “dll’s” (Ajax), onde o aplicativo inteiro utilizava Microsoft ASP.NET Ajax e, por uma necessidade específica, utilizou outra biblioteca Ajax em um Web Form para fazer essa comunicação com o servidor, através de um código Javascript usado no Form. Geralmente esse tipo de “ajeito técnico” é válido quando queremos transformar um problema em uma “solução rápida”, desde que o mesmo não comprometa o desempenho nem o funcionamento do código, mas nem sempre esse “ajeito” é considerado uma boa prática.

Codificando:

Para iniciar nosso artigo, abra o Visual Studio.NET SP1 e crie um Novo Projeto > C# > ASP.NET Web Application com o nome de PageMethod [figura 1]; depois abra o Web Form padrão (Default.aspx) e arraste um controle do tipo ScriptManager [figura 2] do Ajax, feito isso adicione dois botões da categoria HTML Controls Input (Submit) e crie um DIV no HTML com o id = ResultId ou um Label para o Form também com id = ResultId.

Figura 1

Figura 1 – Criando um Novo Projeto > C# > ASP.NET Web Application utilizando C#

Figura 2

Figura 2 – Adicionando um controle do tipo ScriptManager ao Form

Figura3

Figura 3 – Adicionando um controle do tipo Input (Submit) da categoria HTML Controls ao Form

Figura 3 Figura 4 – Web Form pronto

Veja abaixo na listagem 1 como ficou o HTML completo do Form que será usado no nosso exemplo:

<title>Page Methods - ScriptManager(Microsoft Ajax)</title>

</head>

<body>

<h2>Usando PageMethods com Session</h2>

<h4>Utilizando javascript para acessar valores "server side" como Session, Configurações do Web.Config etc ou invocar funções do Code Behind!</h4>

<asp:ScriptManager ID="ScriptManager1"

runat="server" EnablePageMethods="true">

<asp:ScriptReference Path="PageMethod.js"/>

</Scripts>

</asp:ScriptManager>

</form>

<table>

<td>

Escrevendo a data e hora atual em uma Sessão:</td>

<td>

<input type="Button"

onclick="SetSessionValue('SessionValue', Date())"

value="Salvar" />

</td>

</tr>

<td>

Recuperando a data e hora armazenados na Sessão:</td>

<td>

<input type="Button"

onclick="GetSessionValue('SessionValue')"

value="Recuperar" />

</td>

</tr>

</table>

</center>

<hr/>

</body>

</html>

Listagem 1 - Código HTML do Web Form Default.aspx

Com o HTML completo conforme listagem 1, iremos fazer as devidas configurações necessárias. Aos botões Input (Submit) adicione o evento onclick e faça a chamada à função javascript que se comunicará com a função do servidor que será responsável pela criação e recuperação do valor da Sessão, veja como ficará cada controle na listagem 2:

Input 1

Type=”Button”
Value=”Salvar”

Onclick=”SetSessionValue(‘SessionValue’),Date())”

Input 2

Type=”Button”

Value=”Recuperar”

Onclick=”GetSessionValue(‘Sessionvalue’)”

Listagem 2 – Propriedades dos controles Input

Vamos para as configurações do ScriptManager, mas antes crie um novo arquivo do tipo Jscript File (Projeto > Add > New Item > Jscript File) [figura 5] com o nome de PageMethod.js [figura 6] e coloque o código Javascript da listagem 3:

Figura 5
Figura 5 – Criando um novo arquivo

Figura 6

Figura 6 – Escolhendo o tipo “JScript File” e nomeando-o conforme usaremos no projeto

// PageMethods.js

var displayElement;

// Criando variáveis globais e executando e criando a Sessão.

function pageLoad()

{

displayElement = $get("ResultId");

PageMethods.SetSessionValue("SessionValue", Date(),

OnSucceeded, OnFailed);

}

// Recuperar o valor da Sessão.

function GetSessionValue(key)

{

PageMethods.GetSessionValue(key,

OnSucceeded, OnFailed);

}

//Salvando a Data e hora atual na Sessão.

function SetSessionValue(key, value)

{

PageMethods.SetSessionValue(key, value,

OnSucceeded, OnFailed);

}

// Função de retorno caso seja invocado com sucesso

function OnSucceeded(result, userContext, methodName)

{

if (methodName == "GetSessionValue")

{

displayElement.innerHTML = "Valor atual da Sessão: " +

result;

}

// Função de retorno caso algo dê errado

function OnFailed(error, userContext, methodName)

{

if(error !== null)

{

displayElement.innerHTML = "Ocorreu um erro: " +

error.get_message();

}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Listagem 3 – Código Javascript.

Agora sim, Clique no Controle “ScriptManager” e em Propriedades, clique em Scripts e adicione uma nova referência ao arquivo Javascript recém criado conforme figura 7. Reparem a diferença de um código javascript comum com o código mostrado da listagem 3 bonde podemos perceber o uso de método da biblioteca do Ajax (Sys.Net), vemos trechos como: “displayElement = $get("ResultId")“ e itens específicas como: “error.get_message()” e “Sys.Application.notifyScriptLoaded()”.

Figura 7 – Adicionando a referência ao arquivo Javascript.

Ao concluir, vá até o código (arquivo .cs) da página ASP.NET e vamos trabalhar com as funções que serão chamadas pelo javascript para iteração com a Sessão do aplicativo.

Veja como ficou o código do Web Form na listagem 4 abaixo:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Web.Services;

namespace PageMethod

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

// Recuperando o valor da Sessão.

public static string GetSessionValue(string key)

{

return (string)HttpContext.Current.Session[key];

}

[WebMethod]

// Salvando o valor da Sessão.

public static string SetSessionValue(string key, string value)

{

HttpContext.Current.Session[key] = value;

return (string)HttpContext.Current.Session[key];

}

Listagem 4 – Código .cs

Percebam o uso da identificação [WebMethod] antes de cada função que será usada e da importação da classe “System.Web.Services”. Isso é necessário por que a biblioteca do Ajax (Sys.Net.PageMethod) utiliza a classe System.Web.Services e seus métodos para compartilhar os métodos server-side e torná-los acessíveis através do código “Client side” (Javascript).

Configurações do Web.Config (Microsoft ASP.NET Ajax 1.0)

Para finalizar, após tudo isso não podemos nos esquecer das configurações do Web.Config para que o Microsoft ASP.NET Ajax 1.0 funcione corretamente. Caso crie um novo projeto usando um Template de Projeto com Ajax não precisará das configurações da listagem 5:

<?xml version="1.0"?><configuration>

</sectionGroup>

</configSections>

<system.web>

</assemblies>

</compilation>

<pages>

</controls>

</pages>

</httpHandlers>

</httpModules>

</system.web>

<system.webServer>

</modules>

</handlers>

</system.webServer>

</configuration>

Listagem 5 – Configurações do Web.Config para o Microsoft ASP.NET Ajax 1.0

Comentário

Ultimamente ando lendo em muitos fóruns usuários afirmando que o aplicativo que utiliza MS Ajax 1.0 funcione corretamente, o servidor de hospedagem terá que o ter o componente instalado, essa afirmação não é correta. O que acontece é que nas primeiras versões do Atlas, sua instalação não adicionava o Assembly ao GAC (Global Assembly Cache) e também quando se adicionava um objeto do Atlas no Web Form a referência a dll era adicionada e sua propriedade Copy Local era automaticamente marcada como True, o que não acontece nas últimas versões do Atlas agora chamado de Microsoft ASP.NET Ajax, onde o mesmo é adicionado ao GAC na sua instalação e a propriedade em questão não é marcada como True.

Para resolvermos esse problema podemos simplesmente selecionar o Assembly System.Web.Extensions no Solution Explorer e em propriedades configurar a propriedade Copy Local = True, dessa forma ao compilar o projeto a dll é automaticamente copiada para a pasta Bin do projeto eliminando a necessidade de se ter o componente instalado no servidor [figura 8].

Figura 8 – Propriedades do Assembly

Com esse artigo aprendemos a utilizar o Microsoft Ajax para chamar funções server-side através da linguagem Javascript. O uso desse exemplo pode ser muito útil, espero que gostem e aproveitem o artigo, qualquer dúvida entre em contato, até o próximo.

Código fonte:
[http://www.i4design.com.br/artigos/PageMethods.rar]

Referências:

Documentação do Microsoft ASP.NET Ajax 1.0:
[http://ajax.asp.net/docs/ClientReference/Global/default.aspx]

Requisitos:
Microsoft ASP.NET Ajax 1.0:
[http://ajax.asp.net/Default.aspx]
Atualização SP1 para o Visual Studio 2005:
[http://msdn2.microsoft.com/pt-br/vstudio/bb265237.aspx]

Fabiano Vitucci Santiago
(Analista de Sistemas da i4 Design Soluções e das Faculdades Santo Agostinho)

www.i4design.com.br / www.santoagostinho.edu.br

dotnet@i4design.com.br

🎓 community

Como chamar uma função do servidor (server.side) utilizando javascript e Microsoft ASP.NET Ajax 1.0 (Atlas)

Fabiano Vitucci Santiago

Qual é o básico de finanças?

É difícil aprender a programar?

Benchmark com C# - testes

Executando thread em background