AJAX Client Side Programming
page 3 of 8
by Brian Mains
Average Rating: 
Views (Total / Last 10 Days): 39314/ 94

Helper Methods

The ASP.NET AJAX client framework contains helpful shortcut methods.  Some of the methods are the $addHandler, $removeHandler, $clearHandlers, $get, and $find.  Each one of these performs some action.


The add handler method registers an event handler for a DOM element's event.  For instance, a button is either a hyperlink "a" tag, or an "input" tag with a type of "button."  The $addHandler registers an event handler for that DOM event, such as the JavaScript click event that fires when you click it.  To create a delegate and attach to the event, use the following approach:

Listing 5

var clickHandler = Function.createDelegate(this, this.clickCallback);
$addHandler(button, "click", this.clickHandler);

In the above method, clickCallback is the name of a method; now _clickHandler contains a reference to the clickCallback method.  In the second line, get_element() returns a reference to a DOM element.  The second parameter defines the method to attach to (leaving out the "on" prefix), and the third parameter specifies the delegate to use so that when the DOM element is clicked, the delegate method is called, which points to clickCallback.  Now the _clickHandler is linked to clickCallback method, which fires when the click occurs.


This method is a helper method to register event handlers in bulk.  By providing a key/value pairing of event name/handler, this registers for many events at once.

Listing 6

//textbox is DOM element
$addHandlers(textbox, {"keyup":keyupHandler, "keydown":keydownHandler});


This method clears all of the handlers that have been established for a DOM element. It's a quick way to get rid of registered handlers quickly:

Listing 7

//textbox is DOM element


This method removes a specific handler for a DOM element.  It allows you to specify the event and delegate to remove.

Listing 8

//textbox is DOM element
$removeHandler(textbox, "click", clickHandler);


The get method is a shortcut for document.getElementById.  It allows you to reference a Dom element through its ID.  What you have to remember is that when the page runs, this often cannot be referenced by a server control's ID directly, but its client ID.  The approach you often see is to embed the client ID through the following approach:

Listing 9

var textbox = $get("txt1");


When a class is registered through the registerClass method, this creates a hierarchy that sits between the DOM element and any server-side components being registered as well (though classes don't all have server-side components, features like AJAX controls and control extenders often do).  This method returns a reference to the class JavaScript component.

Listing 10

Var element = $find('<%= MyControl.ClientID %>');
element.set_Text("Some Value");

This allows you to access the class object and use the helpful methods like get_Text and set_Text (as described next).

View Entire Article

User Comments

Title: Good Article   
Name: Amol
Date: 2010-09-17 2:48:44 AM
Very good article
Title: Informative   
Name: PickaTutorial.com
Date: 2010-08-07 2:44:15 AM
A good informative resource.
Title: good   
Name: good
Date: 2010-07-23 2:53:53 AM
Title: Good   
Name: Ananth
Date: 2009-04-15 12:51:48 PM
Title: Parameters to be passed webserivices (reply)   
Name: Brian Mains
Date: 2009-02-09 8:59:45 AM

You could pass the values as straight parameters; I preferrably like to have the web service use a custom object that has those parameters. The reason is that it makes maintenance easier. If you need 21 parameters later, you have to change the web service, and anything that connects to this web service.

This way, you simply add a parameter to the class and make use of it in the web service, less coding work to do this way.

The proxy generator will also generate the class that's accepted by the parameter, as long as it's simple enough (not deeply nested properties), and you can instantiate this and pass it to the web service call.
Title: Parameters to be passed webserivices.   
Name: Rupesh Kumar Tiwari
Date: 2009-02-09 5:37:28 AM
I have to pass 20 parameters to a webmethod from the clientside.so, is it advisable to make a webmethod that will take 20 parameters or else i have to send one array of parameters to reduce the confusion. Any other suggesion do you have. then kindly tell me. Any quick response is appreciable.

Title: Thanks a lot for the info   
Name: The Black Knight
Date: 2008-11-19 6:24:52 PM
Excellent info
Title: Nice Article   
Name: ---
Date: 2008-06-21 5:40:01 AM
really nice article, it is good for the beginners.
good job :)
Title: dragpanel extender in ajax controls   
Name: lalitha
Date: 2008-06-12 5:46:21 PM
its not working as i had written as it was mentioned here in the tutorial plse give a brief coding about that control
Title: expect more   
Name: sivaram
Date: 2008-05-02 4:50:01 AM
ok .i expected more.If possible plz explain with the examples
Title: nice but shud little brief   
Name: snehal
Date: 2008-04-30 3:20:58 PM
nice article but give more details on ajax its merits... funnalities future implementation ....etc thnx
Title: thanks   
Name: suhas kudekar
Date: 2008-04-23 9:02:58 AM
its very new concept 4 me. thanks
Title: very good   
Name: panakj lahjoti
Date: 2008-04-21 7:34:42 AM
i found this aticle very useful for the newbies
Title: Very helpful   
Name: Raviraj
Date: 2008-04-20 1:28:30 PM
thanks it is very helpful to me

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-12-05 11:56:58 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search