AJAX Samples Part 3: AJAX web controls

AJAX based Tree View Contol

See a sample AJAX based Tree View that is displaying a huge tree of US cities (about 10000) grouped by the state.

Don't worry about this size, because AJAX can help here a lot. Tree views can be used with a huge amount of data when loading new nodes only if they are opened by the user using AJAX calls.

All you need to do is to write a simple WebService ../S03_AJAXControls/TreeView.asmx (view source) that implements the only method we need: GetSubNodes.

The TreeView AJAX control is implemented in the files TreeView.ascx (view source) and TreeView.js (view source) by using a JavaScript Behavior.

Another TreeView Sample is availabe that is showing a English Bible at BibleTreeView.aspx.

AJAX based PopUp Control

The AJAX PopUp Control sample fetches additional information about the server on the internet a hyperlink points to by using a web service and some server side processing.

These details are then displayed in a html popup element when the mouse touches the hyperlink.

See a sample AJAX enabled PopUp that shows information about the server of a hyperlink.

AJAX based Bible Reader

Long, structured documents are faster by using a AJAX technique then by a classical navigation using hyperlinks or HTML form submits.

There are 4 cascated Select Controls that are populated by AJAX Actions to have only the valid options available and a text field to show the actual vers.

See a AJAX based Bible Reader (view source)displaying the English and German Bible text.

AJAX based LookUp Control

The sample LookUpDemo.aspx is using AJAX based LookUp, Select and UrlFrame Controls

The LookUp User-Control implements a substitution for a HTML select object by using a HTML input field with an additional drop-down list that lists possible values. This control proposes valid values in a drop down window. It autocompletes / autosuggests the next found valid values.

A WebService is used for retrieving the possible values from the server. LookUp.ascx (view source) / LookUp.js (view source)

The select user control is a WebControl (class inherited from HtmlControl) that extends the HTML select object to be used for data-exchanging. This control is used in the sample page OrteLookUp.aspx to select the url scheme for the external page. Select.cs (view source) / Select.js (view source)

The UrlFrame control renders an iframe HTML element and combines values of the properties on the page into the url of the iframe. UrlFrame.ascx (view source) / UrlFrame.js (view source)

Cascading Select fields with Ajax calls

The Car Selectors with AJAX page contains is a sample for showing how cascading select fields can be realized by using an Ajax call to the server.

Every time the current value of the first select element is changed, the list of options for the second select element are fetched from the server and made available. A more complex szenario for cascading select boxes can be found in the Ajax based Bible Reader sample.

See CarPage.aspx (view source). The web service CarData.asmx (view source) implements the lookup method.

AJAX based Validator Control

The Forms Validator (view source) sample uses a AJAX based asynchronous verification of the values of fields in normal Web Form applications.

Here you can see how to use a server-side DNS lookup to check if the host part of an email address is known on the web without reloading the whole form.

../S03_AJAXControls/ValidatorDemo.asmx (view source) is the WebService that implements the DNS verification.

The ConnectionsTest (view source) sample is using page level properties to link multiple independent controls together without having a strong dependency.

DataInput.ascx (view source) / DataInput.js (view source)
This is a HTML input element that is extended by a JavaScript Behaviour to raises a change of its value to the property that is specified by the "name" attribute. This control also registers itself as a consumer to display the actual value when changed by another control.

HSlider.ascx (view source) / HSlider.js (view source)
This control implements is a horizontal moveable rectangle that acts as a slider. It can be used to change a property value that is specified by the "name" attribute in the range from 0 to 100. This control also registers itself as a consumer to display the actual value when changed by another control.

VBarChart.ascx (view source) / VBarChart.js (view source)
This control implements a simple bar chart to display multiple values. The names of the properties are displayed below the bars. The names of the values can be specified by the "properties" attribute by using a semicolon separated list of names. The max displayable number can be specified by the "maxvalue" attribute. This value is used as a scale factor for the display.

OpenAjaxEventLog.ascx (view source)
This is a control that captures and logs all property changes and display them. This control this is useful for looking what data is exchanged behind the scenes.
This control has no behaviour include file and has the JavaScript incuded in the *.ascx file.