Use the ASP. NET Ajax framework to expand the HTML map control

ArticleDirectory

• Introduction
• Create an Ajax example website
• Create an Ajax Service
• Create Client Customization class
• Summary

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.

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, to adapt to Web 2.0 applicationsProgramDevelopment trend.

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 htmlCodePart:

    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 ();"> <AreaShape= "Circle"Coords= "90,58, 3"
 

 
Onmouseover= "Javascript: getareainfo (event, 'merglobe ');"Onmouseout= "Javascript: hidepopup ();"> </Map> </IMG>
 

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.

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 classLocationservice: System. Web. Services.WebService
 

Now, write our web method:

[Webmethod] [scriptmethod (usehttpget =False, Responseformat = responseformat. JSON)]Public StringGetareainfo (StringArea ){ReturnArea ;}
 

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:ScriptmanagerID= "Scriptmanager1"Runat= "Server"> <Services> <ASP:ServicereferencePath= "~ /Locationservice. asmx "/> </Services> </ASP:Scriptmanager>
 

Here, we only add a service reference under the node, but what does it do? From the generated HTML source code analysis, the above configuration will generate the following content:

<ScriptSRC= "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 can asynchronously call the Web service on the server from the client.

More interestingly, if you simply copy the path shown above to your browser, you will see a Javascript file generated by the Ajax environment at runtime-this file makes the script service call available. We will not discuss proxy classes in depth.

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

Create Client Customization class

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

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

Right-click the project and add a new Javascript file named Imagemap. In this file, we will define a new namespace named myservices. This namespace will contain the client class we want to develop. As follows:

Type. registernamespace ("Myservices");
 

Next, we will define the constructor of the client class to be created:

 
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 just a common JavaScript function. The constructor has two parameters: uielement and uibody.

Both parameters are 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. In typical cases, we 'd better declare all private members in the constructor.

Next, we will use the prototype design mode to compile the member functions and attributes in this class:

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 is very similar to that of. Net in various languages. The following member functions are our focus and are responsible for calling remote web services:

Showpopupinfo: function (Event, Areaname) {myservices. locationservice. getareainfo (areaname, function. createdelegate (This,This. Oncompleted ),This. Onerror,// Call back function responsible for error handlingThis. Ontimeout );// Call back function responsible for timeout ProcessingThis. _ Xaxis =Event. Clientx;This. _ Yaxis =Event. Clienty ;}
 

The above code shows a typical method to call web services from a client:

• It is almost as convenient as calling a common local method.
• The function. createdelegate function is an extremely important global function in ASP. NET Ajax client development. One of the original purposes of creating this function is to solve the problem of this keyword. In an event processor triggered by a DOM element, this keyword always references this Dom element rather than the class itself. However, the reason for using this function is to make the call back function when the Ajax environment is successfully called in the same class instance as the web service. This is important when you need to reference the properties and methods of the client class. In short, using this function ensures that the attributes and methods of client classes that access the Web service are secure and accurate. Otherwise, the client-class instance for asynchronous calling will be null, because the Web service response is executed in another different context-this context is no longer equivalent to the context that sends an asynchronous web call request.
• Interestingly, the getareainfo method here is not the one in the Web service we created earlier, instead, it 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 above showpopupinfo function, use the input parameters of the event to set the values of the two private variables xaxis and yaxis. The purpose is to display the pop-up window where the user clicks as close as possible.

 

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

 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 in the pop-up window and ensure that this window is displayed as needed. At the end of the client class creation, we must also tell the Ajax framework to register it on the client so that it can be accessed from the client. 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 during page loading. To do this, we need to program in the pageload function:

 
VaR location =Null; Function pageload (sender, argS) {location =NewMyservices. Location ("Modal","Modalbody"); Location. hidepopupinfo ();}
 

The above Code creates a new instance of the myservices. Location class. Call one of the member functions of the client class to hide the pop-up window on 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 clients and user-defined JavaScript code have been successfully loaded. Therefore, we can securely access any user or system-defined JavaScript code at this moment.

Summary

In this article, I show you how to expand the HTML map control by creating an Ajax service and creating a custom client class. In the extended control, when you click an area in the image, we can use the new Ajax method to provide detailed information without refreshing the entire web page. Although this map control is rarely applied in most web applications (which may be omitted in the vs2005 toolbar), if you develop a large number of Web applications related to image, image, and map operations, the map control after Ajax transformation in this article will surely make your web applications more colorful.

Author:
Oec2003 (water cup)
Source:
Http://oec2003.cnblogs.com/

The copyright of this article is shared by the author and the blog Park. You are welcome to repost this article. However, you must retain this statement without the author's consent and provide a clear link to the original article on the article page. Otherwise, you will be held legally liable.