In meinem letzten Artikel UserControls mit Properties/Konstruktoren dynamisch laden (Server und Client) habe ich dargestellt, mit welch relativ geringem Aufwand man komplexe ASP.NET-Steuerelemente auch per Javascript über einen WebService in eine Seite injizieren kann. Es geht aber noch besser...

Das Update

Mein Javascript-Code ist, für die mehrmalige Verwendung innerhalb eines Projekts, schon ein ziemlicher Brocken (20-30 Zeilen, ja nachdem wie leserlich man es haben möchte) und so drängt sich ein Refactoring quasi schon auf. Grund dafür ist natürlich der recht umfangreiche AJAX-Aufruf mittels jQuery.

Zudem fiel mir auf, dass ich einen inhaltlichen Fehler begangen habe. In der Javascript-Methode getElementHtml wird im Erfolgfall das Element direkt an den Container gehängt, was man bei dem gewählten Methodennamen nicht direkt erwarten würde. Shame on me...

Um nun die Routine zu entzerren und allgemeingültiger zu halten, habe ich ihr zwei weitere Eingabeargumente namens successFunction und errorFunction verpasst, die definieren was im Erfolgs- bzw. Fehlerfall passieren soll.

UserControls sind herrlich, um Code-Redundanzen zu vermeiden. Wiederkehrenden HTML-Code lagert man in ein solches Benutzersteuelement aus und etwaige Änderungen müssen nur einmal an zentraler Stelle vorgenommen werden.

Programmatisch ein solches Steuerelement in die zu rendernde Seite einzufügen, ist hingegen nicht ganz so trivial. Vor allem, wenn man dem Control eine oder mehrere Eigenschaften verpasst hat, die den Inhalt oder das Aussehen steuern, oder wenn man gar einen Konstrukor mit Argumenten geschrieben hat. Aber ... wie immer gibt es einen Weg, bzw. mehrere, die ich hier aufzeigen möchte.

Der von mir sehr geschätzte Dave Ward, hat mich vor Kurzem mit seinem Beitrag 3 reasons why you should let Google host jQuery for you auf einen (neuen?) Google-Service aufmerksam gemacht, den Benutzer der inzwischen recht zahlreichen Javascript-Frameworks unbedingt nutzen sollten. Die Rede ist von der Google AJAX Libraries API.

Mit diesem Service geht Google einen Schritt auf die wachsende AJAX-Entwicklergemeinschaft zu und erlaubt das notwendige Framework, in Form einer JS-Datei, statt vom eigenen Server von Googles Datacentern zu laden. Quasi erwünschtes Deep-Linking.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries.

Die wachsende Liste der Frameworks deckt aktuell mit jQuery, Prototype, script.aculo.us, Dojo, MooTools und YUI wohl einen großen Prozentsatz dessen ab, was im Web zur Zeit so eingesetzt wird.

So ziemlich jede Website besitzt in irgendeiner Art und Weise eine Möglichkeit über die der Benutzer Kontakt zum Betreiber aufnehmen kann. Sei dies über Kommentarfunktionen einzelner Blogeinträge oder ein Kontaktformular. Allen diesen Möglichkeiten gemein ist die Verwendung eines HTML-Formulars und in diesem eine Textbox (Textarea) in der der Benutzer seinen Senf eingeben kann.

Nun ist der aktuelle HTML-Standard schon uralt und ergo hat sich bezüglich der Funktionalität der Formular-Steuerelemente nichts getan. So ist es immer noch ein ziemlicher Krampf einen etwas längeren Text zum Beispiel in ein Kommentarfeld einzugeben, wenn der Webdesigner gerade mal 3 Zeilen sichtbar zur Verfügung stellt. Möchte man noch einmal nachschauen was man drei Sätze weiter oben geschrieben hat, fängt man an zu scrollen.

Der Safari-Browser "pimpt" diese Textareas zumindest so, dass der Benutzer sie sich etwas größer ziehen kann, aber befriedigend ist das nicht, zumal die meisten wohl mit dem IE oder Firefox unterwegs sind.

Der Kanadier Stéphane Caron hat sich des Themas auf eine sehr pfiffige und einfache Weise angenommen. Er hat auf Basis des Javascript-Frameworks jQuery das Plugin prettyComments entwickelt, dass, vom Webentwickler in die Seite eingebunden, automatisch die Höhe einer solchen Textbox um eine Zeile erweitert, sobald der Benutzer in der letzten Zeile angelangt ist.

Bei der Verwendung der sog. AJAX-Techik auf Web-Seiten geht es unter anderem darum, beim Laden einer Seite nicht bereits alle benötigten Daten zum Browser zu transportieren, sondern Teile der Seite erst auf Anforderung, als zum Beispiel durch den Klick des Benutzers auf einen Button, über Javascript-Code nachzuladen.

Ein besonders guter Helfer für den Entwickler der Seite ist dabei jQuery, das einige sehr effiziente Methoden bietet, Daten auf diese Art und Weise vom Web-Server zu holen. Was aber passiert damit? Die aktuelle Seite wird mit den Daten angereichert, das heißt, in den aktuellen HTML-Code werden die zusätzlichen Informationen injiziert. Ein Bespiel dafür:

function injectComments() {
    //JSON-Daten vom Server holen
    $.getJSON("getcomments.ashx", function(json){
        if (json != undefined) {

            //Datensätze durchlaufen und DIV-Elemente erzeugen
            $.each(json.rows, function(i,item) {
                $("#Result").append(
                    "<div class=\"row\">" + item.Comment + "</div>");
            }

        }
    });
}

jQuery wird hier angewiesen, Kommentardaten im JSON-Format von der Url getcomments.ashx abzuholen und die einzelnen Datensätze dann der Reihe nach in DIV-Elemente zu packen und an das HTML-Element Result anzuhängen.

So weit so gut. Nun ist aber die Struktur der zu erzeugenden DIV's in diesem Beispiel recht simpel, das heißt es ist durchaus vertretbar die "Vorlage", in die die eigentlichen Daten eingefügt werden, direkt im Code zu deklarieren. Was aber, wenn diese Vorlage wesentlich komplexer ist? Bei einer solchen Javascript-String-Verkettung geht da sehr schnell der Überblick verloren und der Code wird unwartbar.