Extending the ImageMap HTML Control with AJAX 1.0 Extensions: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Extending the ImageMap HTML Control with AJAX 1.0 Extensions

page 3 of 8

by Bilal Haidar
Feedback

Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 37554/ 63

Article Contents:

Creating an AJAX Service

Logically speaking, we will need to create a new Web service that will handle retrieving data related to the clickable hot spots. AJAX Services are no different from normal ASP.NET Web services. To get a better understanding of how to create and manipulate AJAX Services, make sure you go through the links in the References section at the end of this article.

Let us create this new Web service by following the Figure 2

Figure 2: Creating a Web service

The above Web service will contain a single web method that will get the information from the data store you have.

To enable your ASP.NET Web service to be callable from the client side in an asynchronous style, i.e. converting it to an AJAX Service, you will need to add the ScriptService attribute to the class declaration as follows:

Listing 2

[ScriptService()]
public class LocationService : System.Web.Services.WebService
{

The ScriptService attribute is the only configuration you would need to add so that your Web service is script-accessible.

Now let us add a Web method that will be called from the client side:

Listing 3

[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string GetAreaInfo(string area)
{
  return area;
}

There is nothing different when declaring Web methods. You would add the WebMethod attribute as you would do with any other normal ASP.NET Web service. If you leave your Web service like that, it will work like a charm! However, you have an optional attribute you can add which is the ScriptMethod attribute. You can configure whether the Web method will be accessed using the HttpGet or HttpPost verb. Also, you can configure the format in which the data will be returned, whether in XML or JSON, by default it is JSON.

By default every Web method you create that is AJAX enabled, uses the HttpPost and JSON for the UseHttpGet and ResponseFormat properties of the ScriptMethod attribute.

The method we have defined is the GetAreaInfo method that takes as input a single parameter of type string. To make life easy, the method will simply return the same value of the input parameter, in your case you would need to do a database call to retrieve some data and send them back to the calling side.

That is everything you need to do concerning the new Web service. In a later section you will see how to configure the page that AJAX-enabled to make calls to this Web service. We have just created a new AJAX Service!!

« (Page 2)

View Entire Article

(Page 4) »

AJAX Resource Center

User Comments

Title: xdxd
Name: dxdx
Date: 2012-07-08 8:00:06 PM
Comment:
xdxdxd

Title: feedback
Name: fegef
Date: 2010-01-11 9:06:18 AM
Comment:
not working, check it properly and in all browsers

Title: Thanks a Lot Dude
Name: Johns
Date: 2009-01-25 3:46:50 AM
Comment:
This is what i looking for....greate example man.....thank you very much.....

Title: Just what I was looking for, but having some issues
Name: IG
Date: 2008-12-10 5:24:44 AM
Comment:
This is a great example, I am however getting an error:

Microsoft JScript runtime error: 'window.location.hash' is null or not an object.

I am not too clued up with Java, so any guydance would be appreciated.

Thanks,

Ian

Title: Thanks for the example, works great!
Name: KC
Date: 2008-04-16 9:10:25 AM
Comment:
Thanks for the example. Been looking for something just like this and has really helped! Never thought of using a service.

One comment: Currently, the code only seems to work in IE but a quick change will quickly resolve this...

Might I suggest that you change the very last part of your javascript file to look something like this:

// Register the class
MyServices.Location.registerClass("MyServices.Location");

var myLocation = "blah";
function pageLoad(sender, args) {
// Create a new instance of the class
myLocation = new MyServices.Location("modal", "modalBody", "updateProgress");

// Hide the popup div
myLocation.HidePopupInfo();
}

// Method called by the page controls
// to update the UI with the information
// from the ajax service
function GetAreaInfo(event, args) {
myLocation.ShowPopupinfo(event, args);
}

function HidePopup() {
// Hide the popup div
myLocation.HidePopupInfo();
}

If you notice, I changed "var Location = null;" to "var myLocation = null;". For some reason, the former would cause all non-IE browsers to redirect to whatever location was equal to (even when it was not null.)

Hope this helps and again, great example!

KC

Title: Why use web services?
Name: BWG
Date: 2007-08-29 10:30:54 AM
Comment:
Interesting, but why is it necessary to use web services to achieve this?

Title: This example is working ...
Name: WebDev
Date: 2007-07-27 6:12:02 AM
Comment:
... only in IE.

Title: Not working Example
Name: WebDev
Date: 2007-07-27 6:02:09 AM
Comment:
I've been redirected from Default.aspx to null. Code doesn't work.