Top 10 Controls in the ASP.NET Ajax Control Toolkit

Introduction

By default the .NET framework comes with basic Ajax controls like UpdatePanel, UpdateProgress, etc. If you want to make the existing asp.net applications to be ajaxified then the simple and efficient way would be to make use of the extender controls which form the AJAX control toolkit. This doesn't come by default but you can download the binary from here, add it to your Microsoft Visual Studio toolbox and utilize them in you ASP.NET applications. Only thing is it requires a ToolkitScriptManager (it is again a part of the toolkit) control on the web page which is also applicable for the basic Ajax controls.

The Ajax control kit which I am taking into consideration is targeted at ASP.NET framework 3.5 and not the 4.0.

AutoComplete Extender

This is my favorite extender control for an ASP.NET TextBox control. This ensures that based on the text typed by the user, the available list in our application is displayed in a drop list enabling the user to select. On selection the selected text will get populated in the textbox control. Nowadays in almost all the ASP.NET applications you would see this control being used. Fig 1.0 shows a sample screenshot.

AutoComplete Extender Control
Fig 1.0

It comes in very handy in a situation where the user has to enter a search text. It provides a way for the user to select a text displayed in the drop list or to enter a text which is altogether a new one. You shouldn't be confusing it with the dropdown list where you will not be able to type into the control.

The displayed items in the drop list should be provided through an exposed webmethod of a web service.

Animation Extender

If you really want to make a jazzy web site using ASP.NET Ajax then you won't want to forget to make use of the animation control. This simplifies a lot of time spent by the developers creating animations. It can act as an extender to any ASP.NET control.

You can bring in fading, moving, resizing, coloring and many more effects easily using the animation extender. These animations can be invoked when any of the below events of the target control gets fired off.

  1. OnLoad
  2. OnClick
  3. OnMouseOver
  4. OnMouseOut
  5. OnHoverOver
  6. OnHoverOut

Fig 2.0 shows a sample animation effect in a DIV tag when the target button control is clicked.

Animation Extender Control
Fig 2.0

Colorpicker Extender

This can act as an extender control for a textbox control. On the click of the textbox the color pallet is popped out in a window which the user can make use of in order to choose a color as shown in Fig 3.0.

Colorpicker Extender
Fig 3.0

Without using this extender control I don't think that creating such a control would be an easy task. This is my reasoning when I included this control in this top 10 list. I should also accept the fact that requirement to use this control in a asp.net application would be very less.



Top 10 Controls in the ASP.NET Ajax Control Toolkit

Modalpopup Extender

This is an extender for almost all ASP.NET server side container controls. This enables you to display the server controls as a modalpop in a smoother way. Though it allows you to write the server side code for the target control. Even though the client side code is faster and provides a smoother user experience you cannot avoid writing the server side code totally. This extender comes in handy in such situations.

This control makes the popup smoother, cleaner with a richer user experience and still you can provide the server side code. Fig 4.0 shows a sample screen shot.

[modal4.jpg]
Fig 4.0

CollapsiblePanel Extender

When your webpage is highly populated with controls and text contents, it would be wise to group them under different panels and use the collapsible panel extender on top of them. This will pave the way to increase the real estate on the page. This is an extender control for the ASP.NET panel as the name indicates. This is one of the very useful and most widely used extender control. Fig 5.0 shows a sample screen shot for the collapsible panel extender.

[collapsible5.jpg]
Fig 5.0

Dynamic Populate Extender

This is a very useful and powerful extender control. It provides a helping hand in changing the HTML content of a control using Ajax. The control whose HTML content has to be changed should be the TargetControlId and the content population will be triggered by the PopulateTriggerControlId. The HTML content should be provided through a web method of a web service or a page method. The method is allowed to take a context key and return an HTML string.

This extender is helpful when you are creating a web page whose content is so dynamic and displayed based on a particular context like a radio button selection. What you will be achieving by using this extender is that you don't have to load all the content initially and hide/show them based on the context. Instead it will pull the dynamic contents when required. This ultimately reduces the page weight, thereby increasing the page performance.

Slide Show Extender

The target control for this extender is an ASP.NET Image control. This immensely makes the slideshow creation task easier. All you need to do is provide the slide show images through a WebMethod, provide a next, previous, play/stop buttons, title label and that's it. Your image slide show component is ready. Pretty simple isn't it. Fig 6.0 shows a sample screen shot from the Ajax toolkit samples on Codeplex.com.

[winter6.jpg]
Fig 6.0

Tabs Control

This cannot be called an extender as such because Tabs is a standalone control all by itself. One of the biggest headaches I faced while developing an ASP.NET web page was creating tabs. You have to use JavaScript and HTML combinations. Tab is always preferred as it makes the page less clumsy, makes the navigation smoother and allows .NET developers to group the items logically. The Tabs control has a TabContainer which is the container and multiple TabPanels which are the child tabs.

Fig 7.0 shows a sample screen shot

[tabs7.jpg]
Fig 7.0

HTML Editor Control

Like the Tabs control, the HTML editor is also a standalone control all by itself. It provides rich HTML text editing features for the end users. Now your HTML editor implementation on your web page is just a drag and drop away.

It can be used in places like where an editor control is required for the users to submit comments or a HTML formatted content. Fig 8.0 shows a sample screen shot.

[submit8.jpg]
Fig 8.0

The ListSearch Extender

This can be an extender to either a list box control or a dropdown list control. This enables the users to search the items in the list box or a dropdown list just by typing the letters. Fig 9.0 shows a sample screenshot.

[xray9.jpg]
Fig 9.0

Conclusion

It's no doubt that the Ajax control toolkit extender make our ASP.NET web application richer and provides a good user experience. The CSS and animations for all the Ajax control toolkit extenders are totally customizable.

Happy reading!





About the Author

V.N.S Arun

I work for an MNC in Bangalore, India. I am fond of writing articles, posting answers in forums and submitting tips in dotnet. To contact me please feel free to make use of the "Send Email" option next to the display name.

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • Packaged application development teams frequently operate with limited testing environments due to time and labor constraints. By virtualizing the entire application stack, packaged application development teams can deliver business results faster, at higher quality, and with lower risk.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds