Extending the HTML Map control using the ASP.NET AJAX framework

Now, write our web method:

Here is the quote snippet:
[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string GetAreaInfo(string area)
{
return area;
}

According to the advice of authoritative sources, for security reasons, we generally use HttpPost (or HttpGet= false) to access Web methods. Then, we configure the returned data format to JSON format (the default mode is JSON mode).

For simplicity, the GetAreaInfo method here just returns the same value of the input parameter; but in actual development, we should replace here to retrieve data from the database.

So far, we have successfully created a Web service that is called from the client using AJAX.

However, we also need to make some appropriate configurations for the server control ScriptManager in the page, as shown below:

The following is a quoted fragment:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<services>
<asp:servicereference path="~/LocationService.asmx" />
</services>
</asp:ScriptManager>

Here, we only added a service reference under the node, but what is its role?

From the analysis of the generated HTML source code, the above configuration will generate the following content:

The following is a reference fragment:

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

The script tag here references a JavaScript file LocationService.asmx/jsdebug. In fact, this is a Web service proxy class. It is through this proxy class that we are able to call the server-side web service asynchronously from the client.

What's more interesting is that if you simply copy the path shown above into your browser, you will see a JavaScript file generated by the AJAX environment at run time - this file makes the script service calls available. We will not discuss the proxy class in depth.

Next, let's look at how to create a custom client class.

4. Create client-side custom classes

We know that one of the major "inventions" of the ASP.NET AJAX framework is that it introduces the object-oriented JavaScript programming model. Now, with the help of JavaScript design patterns, we can easily create our own templates or classes, add inheritance concepts, create interfaces and enumerations, etc.

In this article, we will develop a client class that encapsulates all the functionality required in this example.

Now, right-click on the project and add a new JavaScript file called ImageMap. In this file, we will define a new namespace MyServices; this namespace will contain the client classes we will develop. As shown below:

The following is a fragment of the quote:
Type.registerNamespace("MyServices");

Next, we define the constructor of the client class we want to create:

Here is the reference snippet:

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

A template or class constructor is nothing more than an ordinary JavaScript function. This constructor has two parameters: uiElement and uiBody.

Both parameters will be used to describe the pop-up window displayed on the page. The other two private variables _xAxis and _yAxis are used to describe the display position of the pop-up window. Typically, it is best to declare all private members in the constructor.

Next, we will use the prototype design pattern to write the member functions and properties in this class:

Here is the reference fragment:

MyServices.Location.prototype =
{
get_uiElement: function()
{
return this._uiElement;
},
set_uiElement: function(value)
{
this._uiElement = value;
},
get_uiBody: function()
{
return this._uiBody;
},
set_uiBody: function(value)
{
this._uiBody = value;
},

Note that the definition of the UI element attribute method here is very similar to the definition form in various languages ​​​​in .NET.

The following member function is our focus, it is responsible for calling the remote Web service:

The following is a reference fragment:
ShowPopupinfo: function(event, areaName)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError, //Callback function responsible for error handling
this.OnTimeOut); //Callback function responsible for timeout processing
this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

The above code shows a very typical method of calling a Web service from the client:

1) The form is almost as convenient as calling an ordinary local method;

2) The Function.createDelegate function is extremely important in ASP.NET AJAX client development global function. One of the original purposes of creating this function was to solve the problem of this keyword. In an event handler triggered by a DOM element, the this keyword always refers to the DOM element rather than the class itself. But here, the reason we use this function is so that the AJAX environment calls the callback function on success in the same class instance that triggered the Web service. This is quite important when you need to reference properties and methods of client classes. In short, using this function will make accessing the properties and methods of the client class that calls the Web service safe and accurate. Otherwise, the client class instance making the asynchronous call will be null because the web service's response is executed in a different context—this context is no longer equivalent to the context in which the asynchronous web call request was made.

3) Interestingly, the GetAreaInfo method here is not the one in the Web service we created earlier, but belongs to the Web service proxy class created at runtime—this proxy class acts as a client proxy to access the ASMX Web service on the server side. .

In the last two lines of code in the ShowPopupInfo function above, the input parameters of the event are used to set the values ​​​​of the two private variables xAxis and yAxis. Our goal here is to display the popup as close as possible to where the user clicked.

The following is the implementation code of the corresponding callback function when the call is successful:

The following is a reference fragment:

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

The content is quite simple - set the data returned from the server to the display content of the pop-up window and ensure that this window is displayed according to the situation.

At the end of creating the client class, we also have to tell the AJAX framework to register it on the client side so that it can be accessed from the client:

Here is the quote snippet:
MyServices.Location.registerClass("MyServices.Location");

At this point, the client class MyServices.Location has been successfully created. So, how to use it?

First, we need to define a new instance of the client class when the page loads. To do this we need to program in the pageLoad function:

Here is the quote snippet:
var location = null;
function pageLoad(sender, args) {
location = new MyServices.Location("modal", "modalBody");
location.HidePopupInfo();
}

The above code simply creates a new instance of the MyServices.Location class. Then call one of the member functions of the client class to hide the pop-up window in the page. Why do we create an instance of the client class in the pageLoad function? The reason is that when the AJAX environment control flow reaches the pageLoad function, all AJAX client and user-defined JavaScript code have been successfully loaded. Therefore, at this moment we can safely access any user or system defined JavaScript code.

Several other tool functions are relatively simple and will not be described in detail here.

5. Summary

In this article, I showed you how to extend the HTML Map control by creating an AJAX service and creating your own custom client class. In the expanded control, when a certain area in the image is clicked, we can give relevant detailed information through a new AJAX method without having to refresh the entire Web page. Although we seldom use this Map control in most Web applications (perhaps because of this, it is omitted from the VS2005 toolbar), but if we develop Web applications related to a large number of pictures, images and map operations, the Map after AJAX transformation based on this article Controls will definitely make your web application more colorful.

[Attachment] The source code debugging environment of this article: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.