AJAX Client Side Programming
page 4 of 8
by Brian Mains
Feedback
Average Rating: 
Views (Total / Last 10 Days): 39758/ 121

ASP.NET Client Framework Development

ASP.NET AJAX and the AJAX Control Toolkit make use of client-side code to improve the quality of ASP.NET controls.  With ASP.NET AJAX, the developer can create a piece of code that classes, etc. that extend the application's client-side library and add additional functionality and promote reuse.  In the case of control extenders, this piece of code sits between the extender DOM element and the server-side extender class.  I'll talk more about this at the end of the section. 

The ASP.NET AJAX framework doesn't add any new syntaxes or flavors to the JavaScript language, but uses the existing notations in JavaScript and extends upon them.  Some of the benefits they've added are client-side type checking, class, interface, and enumeration declarations, inheritance, and many other features.  As in the .NET Framework, ASP.NET AJAX client components use namespaces as well.  To create a namespace, use the following designation:

Listing 11

Type.registerNamespace("Nucleo");

This registers a namespace, which allows a creation of a fully-qualified name, shown in the next example.  One of the other major mechanisms is the creation and registration of a class, which has a specific layout.  Below is an example:

Listing 12

Nucleo.MyClass = function()
{
  this._text = null;
}

So far, the above example defines the constructor.  The constructor takes a reference to the underlying DOM element that the class represents (such as in developing a custom control extender, which is a separate topic).  However, the constructor can have whatever parameters it wants.  Note that it's recommended to place any private variables in the constructor, and not in the prototype, for a performance gain.  In addition, any delegates require the use of a private variable, described later.

Listing 13

Nucleo.MyClass.prototype = 
{
      get_Text : function()
      {
            return this._text;
      },
 
      set_Text : function(value)
      {
            this._text = value;
      },
 
      clearText : function()
      {
            this._text = null;
      }
}
Nucleo.MyClass.registerClass("Nucleo.MyClass", null, Nucleo.MyInterface);

Note that properties, methods, and constructors use functions, which is a mechanism defined already by the JavaScript framework; the ASP.NET AJAX Client Library doesn't change the syntax of JavaScript, but adds objects you can use to increase what you can do with your client components.

Note the registerClass statement; the second parameter defines the base class to inherit from (null in this case means there isn't any base class).  Some of the options are: Sys.UI.Component, Sys.UI.Control, Sys.UI.Behavior, and AjaxControlToolkit.BehaviorBase.  This list isn't complete, and it's possible to inherit from your own custom classes as well.

ASP.NET AJAX also makes use of enumerations, which are very helpful in defining a finite set of values.  Check out the following example:

Listing 14

Type.registerNamespace("Nucleo");
//Empty constructor; not needed
Nucleo.MyEnumeration = function() { }
Nucleo.MyEnumeration.prototype =
{
      Yes : 1,
      No : 2,
      MaybeSo : 4
}
Nucleo.MyEnumeration.registerEnum("Nucleo.MyEnumeration", false);

Note the true value for the second parameter of registerEnum; this specifies whether the enumeration defines the flags attribute, meaning that it can use a bitwise operator to reference multiple enumerations for the same variable, similar to what you can do in .NET.

So what is the purpose of all of this?  Well, in the case of control extenders and AJAX controls, the JavaScript creates a class that sits on top of the underlying DOM element.  A text box client control is extended through a behavior that attaches to the DOM element and its events, but exposes its own properties and methods to perform any necessary actions it needs to.  In addition, the server-side piece of the control or extender uses this JavaScript class to interact with it initially.

In the case of control extenders, it works well because the server-side piece uses base classes that output the core assignments of properties and auto-generates other useful code that the application needs. The base class hides some of the details so you don't have to worry about it, while you can define some of the functionality in the server-side.  I'll be writing articles on server-side extenders later.


View Entire Article

User Comments

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

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
Comment:
Hi,
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.

Thanks,
Title: Thanks a lot for the info   
Name: The Black Knight
Date: 2008-11-19 6:24:52 PM
Comment:
Excellent info
Title: Nice Article   
Name: ---
Date: 2008-06-21 5:40:01 AM
Comment:
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
Comment:
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
Comment:
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
Comment:
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
Comment:
its very new concept 4 me. thanks
Title: very good   
Name: panakj lahjoti
Date: 2008-04-21 7:34:42 AM
Comment:
hai
i found this aticle very useful for the newbies
Title: Very helpful   
Name: Raviraj
Date: 2008-04-20 1:28:30 PM
Comment:
thanks it is very helpful to me






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


©Copyright 1998-2020 ASPAlliance.com  |  Page Processed at 2020-07-08 7:14:12 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search