When using ASP.NET on the web server some things become easier because it brings a built-in framework for reusing HTML code fragments, building controls and components and managing some useful things around it. I will use some features of the page model, ASP.Net user controls and Web Controls here to make it easy building AJAX Controls.
There are good articles on the web that explain how to build this kind of controls and there are a lot of samples too. But there are some tricky things around too to reuse this for building AJAX controls.
The very useful functionality of ASP.NET User Controls is the possibility of writing often needed HTML code only once in an *.ascx file and reuse it as often as needed by writing only referencing tags into the ASP.NET pages.
Some things are hard to be done when using User Controls. Especially when the Control is only a framing element for more inner HTML objects User Controls cannot be used. Here some Web Controls, that have to be implemented as special classes, are easier to be implemented so you can find both technologies in the samples.
No Form element
AJAX controls are built for NOT posting back, submitting the changes the user did to the server by using the HTML form element and reloading the whole page. That’s why we want AJAX in our web applications. In contrary, ASP.NET controls are made for exact this kind of client-server interaction and therefore are most of the time placed inside a HTML form element. Because we do not use autopostback functionalities nor do we directly implement some script to call form.submit() we do not get problems with a possible existing HTML form element.
If you plan to extend your existing ASP.NET Web Forms with AJAX Controls – which is one of the scenarios I want to support – you will need this HTML form element. If you build new web pages without using the server side functionality of ASP.NET web forms you can eliminate this HTML form element completely.
The Return key
One thing will disturb users when a form element is present: pressing the
Pressing return on input-fields outside a HTML form element normally has no visible effect because the return character will not be added to the value of the HTML input element.
There is a simple trick built into the jcl.js file that can help you to get around this situation. By capturing all keypress events and test if return was pressed, it is possible to cancel the keypress event early and prevent the automatic call of the submit functionality.
Registering Script includes
With "IsClientScriptBlockRegistered" it is possible to check if a include file is already registered.
When having a HTML form element on the page the form element will automatically include all the submitted scripts before all other contained HTML content.
If you want to use ASP.NET version 1.1 you need only include a HTML form element before all other HTML code to get the includes into the page. This doesn't mean that the AJAX Controls must be inside the form element, they also may be positioned after an empty form element.
Registering Script includes without a form element
When using ASP.NET 2.0 you can use a little trick to get the HTML script tags for the include files added to the end of the HTML head element that should be marked with "runat=server".
Using this trick, it makes no difference whether a HTML form element exists in the page or not.
Samples and Downloads
There are already some samples for AJAX controls posted on the Samples Web Site. I have added a portal page for the project. Just open the [Samples] tab and look into the third part of the samples collections.
You can also download the whole project - as it is. It’s made for ASP.NET 2.0 Beta 2 build but it also works with the August drop.