Estendendo o controle HTML Map usando a estrutura ASP.NET AJAX

Agora, escreva nosso método web:

Aqui está o trecho de citação:
[WebMethod]
[ScriptMethod(UseHttpGet = falso, ResponseFormat = ResponseFormat.Json)]
string pública GetAreaInfo(string área)
{
área de retorno;
}

De acordo com o conselho de fontes autorizadas, por razões de segurança, geralmente usamos HttpPost (ou HttpGet=false) para acessar métodos da Web. Em seguida, configuramos o formato dos dados retornados para o formato JSON (o modo padrão é o modo JSON).

Para simplificar, o método GetAreaInfo aqui retorna apenas o mesmo valor do parâmetro de entrada, mas no desenvolvimento real, devemos substituir aqui para recuperar dados do banco de dados;

Até agora, criamos com sucesso um serviço Web que é chamado pelo cliente usando AJAX.

Porém, também precisamos fazer algumas configurações apropriadas para o controle do servidor ScriptManager na página, conforme mostrado abaixo:

A seguir está um fragmento citado:
<asp:ScriptManager ID="ScriptManager1" runat="servidor">
<serviços>
<asp:servicereference path="~/LocationService.asmx" />
</serviços>
</asp:ScriptManager>

Aqui, adicionamos apenas uma referência de serviço no nó, mas qual é a sua função

A partir da análise do código-fonte HTML gerado, a configuração acima irá gerar o seguinte conteúdo:

A seguir está um fragmento de referência:

<script src="LocationService? .asmx /jsdebug" type="text/javascript"></script>

A tag de script aqui faz referência a um arquivo JavaScript LocationService.asmx/jsdebug. Na verdade, esta é uma classe de proxy de serviço da Web. É por meio dessa classe proxy que podemos chamar o serviço web do lado do servidor de forma assíncrona a partir do cliente.

O mais interessante é que se você simplesmente copiar o caminho mostrado acima em seu navegador, verá um arquivo JavaScript gerado pelo ambiente AJAX em tempo de execução - esse arquivo disponibiliza as chamadas de serviço do script. Não discutiremos a classe proxy em profundidade.

A seguir, vamos ver como criar uma classe de cliente personalizada.

4. Crie classes personalizadas do lado do cliente

Sabemos que uma das principais "invenções" da estrutura ASP.NET AJAX é que ela introduz o modelo de programação JavaScript orientado a objetos. Agora, com a ajuda de padrões de design JavaScript, podemos facilmente criar nossos próprios modelos ou classes, adicionar conceitos de herança, criar interfaces e enumerações, etc.

Neste artigo, desenvolveremos uma classe cliente que encapsula todas as funcionalidades exigidas neste exemplo.

Agora, clique com o botão direito no projeto e adicione um novo arquivo JavaScript chamado ImageMap. Neste arquivo definiremos um novo namespace MyServices; este namespace conterá as classes clientes que iremos desenvolver. Conforme mostrado abaixo:

A seguir está um fragmento da citação:
Type.registerNamespace("MeusServiços");

A seguir, definimos o construtor da classe cliente que queremos criar:

Aqui está o trecho de referência:

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yEixo = 0;
}

Um modelo ou construtor de classe nada mais é do que uma função JavaScript comum. Este construtor possui dois parâmetros: uiElement e uiBody.

Ambos os parâmetros serão usados ​​para descrever a janela pop-up exibida na página. As outras duas variáveis ​​privadas _xAxis e _yAxis são usadas para descrever a posição de exibição da janela pop-up. Normalmente, é melhor declarar todos os membros privados no construtor.

A seguir, usaremos o padrão de design do protótipo para escrever as funções e propriedades dos membros nesta classe:

Aqui está o fragmento de referência:

MyServices.Location.prototype =
{
get_uiElement: função()
{
retorne este._uiElement;
},
set_uiElement: função (valor)
{
this._uiElement = valor;
},
get_uiBody: função()
{
retorne isto._uiBody;
},
set_uiBody: função (valor)
{
this._uiBody = valor;
},

Observe que a definição do método de atributo do elemento UI aqui é muito semelhante ao formulário de definição em várias linguagens no .NET.

A seguinte função membro é nosso foco, ela é responsável por chamar o serviço Web remoto:

A seguir está um fragmento de referência:
ShowPopupinfo: função(evento, nomedaárea)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(isto,este.OnCompleted),
this.OnError, //Função de retorno de chamada responsável pelo tratamento de erros
this.OnTimeOut); //Função de retorno de chamada responsável pelo processamento de timeout
this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

O código acima mostra um método muito típico de chamada de um serviço Web do cliente:

1) O formulário é quase tão conveniente quanto chamar um método local comum

2) A função Function.createDelegate é extremamente importante no desenvolvimento global do cliente ASP.NET AJAX; função. Um dos propósitos originais da criação desta função era resolver o problema desta palavra-chave. Em um manipulador de eventos acionado por um elemento DOM, a palavra-chave this sempre se refere ao elemento DOM e não à própria classe. Mas aqui, o motivo pelo qual usamos essa função é para que o ambiente AJAX chame a função de retorno de chamada em caso de sucesso na mesma instância de classe que acionou o serviço Web. Isso é muito importante quando você precisa fazer referência a propriedades e métodos de classes clientes. Resumindo, o uso desta função tornará seguro e preciso o acesso às propriedades e métodos da classe cliente que chama o serviço Web. Caso contrário, a instância da classe cliente que faz a chamada assíncrona será nula porque a resposta do serviço web é executada em um contexto diferente – esse contexto não é mais equivalente ao contexto no qual a solicitação de chamada web assíncrona foi feita.

3) Curiosamente, o método GetAreaInfo aqui não é aquele do serviço Web que criamos anteriormente, mas pertence à classe de proxy de serviço Web criada em tempo de execução – essa classe de proxy atua como um proxy de cliente para acessar o serviço Web ASMX no lado do servidor .

Nas duas últimas linhas de código da função ShowPopupInfo acima, os parâmetros de entrada do evento são usados ​​para definir os valores das duas variáveis ​​privadas xAxis e yAxis. Nosso objetivo aqui é exibir o pop-up o mais próximo possível de onde o usuário clicou.

A seguir está o código de implementação da função de retorno de chamada correspondente quando a chamada é bem-sucedida:

A seguir está um fragmento de referência:

OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody! = nulo)
{
var textNode = uiBody.firstChild;
se (!textNode)
{
textNode = document.createTextNode(resultado);
uiBody.appendChild(textNode);
}
outro
{
textNode.nodeValue = resultado;
}
if (uiElement! = nulo)
{
uiElement.style.visibility = "visível";
uiElement.style.display = "inline";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

O conteúdo é bastante simples - defina os dados retornados do servidor para exibir o conteúdo da janela pop-up e certifique-se de que esta janela seja exibida de acordo com a situação.

Ao final da criação da classe cliente, também temos que informar ao framework AJAX para registrá-la no lado do cliente para que possa ser acessada pelo cliente:

Aqui está o trecho de citação:
MyServices.Location.registerClass("MyServices.Location");

Neste ponto, a classe de cliente MyServices.Location foi criada com sucesso. Então, como usá-lo?

Primeiro, precisamos definir uma nova instância da classe cliente quando a página for carregada. Para fazer isso precisamos programar na função pageLoad:

Aqui está o trecho de citação:
var localização = null;
function pageLoad(remetente, args) {
localização = novo MyServices.Location("modal", "modalBody");
localização.HidePopupInfo();
}

O código acima simplesmente cria uma nova instância da classe MyServices.Location. Em seguida, chame uma das funções membro da classe cliente para ocultar a janela pop-up na página. Por que criamos uma instância da classe cliente na função pageLoad. O motivo é que quando o fluxo de controle do ambiente AJAX atinge a função pageLoad, todo o cliente AJAX e o código JavaScript definido pelo usuário foram carregados com sucesso. Portanto, neste momento podemos acessar com segurança qualquer código JavaScript definido pelo usuário ou pelo sistema.

Várias outras funções da ferramenta são relativamente simples e não serão descritas em detalhes aqui.

5. Resumo

Neste artigo, mostrei como estender o controle HTML Map criando um serviço AJAX e criando sua própria classe de cliente personalizada. No controle expandido, quando uma determinada área da imagem é clicada, podemos fornecer informações detalhadas relevantes através de um novo método AJAX sem a necessidade de atualizar toda a página da Web. Embora raramente usemos esse controle Map na maioria dos aplicativos da Web (talvez por causa disso, ele é omitido da barra de ferramentas do VS2005), mas se desenvolvermos aplicativos da Web relacionados a um grande número de imagens, imagens e operações de mapa, o Map após a transformação AJAX com base neste artigo, os controles definitivamente tornarão seu aplicativo da web mais colorido.

[Anexo] O ambiente de depuração de código-fonte deste artigo: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.