To extend an HTML map control using the asp.net AJAX framework

"Summary" In this article, I'll show you how to extend the HTML map controls that add clickable hotspots using the ASP.net AJAX framework. After scaling, when our mouse moves to these hotspots, the details of these hotspots are popped up, but these details are obtained from the remote service in an AJAX asynchronous fashion.

First, Introduction

First, we note that ASP.net 2.0 also provides a server control ImageMap. This control is a server control that allows you to define a hotspot (HotSpot) area on the picture. Users can either click the Hotspot area for a postback (postback) operation or forward to a URL address. Typically, the control is used to interact with the local scope of a picture. However, the disadvantage of this control is that clicking on these hotspot areas for postback will cause the entire Web page to be refreshed.

In this article, we will extend the normal HTML map control based on ASP.net Ajax technology to meet the Web 2.0 application Development trend When we click on the Hotspot area, and only cause local page updates when the details are displayed.

Figure 1 below shows a snapshot of the sample program at run time.

Figure 1. The map control hotspot with the AJAX technology extension only causes local updates.

As seen above, when the mouse hovers over Jupiter (Jupiter) in the upper solar system, details about the planet are displayed amicably in a pop-up window (note: This figure is taken from MSDN and there is no translation of the corresponding word).

Second, create an AJAX sample Web site

Start Visual Studio 2005, select file → new site ..., then select the asp.net ajax-enabled Web site template, name the project "Ajax_imagemap", and select C # as the built-in support language, and then click OK.

Then, add a new ASPX page imagemap.aspx, and modify the HTML code section as follows:

The following are the referenced contents: alt= "Solar System" usemap= "#SystemMap" > <map name= "Systemmap" > <area shape= "rect" coords= "0,0,82,126" Onmouseover= "Javascript:getareainfo (Event, ' Sun ');" Onmouseout= "Javascript:hidepopup ();" > <area shape= "Circle" coords= "90,58,3" Onmouseover= "Javascript:getareainfo (event, ' Merglobe ');" Onmouseout= "Javascript:hidepopup ();" > <area SHAPE ... ...... Omitted </MAP>

In the code above, we added an HTML element and an HTML element (note: The VS2005 toolbar does not provide ready-made controls and can only be added manually). It defines the corresponding hot shape and coordinate information of each planet. Also, each hotspot has a corresponding onmouseover and onmouseout JavaScript function associated with it. When the mouse moves over these hotspots, the two functions are activated and the corresponding information is displayed. For these two functions, we'll discuss them in more detail later.

Third, create an AJAX service

Now we need to create a new Web service that is responsible for data retrieval tasks related to hotspot clicks. In fact, the so-called "Ajax service" here, its function is consistent with the usual Web services. The details of the differences between them are no longer detailed here. Now, you can right-click the project and add a Web service named Locationservice.asmx.

Note that in this example we only want to simulate a simple logic in the combat environment with this Web service. Therefore, it contains only one Web method, which is responsible for simulating the information needed by the client from the server database.

Here, in order for this ASP.net Web service to be invoked from the client in Ajax, the ScriptService attribute must be added to the front of the class declaration, as follows:

The following are the referenced contents: [ScriptService ()] public class LocationService:System.Web.Services.WebService {

Total 3 page: previous 1 [2] [3] Next page