Ajax Aspekte: CustomValidation AJAX Control Sample

Die ASP.NET Web Forms bieten im Standard Lieferumfang bereits eine Sammlung von Validierungs-Controls zur Überprüfung der Werte in den Feldern eines Formulars. Dabei werden 2 Vorgehensweisen unterstützt:

• Wenn die Daten eines Formulars an den Server zurückgesendet werden wird eine bestimmte serverseitige Funktionalität des Controls oder der Seite aufgerufen.
• Wenn der Benutzer den Wert eines Feldes ändert und das Feld verlässt wird eine bestimmte clientseitige Funktion aufgerufen.

Mit der Hilfe von AJAX und der Möglichkeit von asynchronen Aufrufen auf den Server im Hintergrund kann ohne große Anstrengung eine dritte Art der Validierung implementiert werden bei der die großen Möglichkeiten einer serverseitigen Überprüfung mit den Vorteilen einer guten Anwendererfahrung durch die schnelle und unmittelbare Überprüfung auf dem Client kombiniert werden.

Wenn der Benutzer den Wert eines Feldes ändert und das Feld verlässt wird ein bestimmter WebService aufgerufen, der den Wert überprüft.

Die Implementierung ist offensichtlich.

1. Man benutzt den vorhandenen CustomValidator um eine clientseitige Funktion anzubinden:

<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. Die im Attribut ClientValidationFunction spezifizierte clientseitige Überprüfung die von dem Control verwendet wird lässt das arguments.isvalid Flag auf true gesetzt (default) um alle aktuell angezeigten Fehler zu löschen und startet dasnn eine AJAX Action mit dem source Object als Parameter.

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

3. Die AJAX Action wird deklariert. Sie basiert auf einigen Implementierungsdetails der clientseitigen Fehleranzeige:

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

Diese Deklaration beinhaltet keine für die Überprüfung spezifischen Code bis auf den Verweis auf den WebService um eine E-Mail Adresse zu verifizieren so dass diese Deklaration auch für andere Zwecke wieder verwendet werden kann.

Die Integration der AJAX Action ist ein wenig trickreich, denn die eingebaute Validierung in den ASP.NET Validierungen erwarten keine asynchrone Bearbeitungen sondern wollen eine unmittelbare Entscheidung und die Validierungs-Übersicht aktualisiert sich leider nicht immer korrekt.

Der WebService selbst kann nun tun, was immer auch zu tun ist. In meinem Beispiel benutze ich die Dns Klasse um den Domänennamen aufzufinden und um damit zu prüfen ob sie überhaupt deklariert ist. Das kann nicht auf dem Client gemacht werden und ist ein Beispiel für die starken Möglichkeiten, die man auf dem Server aber nicht auf dem Client zur Verfügung hat.

Das Beispiel findet man in: http://www.mathertel.de/AjaxEngine/S03_AJAXControls/ValidatorDemo.aspx

posted by MatHertel @ 10/13/2005,