Donnerstag, Juli 28, 2005

Sample for AJAX Forms

This sample implements the processing of data of a form using the AJAX engine and the AJAX Forms.

AJAX also brings some advantages to this kind of application on the validation and calculation of formular data. Instead of "sending" the data and retrieving new to be displayed HTML an asynchronous communication only transfers the data part of the form using XML documents.

The supplementing functions necessary for the handling of AJAX Forms it is necessary to include the ajaxforms.js scripts in the HEADER of the page.

<script type="text/javascript" src="ajaxForms.js"></script>

The connection to the corresponding WebService is done by using the proxy generator:

<script type="text/javascript" src="GetJavaScriptProxy.aspx?service=_Kreditcalc.asmx"></script>

In this example the validation of the input values and the calculation of the new values are together implemented in the same method. The communication of the values between the client and the server uses the XML format defined by ajaxForms.js module. The two functions ajaxForms.getData and ajaxForms.setData that implement the transfer of the data from the XML format to the HTML of objects therefore can be used directly in the setup of the actions.


The function ajaxForms.processException can be used to handle and display the exceptions that occur within validating the passed data.

If a wrong or missing value is detected inside the passed form data the server should throw an ArgumentException using the name of the element as the name of the wrong parameter.

This name is then passed to the client using an exception return package.

ProcessException then recognizes that an ArgumentException was thrown and shows the error text beside the input field. To show these texts, a SPAN element is used for each field inside the form:

<span class="AJAXFORMEXCEPTION" name="LOAN"></span>

The Form

The layout of the form and the data together with the format of the XML document is specified by the HTML code of the page. The DIV element with id frm (having a green border) is used as a container for all fields of the form. Inside this object you can find the INPUT elements like:

<input id="loan" name="LOAN" value="100000">
<input name="MONTHLYREPAY" disabled="disabled">

The Actions

The first functionality on the server implements the calculation a simple credit case. On the left side of the form some values like the loan amount and the rates can be modified by the user. These values are used to calculate the monthly payment, the duration of the credit and the totals of payment that are displayed on the right side of the form.

For that purpose all the data of the form is send over the network to the server as a XML document as well as the result of the calculation.

The first action uses the functions getData und setData from ajaxForms.js and needs no further programming.

// declare an AJAX action
var action1 = {
  delay: 200,
  prepare: ajaxForms.getData,
  call: proxies.KreditCalc.Calc,
  finish: ajaxForms.setData,
  onException: ajaxForms.processException
} // action1

The second implemented method on the server gets the same XML document information as the first method but returns a XML Document containing the monthly balance of the credit.

The code on the client is the responsible for displaying the chart by using the special local implemented method displayAmortization. Here the XML document passed back from the server is transformed into a HTML document fragment by using a XSLT transformation on the client. This transformation uses a lot of small blue and red images that are sized and positioned as needed to make the chart look like it should.

Because the transformation is done on the client only about 23% of the necessary HTML code is transferred over the network. The XSTL is retrieved only once and is cached on the client.

var action2 = {
  name: "Amortization",
  delay: 800,
  prepare: ajaxForms.getData,
  call: proxies.KreditCalc.Amortization,
  finish: displayAmortization,
  onException: proxies.alertException
} // action2

Starting the actions

To start the asynchronous actions again the onkey event is used. In this sample 2 actions are started by one event. Because both actions have a delay time specified they will stay in the queue and will be removed abd started again when another key is pressed before the delay time is over.

The second parameter on starting the actions is used to reference the AJAX form.

onkeyup="ajax.Start(action1, 'frm');ajax.Start(action2, 'frm')"


Gopinath V Varadharajan hat gesagt…

IS there a way to upload files in this way using AJAX Forms ?



MatHertel hat gesagt…

No, i don't see this. I do not know any "legal" way to read local files except the <input type=file> or special, to be installed locally browser extensions.
I think that upload and download should be implemented better and more userfriendly by the teams for the browsers.