Overview HTML Map controls in ASP. NET

In this article, I will show you how to use the ASP. NET AJAX framework to expand the HTML Map control that can be clicked. After expansion, when we move the mouse over these hotspots, details about these hotspots are displayed. However, these details are obtained from remote services asynchronously through AJAX.

I. Introduction

First, we noticed that ASP. NET 2.0 also provides a server control ImageMap. This control is a server control that allows you to define HotSpot areas in images. You can click these hotspot areas to perform the PostBack operation or forward it to a URL address. In typical cases, this control is used to perform interactive operations on the partial range of an image. However, the disadvantage of this control is that when you click these hotspot areas for sending back, the entire web page will be refreshed.

In this article, we will. net ajax technology extends common HTML Map controls to achieve partial page updates only when you click on the hotspot area on them and display detailed information, so as to adapt to the Web 2.0 application development trend.

2. Create an AJAX example website

Start Visual Studio 2005, select "File> New website ...", Select the "ASP. net ajax-Enabled Web Site" template, name the project "Ajax_ImageMap", select C # As the built-in support language, and click OK.

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

 
 

  
  
<IMG SRC="images\solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 
  
  
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  
  
  
</MAP> 
 
 

In the above Code, we added an HTML element and an HTML element (Note: The VS2005 toolbar does not provide any ready-made controls and can only be manually added ). It defines the hotspot shapes and coordinates of each planet. In addition, each hotspot has a corresponding onmouseover and onmouseout JavaScript functions associated with it. When the mouse moves over these hotspots, the two functions are activated and the corresponding information is displayed. We will discuss these two functions in detail later.

3. Create an AJAX Service

Now, we need to create a new Web Service, which is responsible for data retrieval tasks related to hot click. In fact, the functions of the "AJAX service" are consistent with those of common Web services. The detailed differences between them are not described here. Now, you can right-click the project and add a Web service named LocationService. asmx.

Note: In this example, we only want to use this Web service to simulate a simple logic in the actual environment. Therefore, it contains only one Web method, which is used to simulate obtaining the information required by the client from the server database.

To enable the ASP. NET Web service to be called by the client in AJAX mode, you must add the ScriptService attribute to the front of the class declaration, as shown below:

 
 

  
  
[ScriptService ()]
  
  
Public class LocationService: System. Web. Services. WebService
  
  
{
  
  
Now, write our Web method:
  
  
[WebMethod]
  
  
[ScriptMethod (UseHttpGet=False,ResponseFormatResponseFormat=
ResponseFormat. Json)]
  
  
Public string GetAreaInfo (string area)
  
  
{
  
  
Return area;
  
  
}
 
 

We recommend that you use HttpPost (or HttpGet = false) to access the Web method for security purposes. Then, we configure the returned data format as JSON (the default method is JSON ).

To simplify the process, the GetAreaInfo method only returns the same value of the input parameter. However, in actual development, we should replace it here to retrieve data from the database.

So far, we have successfully created a Web service called in AJAX mode from the client.

However, we also need to configure the Server Control ScriptManager on the page as follows:

 
 

  
  
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
  
  
<services> 
  
  
<asp:servicereference path="~/LocationService.asmx" /> 
  
  
</services> 
  
  
</asp:ScriptManager> 
 
 

This document introduces the HTML Map control in ASP. NET.

1. ASP. NET TypeConverter
2. Analysis on TypeResolver of ASP. NET
3. Define JavaScriptConverter in ASP. NET
4. How to replace Sys. Services in ASP. NET
5. Use Profile Service of ASP. NET AJAX