Donnerstag, Oktober 13, 2005

CustomValidation AJAX Control Sample

The ASP.NET Web Forms offer a collection of validation controls out of the box to check the values in the fields of a form. The validation process takes place in 2 situations:

  • When the form data is sent back to the server a specific server-side functionality of the control or the page is called.
  • When the user changes the value of a field and leaves the field a specific client-side function is called.

Now, with the help of AJAX and the possibility of asynchronous calls to the server in the background a third kind of validation can be implemented without great effort and combines the power of the server side processing with the good user experience of the immediate verification in the client.

When the user changes the value of a field and leaves the field a specific WebService can check the value.

The implementation is obvious.

1. We use the built-in CustomValidator control to attach a client side function:

<input autocomplete="off" id="EMAIL_IN" runat="server" name="EMAIL" />
<asp:CustomValidator ID="CustomValidator1" runat="server"
  ControlToValidate="EMAIL_IN"
  ErrorMessage="Please enter a valid e-mail address." 
  ClientValidationFunction="validateEMail">*</asp:CustomValidator>

2. The client-side validation function that is used by the control as specified by the ClientValidationFunction attribute always leaves the arguments.isvalid flag set on true (default) to hide any shown error and then start the Ajax action with the source object as parameter.

function validateEMail(source, arguments) {
  ajax.Start(validateAction, source);
} // validateEMail

3. The AJAX action needs to be declared and is based on some implementation details of the client-side validation mechanism:

var validateAction = {
  delay: 0,
  prepare: function (source) {
    // from the Validator Common JavaScript
    return(ValidatorGetValue(source.controltovalidate));
  },
  call: proxies.ValidatorDemo.ValidateEMail,

  finish: function (val, source) {
    // from the Validator Common JavaScript
    source.isvalid = val;
    if (! val)
      Page_IsValid = false;
    ValidatorUpdateDisplay(source);
    ValidationSummaryOnSubmit(null);
    },
  onException: proxies.alertException
} // validateAction

There is nothing data-verification specific here except the link to the WebService we use to validate e-mail addresses so the declaration can be reused for different purpose.

The integration of the Ajax action is a little bit tricky as you can see because the validation process of the built-in validation controls of ASP.NET do not expect any asynchronous processing but wants an immediate decision to be taken and the Validation Summary sometimes does not update correctly.

The WebService itself can do what ever it wants to do. In my sample I use the Dns class to resolve the domain name and check if it exists. That cannot be done by the client and is a sample for the power you have on the server available, but not on the client on its own.

The sample can be found at http://www.mathertel.de/AjaxEngine/S03_AJAXControls/ValidatorDemo.aspx

Montag, Oktober 03, 2005

Using AJAX enabled controls in ASP.NET Forms

The use of web forms is for many web applications the most important functionality. They rely very much on it because it was implemented by all old browsers they also the modern ones still provide this functionality.

Using AJAX functionalities in your web applications doesn't mean that everything needs to be re-implemented. With the AJAX functionality these applications can easily be extended with controls using asynchronous functionalities in the background without breaking up the existing applications structure:

  • Validate values immediately on the server after the user exits the field without reloading the form.
  • Help the user to find the right value by extending a field with a specific lookup function.
  • Show or hide a field, depending of already entered values.
  • Fill fields in the form, depending of already entered values.
  • Fill the OPTIONS of HTML SELECT elements depending of already entered values.

Common to these scenarios is that a pure client-side implementation is often hard to do or impossible because some data is required and this data is not available on the client directly. On the server in contrary, the information is available and is in classical Web Forms used to validate the input of the user before accepting and executing the functionality.

If you integrate AJAX controls into your existing web applications it is possible to make your forms more responsive and give faster feedback and help to the user. The processing of the Web Form can stay as it is by submitting the data of the form to the server and reloading or redirecting the page after the server side processing is done.

On the sample website to this Blog at http://www.mathertel.de/AjaxEngine/Default.aspx you can find some samples that show the usage of AJAX based functionality in regular Web Form applications:

Validator Demo

http://www.mathertel.de/AJAXEngine/S03_AJAXControls/ValidatorDemo.aspx shows 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.

Bible Reader

http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx here you can see beside other things how to populate OPTIONS of a HTML SELECT element dependent of other values without reloading the whole form.