www.mathertel.deThe AJAX EngineSamples 4: Building data centric Ajax applications.SimpleReader.aspx
View Source

Simple form sample


Search show first record show previous record show next record show last record Clear

myForm





datasource: made visible for demonstration purpose.

Implementation details

This page contains the most important parts of building database and form based web application.

The menubar

By using the menubar you can search and navigate through a server side set of data. The menubar is implemented using the menubar behavior.

The "search" button in the menubar must be used first to build the dataset. This is done on the server by searching for all the records that match the criteria given by the current values in the form fields. You can write "UK" into the country field and press "search" to search all records that have "UK" in the country colum.

The database provider also offers the possibility to search using wildcards. If you enter "U%" into the country field you will find all the records with a country starting with "U".

After finding some data the dataset control automatically will fetch the first found record and will display in in the given form fields.

Using the arrow buttons you can step through the dataset. The clear button will clear the form without freeing the dataset but by loosing the current cursor position.

All the commands of the menubar are implemented using the OpenAjax events that are caught by the datasource control.

The form elements

The input fields that are used to display the values of the columns of the records are bound together by using a surrounding <diff> element and using the functionality of the DataForm JavaScript Behavior. It implements reading and writing values from/to the form fields and other "active" elements by using a XML data format. There are some benefits using this approach that I will describe later.

The datasource control

There is a separate page that shows the features of the datasource control.

The server interface

There server must provide a WebService with some methods defined in the "AJAXControls.ITableDataService" interface definition.


OpenAjax hub event log:


This page is part of the http://www.mathertel.de/ web site.