Ampliación del control del mapa HTML utilizando el marco ASP.NET AJAX

Ahora, escriba nuestro método web:

Aquí está el fragmento de la cita:
[Método web]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
cadena pública GetAreaInfo (área de cadena)
{
zona de retorno;
}

Según el consejo de fuentes autorizadas, por razones de seguridad, generalmente utilizamos HttpPost (o HttpGet=false) para acceder a métodos web. Luego, configuramos el formato de datos devuelto en formato JSON (el modo predeterminado es el modo JSON).

Para simplificar, el método GetAreaInfo aquí simplemente devuelve el mismo valor del parámetro de entrada, pero en el desarrollo real, deberíamos reemplazarlo aquí para recuperar datos de la base de datos;

Hasta ahora, hemos creado con éxito un servicio web que se llama desde el cliente mediante AJAX.

Sin embargo, también necesitamos realizar algunas configuraciones apropiadas para el control del servidor ScriptManager en la página, como se muestra a continuación:

El siguiente es un fragmento citado:
<asp:ScriptManager ID="ScriptManager1" runat="servidor">
<servicios>
<asp:ruta de referencia de servicio="~/LocationService.asmx" />
</servicios>
</asp:ScriptManager>

Aquí, solo agregamos una referencia de servicio debajo del nodo, pero ¿cuál es su función?

A partir del análisis del código fuente HTML generado, la configuración anterior generará el siguiente contenido:

El siguiente es un fragmento de referencia:

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

La etiqueta de secuencia de comandos aquí hace referencia a un archivo JavaScript LocationService.asmx/jsdebug. De hecho, esta es una clase de proxy de servicio web. Es a través de esta clase de proxy que podemos llamar al servicio web del lado del servidor de forma asincrónica desde el cliente.

Lo que es más interesante es que si simplemente copia la ruta que se muestra arriba en su navegador, verá un archivo JavaScript generado por el entorno AJAX en tiempo de ejecución; este archivo hace que las llamadas al servicio de script estén disponibles. No discutiremos la clase de proxy en profundidad.

A continuación, veamos cómo crear una clase de cliente personalizada.

4. Cree clases personalizadas del lado del cliente

Sabemos que uno de los principales "inventos" del marco ASP.NET AJAX es que introduce el modelo de programación JavaScript orientado a objetos. Ahora, con la ayuda de los patrones de diseño de JavaScript, podemos crear fácilmente nuestras propias plantillas o clases, agregar conceptos de herencia, crear interfaces y enumeraciones, etc.

En este artículo, desarrollaremos una clase de cliente que encapsula toda la funcionalidad requerida en este ejemplo.

Ahora, haga clic derecho en el proyecto y agregue un nuevo archivo JavaScript llamado ImageMap. En este archivo, definiremos un nuevo espacio de nombres MyServices; este espacio de nombres contendrá las clases de cliente que desarrollaremos. Como se muestra a continuación:

El siguiente es un fragmento de la cita:
Type.registerNamespace("Mis Servicios");

A continuación, definimos el constructor de la clase de cliente que queremos crear:

Aquí está el fragmento de referencia:

MyServices.Location = function (uiElement, uiBody) {
MisServicios.Ubicación.initializeBase(esto);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

Una plantilla o un constructor de clases no es más que una función ordinaria de JavaScript. Este constructor tiene dos parámetros: uiElement y uiBody.

Ambos parámetros se utilizarán para describir la ventana emergente que se muestra en la página. Las otras dos variables privadas _xAxis y _yAxis se utilizan para describir la posición de visualización de la ventana emergente. Normalmente, es mejor declarar todos los miembros privados en el constructor.

A continuación, usaremos el patrón de diseño del prototipo para escribir las funciones y propiedades miembro de esta clase:

Aquí está el fragmento de referencia:

MyServices.Location.prototype =
{
get_uiElement: función()
{
devolver this._uiElement;
},
set_uiElement: función (valor)
{
this._uiElement = valor;
},
get_uiBody: función()
{
devolver this._uiBody;
},
set_uiBody: función (valor)
{
this._uiBody = valor;
},

Tenga en cuenta que la definición del método de atributo del elemento UI aquí es muy similar a la forma de definición en varios idiomas en .NET.

La siguiente función miembro es nuestro enfoque y es responsable de llamar al servicio web remoto:

El siguiente es un fragmento de referencia:
ShowPopupinfo: función (evento, nombre de área)
{
MyServices.LocationService.GetAreaInfo(nombredeárea,
Función.createDelegate(esto, esto.OnCompleted),
this.OnError, //Función de devolución de llamada responsable del manejo de errores
this.OnTimeOut); //Función de devolución de llamada responsable del procesamiento del tiempo de espera.
this._xAxis = evento.clientX;
this._yAxis = evento.clientY;
}

El código anterior muestra un método muy típico para llamar a un servicio web desde el cliente:

1) El formulario es casi tan conveniente como llamar a un método local ordinario

2) La función Function.createDelegate es extremadamente importante en el desarrollo global del cliente ASP.NET AJAX; función. Uno de los propósitos originales de crear esta función era resolver el problema de esta palabra clave. En un controlador de eventos desencadenado por un elemento DOM, la palabra clave this siempre se refiere al elemento DOM en lugar de a la clase misma. Pero aquí, la razón por la que usamos esta función es para que el entorno AJAX llame a la función de devolución de llamada en caso de éxito en la misma instancia de clase que activó el servicio web. Esto es muy importante cuando necesitas hacer referencia a propiedades y métodos de clases de clientes. En resumen, el uso de esta función hará que el acceso a las propiedades y métodos de la clase de cliente que llama al servicio web sea seguro y preciso. De lo contrario, la instancia de clase de cliente que realiza la llamada asincrónica será nula porque la respuesta del servicio web se ejecuta en un contexto diferente; este contexto ya no es equivalente al contexto en el que se realizó la solicitud de llamada web asincrónica.

3) Curiosamente, el método GetAreaInfo aquí no es el del servicio web que creamos anteriormente, sino que pertenece a la clase de proxy del servicio web creada en tiempo de ejecución; esta clase de proxy actúa como un proxy de cliente para acceder al servicio web ASMX en el lado del servidor. .

En las dos últimas líneas de código de la función ShowPopupInfo anterior, los parámetros de entrada del evento se utilizan para establecer los valores de las dos variables privadas xAxis y yAxis. Nuestro objetivo aquí es mostrar la ventana emergente lo más cerca posible de donde el usuario hizo clic.

El siguiente es el código de implementación de la función de devolución de llamada correspondiente cuando la llamada es exitosa:

El siguiente es un fragmento de referencia:

OnCompleted: función (resultado, contexto de usuario, nombre del método)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
si (uiBody! = nulo)
{
var textNode = uiBody.firstChild;
si (!textNode)
{
textNode = document.createTextNode(resultado);
uiBody.appendChild(textNode);
}
demás
{
textNode.nodeValue = resultado;
}
si (uiElement! = nulo)
{
uiElement.style.visibility = "visible";
uiElement.style.display = "en línea";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

El contenido es bastante simple: configure los datos devueltos por el servidor para mostrar el contenido de la ventana emergente y asegúrese de que esta ventana se muestre de acuerdo con la situación.

Al final de crear la clase de cliente, también tenemos que decirle al marco AJAX que la registre en el lado del cliente para que se pueda acceder a ella desde el cliente:

Aquí está el fragmento de cita:
MisServicios.Ubicación.registerClass("MisServicios.Ubicación");

En este punto, la clase de cliente MyServices.Location se ha creado correctamente. Entonces, ¿cómo usarlo?

Primero, debemos definir una nueva instancia de la clase de cliente cuando se carga la página. Para hacer esto necesitamos programar en la función pageLoad:

Aquí está el fragmento de cita:
ubicación var = nula;
función pageLoad(remitente, argumentos) {
ubicación = new MyServices.Location("modal", "modalBody");
ubicación.HidePopupInfo();
}

El código anterior simplemente crea una nueva instancia de la clase MyServices.Location. Luego llame a una de las funciones miembro de la clase de cliente para ocultar la ventana emergente en la página. ¿Por qué creamos una instancia de la clase de cliente en la función pageLoad? La razón es que cuando el flujo de control del entorno AJAX llega a la función pageLoad, todo el código JavaScript definido por el usuario y el cliente AJAX se ha cargado correctamente. Por lo tanto, en este momento podemos acceder de forma segura a cualquier código JavaScript definido por el usuario o el sistema.

Varias otras funciones de la herramienta son relativamente simples y no se describirán en detalle aquí.

5. Resumen

En este artículo, le mostré cómo extender el control del mapa HTML creando un servicio AJAX y creando su propia clase de cliente personalizada. En el control ampliado, cuando se hace clic en un área determinada de la imagen, podemos brindar información detallada relevante a través de un nuevo método AJAX sin tener que actualizar toda la página web. Aunque rara vez usamos este control de Mapa en la mayoría de las aplicaciones web (quizás debido a esto, se omite en la barra de herramientas de VS2005), si desarrollamos aplicaciones web relacionadas con una gran cantidad de imágenes, imágenes y operaciones de mapas, el Mapa después de la transformación AJAX Según este artículo, los controles definitivamente harán que su aplicación web sea más colorida.

[Adjunto] El entorno de depuración del código fuente de este artículo: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.