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,   0 comments links to this post  

Verwendung von AJAX fähigen Controls in ASP.NET Forms

Die Verwendung von Formularen ist für viele Web Applikationen die wichtigste Funktionalität. Sie verlassen sich sehr darauf denn diese Funktionalität war bereits in den alten Browsern implementiert und auch die modernen unterstützen diese Funktionalität immer noch.

AJAX Funktionalitäten in Web Applikationen zu verwenden bedeutet nicht dass alles re-implementiert werden muss. Mit AJAX Funktionalitäten können diese Applikationen leicht um Controls mit asynchronen Hintergrundsfunktionalitäten erweitert werden ohne die aktuelle Applikationsstruktur aufzubrechen:

• eines Feldes können sofort auf dem Server überprüft werden ohne dass das ganze Formular neu geladen werden muss.
• Benutzer kann Hilfe zur Eingabe der richtigen Werte angeboten werden indem ein Feld um eine spezielle Lookup Funktionalität erweitert wird.
• Felder können in Abhängigkeit von bereits eingegebenen Werten angezeigt oder verborgen werden.
• Felder können in Abhängigkeit von bereits eingegebenen Werten vorbelegt werden.
• Die Optionen von SELECT Elementen können in Abhängigkeit von bereits eingegebenen Werten belegt werden.

Gemeinsam für diese Szenarien ist, dass eine reine clientseitige Implementierung oft schwer zu realisieren oder gar unmöglich ist, da die benötigten Daten oder Funktionalitäten auf dem Client nicht direkt zur Verfügung stehen. Auf dem Server ist im Gegensatz dazu die Information verfügbar und wird in den herkömmlichen normalen Web Forms verwendet um die Eingaben des Anwenders zu prüfen bevor die weitere Funktionalität ausgeführt wird.

Wenn man AJAX fähige Controls in eine existierenden Web Applikation integriert ist es möglich die Formulare entgegenkommender zu gestalten und durch eine schnellere Rückkopplung dem Benutzer zu helfen. Die Ausführung der Web Form kann so bleiben sie sie ist indem die Daten des Formulars an den Server übermittelt und dort verarbeitet wird.

Auf der Beispiel Website zu diesem Blog, siehe http://www.mathertel.de/AJAXEngine/Default.aspx, sind einige Beispiele enthalten die die Verwendung von AJAX in normalen Web Formularen veranschaulichen:

Validator Demo

http://http://www.mathertel.de/AJAXEngine/S03_AJAXControls/ValidatorDemo.aspx zeigt, wie man eine serverseitige DNS Überprüfung verwendet um zu prüfen ob der Servername einer to E-Mail Adresse auf dem Web bekannt ist ohne das Formular neu zu laden.

Bible Reader

http://www.mathertel.de/AJAXEngine/S03_AJAXControls/BiblePage.aspx hier wird u.a. gezeigt, wie man Optionen von HTML SELECT Elementen in Abhängigkeit von anderen Werten setzen kann ohne das Formular neu zu laden.

posted by MatHertel @ 10/03/2005,   0 comments links to this post