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 4 of 8

by Bilal Haidar
Feedback

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

Article Contents:

Configuring the ASPX page with the AJAX Service

Up to this point, we have created the Web service that we will use later on to show detailed information on the clickable areas on the image map we are developing. However, for the client side script to be able to make successful calls for the Web service, we need to add a new ScriptManager on the page and add the Web service in the Service Reference section.

The code below shows how the ScriptManager is configured by a Service Reference entry:

Listing 4

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

All that is need to do to enable script-service calls in an asynchronous fashion, is simply add a new service reference entry into the ScriptManager control as shown in the code above.

What does the above Service Reference entry do?

The configuration above would add something like this to the rendered page:

Listing 5

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

As you can see a new script entry has been added to the rendered page. The script tag refers to a JavaScript file named LocationService.asmx/jsdebug. This is called the Web Service Proxy class. The way AJAX works is by creating client-side proxy classes so that client-side functions can call the server-side Web service by utilizing this proxy class.

If you simply copy the path shown above into the browser, you would see a JavaScript file that is generated at run time by the AJAX environment to make script-service calls available. We will not delve into more details of explaining the proxy class since this is out of the scope of this article, but checking the above articles that were mentioned in a previous section would make more sense to you about what we are discussing here.

Up to this point, the page is ready to make script-service calls successfully!

« (Page 3)

View Entire Article

(Page 5) »

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.