.NET

Software Legende Juval Löwy am 8. Dezember in Koblenz

André Krämer — Tue, 07 Dec 2010 10:54:10 GMT

Am 8. Dezember hat unsere User Group in Koblenz mit Juval Löwy nach Tony Lombardo den zweiten internationalen Sprecher zu Gast.

Juval wird bei uns seinen Vortrag “The Architect” halten, der für alle Software Architekten sowie Entwickler interessant ist.

Da wir dieses Mal die Kapazitäten ein wenig besser planen müssen, bitten wir um eine formlose, kurze Anmeldung unter dnug@konzeptum.de.

Das Treffen wird dieses Mal übrigens nicht bei Konzeptum, sondern ausnahmsweise bei der Görlitz AG statt finden.

Weite Details zum Treffen gibt es auf der Homepage der DNUG-Koblenz. Eine Anfahrtsbeschreibung zu Görlitz findet ihr hier.

Tags: .NET, Community, DNUG Koblenz

HTTP Fehler 401 beim hinzufügen eines Custom WebParts

André Krämer — Sun, 21 Nov 2010 22:56:21 GMT

Gestern überraschte mich Sharepoint mit einem mir zunächst vollkommen unverständlichen Verhalten.

Ich versuchte zu einer Seite ein WebPart hinzuzufügen, welches ich kurz davor entwickelt hatte. Jedoch kam jedes Mal nachdem ich das Webpart auswählte ein Dialog der mich zur Eingabe von Benutzernamen und Passwort aufforderte. Meine korrekt eingegebenen Benutzerdaten akzeptierte der Dialog nicht. Der Klick auf “Abbrechen” führte schließlich zu einer Standard HTTP 401 Unauthorized Seite.

Weder im Event-Log, noch in den Sharepoint-Logs konnte ich Informationen zur Fehlerursache finden.

Also folgte einige Zeit der Ratlosigkeit und des Fluchens ehe ich mehr zufällig auf die Lösung kam:

Ursache des Problems war eine fehlerhaft von mir implementierte Property meines Webparts. Diese sah ungefähr wie folgt aus:

private string pfad
public string Pfad
{
   get
   {
      return Pfad.EndsWith("/")?Pfad:string.Concat(Pfad,"/");
   }
   set
   {
      pfad = value;
   }
}

Wie man sieht habe ich einen kleinen, aber entscheidenden Fehler innerhalb des Getters. Anstatt mein Feld mit dem Namen pfad zurück zu geben, gebe ich innerhalb des Getters der Eigenschaft Pfad die Eigenschaft Pfad zurück. Somit ruft diese Eigenschaft sich so lange selber auf, bis eine StackOverflowException auftritt.

Diese StackOverflowException führte dazu, dass der Workerprozess meiner Sharepoint Web Applikation recycled wurde. Somit waren meine zuvor eingegebenen Credentials ungültig und der IIS fragte mich erneut nach den korrekten Zugangsdaten.

Nachdem ich den Getter entsprechend korrigiert hatte, lies sich das Webpart problemlos einfügen.

private string pfad
public string Pfad
{
   get
   {
      return pfad.EndsWith("/")?pfad:string.Concat(pfad,"/");
   }
   set
   {
      pfad = value;
   }
}

Tags: .NET, Sharepoint, ASP.NET

Die ASP.NET ObjectDataSource und abhängige Business Objekte

André Krämer — Wed, 14 Jul 2010 08:08:57 GMT

Ja, ich gebe es offen und ehrlich zu! Ich habe sie noch nie wirklich genutzt, die ASP.NET WebForms ObjectDataSource. Irgendwie hatte ich ein Unbehagen bei der Vorstellung mir das alles bloß zusammen zu klicken und habe daher bisher einen Bogen um die ObjectDataSource gemacht. Außerdem habe ich bisher auch noch niemanden getroffen, der ernsthaft in Erwägung gezogen hätte die ObjectDataSource zu nutzen - oder sich zumindest getraut hätte, dies zuzugeben ;-)

Kürzlich war es dann aber soweit. meine Für eine kleine Demo startete ich damit, die serverseitige ASP.NET MVC Implementierung meiner Beispielanwendung für meinen jQuery Vortrag auf der dotnet Colgone nach Webforms zu konvertieren. Mein Ziel war es dabei, wo immer es nur geht, den WebForms "Baukasten" zu nehmen. Da ich bereits einen bestehenden Business Service hatte, der mir meine Objekte laden und persistieren konnte, kreuzte sie nun also meinen Weg, die ObjectDataSource.

Nach ein paar Klicks durch den Wizzard und einem beherztem F5 bestätigte sich vorerst mein initiales Vorurteil: "Totaler Mist!".

Mein Business Service hatte nämlich eine Abhängigkeit auf eine weitere Klasse, die für die Datenhaltung zuständig war. Diese Abhängigkeit fand sich in meinem Quellcode in Form eines Konstruktor Parameters wieder. In meiner ASP.NET MVC Implementierung war der DI Container StructureMap für das Auflöösen dieser Abhängigkeit zuständig.

Die WebForms Variante brach die Ausführung des Codes nun allerdings mit einer Exception ab und wies mich in freundlichem Gelb darauf hin, dass mein Business Objekt keinen parameterlosen Konstruktor hätte.

In der Hoffnung, eine Factory für mein Business Objekt angeben zu können durchsuchte ich also die Eigenschaften der ObjectDataSource. Leider wurde ich nicht fündig, fluchte ein wenig darüber, dass meine Anforderung doch gar nicht so ungewöhnlich wäre und beendete Visual Studio frustriert.

Glücklicherweise guckte ich ein wenig später doch noch mal nach einer Lösung. So kann zwar keine Eigenschaft für eine Factory angegeben werden, stattdessen wird jedoch ein Ereignis zur Verfügung gestellt, in dem ich das entsprechende Business Objekt erstellen und meiner ObjectDataSource zuweisen kann.

Konkret sieht dies wie folgt aus:

protected void AufgabenDataSource_ObjectCreating(object sender, ObjectDataSourceEventArgs e)
{
   AufgabenService service = ObjectFactory.GetInstance<AufgabenService>
   e.ObjectInstance = service;
}

Nun habe ich über die ObjectFactory zwar einen direkten Verweis innerhalb meiner CodeBehind Datei auf den genutzten DI Container (in meinem Fall StructureMap), dies ist mir aber immer noch lieber, als die Abhängigkeit zur Persistenzschicht in meinem Business Service hart zu verdrahten.

Und die Moral von der Geschicht ...

... lautet: Erst ausprobieren und dann (gegebenenfalls) meckern ;-)

Tags: ASP.NET, Webentwicklung

Deutsche Texte in Infragistics NetAdvantage 10.2

André Krämer — Thu, 01 Jul 2010 00:53:59 GMT

Wie Craig Shoemaker bereits in seinem Blog geschrieben hat, werden die Infragistics NetAdvantage Controls für Silverlight und WPF ab der Version 10.2 auch mit Deutschen Oberflächentexten ausgeliefert. In diesem Beitrag möchte ich die Notwendigen Schritte noch einmal im Schnelldurchlauf in deutscher Sprache am Beispiel von Silverlight erläutern.

Initiales Setup

Mein Silverlightprojekt besteht aus einer einzigen Seite, in der ein XamGrid definiert wurde:

<UserControl x:Class="NAGermanLocalization1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:ig="http://schemas.infragistics.com/xaml">

    <Grid x:Name="LayoutRoot" Background="White">
        <ig:XamGrid HorizontalAlignment="Left" Name="xamGrid1" VerticalAlignment="Top"  AutoGenerateColumns="false"  >
            <ig:XamGrid.FilteringSettings>
                <ig:FilteringSettings AllowFiltering="FilterMenu" />
            </ig:XamGrid.FilteringSettings>
            <ig:XamGrid.GroupBySettings>
                <ig:GroupBySettings AllowGroupByArea="Top" />
            </ig:XamGrid.GroupBySettings>
            <ig:XamGrid.Columns>
                <ig:TextColumn Key="Id" />
                <ig:TextColumn Key="Name"/>
                <ig:TextColumn Key="Vorname"/>
                <ig:TextColumn Key="Land" />
            </ig:XamGrid.Columns>
        </ig:XamGrid>
    </Grid>
</UserControl>

Für das Grid habe ich wie der vorherige Codeausschnitt zeigt Filtern und Gruppieren aktiviert.

Meine Codebehind Datei sieht ähnlich schmal aus:

using System.Collections.Generic;
using System.Windows.Controls;

namespace NAGermanLocalization1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            InitGrid();
        }

        private void InitGrid()
        {
 	        List<Kunde> kunden = new List<Kunde>();
            for (int i = 0; i<10; i++)
            {
                Kunde kunde = new Kunde{Id = i, Name = string.Format("Name {0}", i), Vorname = string.Format("Vorname {0}", i), Land = "DE"};
                kunden.Add(kunde);
            }
            xamGrid1.ItemsSource = kunden;
        }
    }

    public class Kunde
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Vorname { get; set; }
        public string Land { get; set; }
    }
}

An der Oberfläche schaut das ganze nun wie folgt aus:

Und einmal auf Deutsch bitte ...

Um das ganze nun zu lokalisieren, sind lediglich zwei Schritte erforderlich.

Zunächst muss das Silverlight Projekt entladen und anschließend im Textmodus editiert werden:

Der vorhandene leere Tag SupportedCultures muss mit dem Wert de versehen werden.

Anschließend muss die Projektdatei gespeichert und erneut geladen werden. Als letzter Schritt muss dann innerhalb der Webseite, die das Silverlight Control hostet noch die Zeile <param name="uiculture" value="de" /> innerhalb des Object Tags eingefügt werden:

Wenn nun nichts schief gegangen ist, sollten die Oberflächentexte nun auf Deutsch erscheinen:

Fazit

Lokalisierte Oberflächen werden mit Infragistics NetAdvantage 10.2 zum Kinderspiel, da das umständliche Setzen der Oberflächentexte über die runtime resource-string customization in Zukunft entfällt.

Tags: Infragistics, Silverlight, Localization

Hattrick!

André Krämer — Tue, 15 Jun 2010 00:32:46 GMT

Passend zur Fußball WM konnte ich einen virtuellen Hattrick landen. Kürzlich ist nämlich mein dritter Artikel in Folge auf der deutschen ASP.NET Site http://www.asp.net/de veröffentlicht worden. Cool :-)

Nachdem ich die Artikel des Tages nun also "gestürmt" habe, frage ich mich nur noch, wie ich mein Blog in den Feed links bekomme ...

Tags: .NET, ASP.NET, Community, Veröffentlichungen

Mein jQuery Vortrag auf der dotnet Cologne

André Krämer — Tue, 01 Jun 2010 00:25:11 GMT

Das Beispielprojekt meines jQuery Vortrags während der dotnet Cologne kann ab sofort hier herunter geladen werden.

Es handelt sich dabei um ein kleines ASP.NET MVC 2 Projekt, in dem folgendes genutzt wurde:

ASP.NET MVC 2 ;-)
StructureMap als IOC Container
SQLite als leichtgewichtige In-Memory-DB
NHibernate für den Datenbankzugriff
jQuery für den Wow-Faktor ;-)

Die Solution liegt passend zur Veranstaltung im VS 2010 Format vor. Bei Bedarf kann ich aber auch eine VS 2008 Solution bereit stellen.

Hauptaugenmerk solltet ihr auf die Datei aufgabenlist.js setzen. Hier befindet sich der relevante jQuery / JavaScript Code. Der ganze Rest ist nur "Infrastruktur", damit ich jQuery an einem halbwegs realistischen Beispiel zeigen kann ;-)

An Feedback zu den Quellcodes bin ich immer interessiert. Am besten über das Kontaktformular, oder die während des Vortrags mitgeteilte E-Mail Adresse.

Ich weiß übrigens, dass das ASP.NET MVC Projekt keine Unit Tests beinhaltet. Angesichts der Projektgröße und der verfügbaren Zeit habe ich hier ein wenig geschludert. Thomas Bandt hat mich während des Vortrags übrigens auch darauf aufmerksam gemacht, dass mein JavaScript Code nicht via Unit Tests geprüft wurde. Auch hier gelobe ich Besserung :-)

Literaturempfehlungen

Im Anschluss an den Vortrag wurde ich außerdem gefragt, welche Literatur ich zu dem Thema empfehlen könnte.

Nun, da sich jQuery hauptsächlich mit der Modifikation des DOMs, insbesondere dem Ein- / Ausblenden sowie dynamischem CSS befasst, sollte man meiner Meinung nach zunächst über solide (X)HTML und CSS Kenntnisse verfügen (kein Witz).

Zu diesem Thema kann ich das Buch Head First HTML with CSS & XHTML empfehlen:

Außerdem können generelle JavaScript Kenntnisse auch nicht schaden ;-) Hier habe ich persönlich sehr gute Erfahrung mit dem Buch Professional JavaScript for Web Developers gemacht.

Speziell zum Thema jQuery hat mir das Buch jQuery in Action, Second Edition sehr gut gefallen. Ich habe es mir im Rahmen des Manning Early Access Program als E-Book bestellt. Wer lieber ein gedrucktes Exemplar haben möchte, muss sich noch ein wenig gedulden, kann es aber dann auch z. B. bei Amazon bestellen.

Tags: .NET, ASP.NET, Community, jQuery, Lernen, Vorträge

dotnet Cologne 2010 - was ein riesen Spaß

André Krämer — Tue, 01 Jun 2010 00:03:46 GMT

Letzten Freitag hatte ich die Freude, an der dotnet Cologne teilzunehmen. Mit über 300 Teilnehmern war es ein wirklich riesiges Event, dass sich vor "professionellen", oder besser gesagt kommerziellen Konferenzen nicht verstecken muss.

Der Teilnehmer

Vor Ort war ich in mehreren Rollen. Zum einen natürlich als Teilnehmer. In dieser Rolle nutzte ich die Möglichkeit, endlich mal die Gesichter zu einigen Bekannten aus der Community zu sehen und auch mal persönlich das ein oder andere Wort zu wechseln. Außerdem hörte ich mir auch spannende Vorträge, unter anderem von Jörg Krause zu Sharepoint als Entwicklungsplattform, Neues in Silverlight 4 von Stefan Lange sowie Neues in ASP.NET 4.0 von Jan Welker.

Irritierend fand ich, dass gefühlte 90 % der Besucher von Jörg Krauses Sharepoint Vortrag keinerlei Sharepoint Vorkenntnisse hatten und somit wohl nicht im geringsten wussten, wie so eine Site, eine Sitecollection, ein Web, eine Liste, ein Webpart ... an der Oberfläche wohl aussehen. Die gleiche Situation habe ich übrigens auch mehrfach schon auf der Shareconnect (Basta Sharepoint Days) beobachtet. Vielleicht wäre hier einfach mal ein "Was ich über Sharepoint wissen sollte, bevor ich Visual Studio aufmache" Vortrag angebracht. Leider habe ich einen solchen Vortrag bisher noch auf keiner (Entwickler-)Konferenz im Angebot gesehen. Nichts desto trotz fand ich Jörgs Vortrag prima! Auch die anderen besuchten Vorträge haben mir gut gefallen, daher mein Fazit als Teilnehmer:

Voller Erfolg! Gute Vorträge, gute Kontaktmöglichkeiten zur Community, was will man mehr.

Der Aussteller

Unter den Sponsoren des Events war unter anderem auch die Firma Infragistics. Wie auch auf anderen Konferenzen lies ich es mir als fleißiger Infragistics MVP in den Pausen natürlich nicht nehmen, Kiril und Nils tatkräftig zu unterstützen. Dies war auch bitter nötig, da der Andrang am Stand weit höher war, als ich es von anderen Konferenzen gewohnt war. Kamen wir normalerweise zu zweit immer ganz gut zurecht, waren dieses Mal sogar drei Personen eigentlich schon fast zu wenig.

Fazit als Aussteller: Tolle Veranstaltung! Viele Kontakte, interessante und zum Teil sogar sehr trickreiche Fragen, genauso muss es sein!

Der User Group Leader

Jeder der schon mal ein User Group Treffen besucht hat wird sich sicherlich fragen:

Wo kommen eigentlich die Sprecher her?

Nun ja, als sie ganz klein waren, wird sie voraussichtlich einer der beiden hier unten gebracht haben.

Foto: Valter Jacinto | Portugal http://www.flickr.com/photos/valter/87429062/sizes/m/
Creative Commons License

Irgendwann werden die Jungs und Mädels dann aber groß und spätestens dann stellt sich für einen User Group Leiter die Frage:

Wo bekomme ich eigentlich Sprecher her?

Ein besonders guter Ort, Sprecher für die eigene User Group zu finden ist selbstverständlich eine Konferenz, denn dort treten Speaker häufig in Rudeln auf ;-)

Also machte ich mich während der dotnet Cologne auf den Weg und zog Sprecher für die nächsten Treffen der .NET User Group Koblenz an Land.

Die Ausbeute war übrigens mit zwei definitiven, einer relativ verbindlichen und einer losen Zusage recht gut. Daher auch hier: dotnet Cologne, 12 Points ;-)

Der Sprecher

Zu guter letzt (und angesichts der Agenda ist dies wörtlich gemeint), war ich auch als Sprecher unterwegs. Mein Thema war die Einführung in jQuery unter dem spontan geänderten Titel:

jQuery - oder warum Sie JavaScript in Zukunft nicht mehr hassen werden.

Den Verlauf des Vortrags würde ich wie folgt beschreiben

Der Saal füllt sich, die Menge wird still. Ich will loslegen, aber mein Mikro überlegt sich, dass es sich lieber in meinem T-Shirt verdreht. Kein Mensch hört mich ... so ein Mist
Mikro Problem gelöst, schnell durch die Folien gejagt. Auf gehts zur Demo!
Meine ASP.NET MVC Anwendung reißt niemand vom Hocker und stößt kaum auf Interesse
Ist zum Glück nicht schlimm, schließlich ist mein Thema ja auch jQuery und nicht ASP.NET MVC ;-)
Die ersten UI Gimmicks (alternierende Tabellenzeilen, Hover Effekte) zaubern ein müdes Lächeln auf die Gesichter der Menge - da muss wohl noch mehr her
Ich erstelle mit einer Zeile jQuery Code auf- und zuklappbare Bereiche in der Sidebar der Anwendung. Im Publikum sehe ich die ersten funkelnden Augen
Auf der Welle muss ich weiter reiten, also jetzt schnell ein wenig Ajax;-)
In der Einleitung habe ich etwas vom Update Panel erzählt. Heißt dann wohl ich sollte auch ein wenig WebForms zeigen. Ich entschließe mich also, im Firebug mal zu zeigen, was über die Leitung geht wenn man Ajax mit dem Update Panel ~~erlegt~~ erledigt. Als ich zum ViewState scrolle scheinen einige Teilnehmer zu glauben ich hätte gerade die Matrix gehacked oder zumindest gedebugged.
Oh je, nur noch 3 Minuten Zeit und ich habe doch versprochen früher Schluss zu machen - jetzt muss schnell etwas großartiges her. Ich greife also noch mal in die Trickkiste und greife zu meinem größten Trumpf:
runde Ecken;-)
Puh, geschafft, die Zuschauer jubeln. Ein Glück, dass es runde Ecken gibt ;-)

Mein Fazit als Sprecher lautet also:

Wahnsinn! Auch wenn es nur ein Einsteiger Vortrag war und laut Handzeichen mindestens die Hälfte der Anwesenden jQuery bereits kannte und nutzte war das Publikum allem Anschein nach während des Vortrags voll dabei. So macht vortragen Spaß!

Der Grillfreund

Zum Abschluss fand für einige Teilnehmer, Sprecher und Sponsoren dann noch die durch Microsoft gesponsorte und durch Jan Welker gestifftete Grill-Party des dotnet Forums statt. Essen und Getränke waren sehr lecker, die Gespräche spannend, von daher auch hier mein Kompliment.

Fazit

Der Besuch der dotnet Cologne hätte in keinster Weise besser laufen können. Großes Lob und alle Achtung an die Organisatoren! Nächstes Jahr bin ich - in welcher Form auch immer - sicherlich auch wieder mit dabei!

Hey, du hast dir die Zeit genommen, den ganzen Beitrag zu lesen, oder zumindest bis hier hin zu scrollen. Nimm dir doch bitte auch noch die Zeit, ihn über den unten stehenden Button bei dotnet-kicks.de zu kicken!

Ein zweites Zuhause

André Krämer — Sun, 23 May 2010 17:24:47 GMT

Habe ich für meine Blog Beiträge gefunden. Zumindest die englischen, die einen Bezug zu den Infragistics NetAdvantage Controls haben.

Seit kurzem gibt auf der Infragistics Homepage nämlich einen MVP Blog, für das ich einer der Autoren bin.

Selbstverständlich gibt es auch schon einen ersten Blog Post von mir. Dieser beinhaltet neben einer kurzen (OK, langen ;-)) Vorstellung ein kleines jQuery Script, welches hilfreich beim Einsatz des Infragistics ASP.NET Aikido WebDropdown Controls ist.

Tags: ASP.NET, Infragistics, Community, jQuery

Was hast du vor 10 Jahren programmiert

André Krämer — Tue, 18 May 2010 00:14:13 GMT

Vor ein paar Wochen haben unter anderem Darius, Alex und Thomas darüber geblogged, was sie vor 10 Jahren programmiert haben.

Natürlich kam ich auch ins Grübeln und so fiel mir ein, dass ich zu dieser Zeit meine Zeit meist mit VB 6 Desktop Anwendungen, Outlook Formularanwendungen, oder aber PHP oder Classic ASP Webanwendungen verbracht habe. Allerdings habe ich seitdem mehrfach den Arbeitgeber gewechselt und die Source Codes daher auch nicht mehr im Zugriff. Somit war das Thema, einen Blogeintrag zu dieser Frage zu schreiben für mich eigentlich erledigt.

Eigentlich ...

Aber auch nur eigentlich, denn lustigerweise schickte mir letzte Woche ein ehemaliger Kollege aus heiterem Himmel einen alten Screenshot, den er irgendwo gefunden hatte.

Bei diesem Screenshot handelte es sich um einen Gag Screen einer Anwendung, die wir 1999 für die Finanzbuchhaltung der Nürburgring GmbH geschrieben hatten. Das Bild öffnete sich übrigens, wenn ich mich recht erinnere beim Klick auf ein Label. In den vier Jahren, in denen ich die Anwendung anschließend noch weiter betreut habe, kam allerdings nie eine Anfrage zu dieser Bildschirmmaske. Daher gehe ich mal davon aus, dass es niemand gefunden hat :-)

Auf dem Bild zu sehen sind übrigens mein damaliger Kollege, der ein ehemaliger Schulkamerad und mein späterer WG Mitbewohner war, und ich. Das Bild wurde allerdings nicht während der Arbeit, sondern während eine Pre-Game Grill Party eines Spiels der Frankfurt Galaxy aufgenommen. Zu rätseln, wer von uns beiden wer ist, überlasse ich den Lesern dieses Blogs.

Schöne Erinnerung! Vielen Dank für das Bild Oliver!

Tags: Community, Fun

Lebendige ASP.NET Webseiten mit jQuery

André Krämer — Tue, 04 May 2010 20:47:09 GMT

Moderne Webseiten beinhalten in der heutigen Zeit einen hohen Anteil clientseitiger Quellcodes in Form von JavaScript. Für diesen Anwender führt dies im Idealfall zu einer verbesserten Benutzbarkeit der Applikation, da diese neben netten UI Effekten nun meist durch Ajax auch weitaus flüssiger bedienbar ist.

Bei vielen Entwicklern solcher dynamischer Webseiten führt der vermehrte JavaScript Anteil allerdings häufig zu Wein- und/oder Schreikrämpfen, denn nur die wenigsten mögen JavaScript wirklich. Die Ursachen für diese Antipathie liegen jedoch selten an JavaScript als Sprache selbst, sondern in den meisten Fällen eher an der unterschiedlichen Implementation des DOMs / BOMs durch die verschiedenen Browserhersteller. Diese Inkonsistenz führt nämlich dazu, dass JavaScript Code, der in einem Browser bzw. einer Version eines Browsers problemlos läuft im nächsten Browser Fehler verursacht und schlichtweg nicht läuft.

Weiter wird häufig bemängelt, das Selektionen fernab von einem einfachen document.getElementById(IdMeinesElements) relativ kompliziert sind. Als Beispiel wären hier zu nennen: alle Elemente mit einer bestimmten Klasse, ungerade Zeilen einer Tabelle, das aktivierte Element einer RadioButtonGroup usw.

Und nun?

Nun gibt es folgende Strategien mit diesen Problemen umzugehen:

Man drückt sich immer davor JavaScript zu schreiben und wälzt dies auf einen Kollegen ab
Man kopiert sich irgendwoher JavaScript Codeschnippsel, die angeben browserunabhängig zu sein und hofft, das dem auch so ist
Man investiert Unmengen Zeit in die eigene browserübergreifende Implementierung diverser Funktionalitäten
Man bedient sich eines der am Markt verfügbaren JavaScript Frameworks

Strategie Nr. 1 mag eine Weile ganz gut funktionieren, früher oder später wird aber der Zeitpunkt kommen, an dem man sich nicht mehr drücken kann (ich spreche da aus eigener Erfahrung ;-)).

Strategie Nr. 2 funktioniert immer dann, wenn der Umfang des benötigten JavaScript Codes überschaubar ist. Gemeinsam mit der Applikation wird aber auch irgendwann der zusammenkopierte Code wachsen und die Wartbarkeit entsprechend sinken.

Strategie Nr. 3 ist sicherlich eine prima Idee für alle die außerdem auch ein eigenes Logging Framework, einen eigenen OR Mapper usw implementiert haben, oder kurz gesagt für alle die gerne das Rad neu erfinden ;-)

Gangbar scheint also nur Strategie Nr. 4 zu sein. Schaut man sich nun am Markt um, stößt man unweigerlich auf jQuery. Die freie JavaScript Library adressiert unter anderem genau die zuvor genannten Probleme und hat in letzter Zeit einen wahren Hype verursacht. Dieser Rummel wurde sicherlich auch dadurch verstärkt, dass Microsoft jQuery offiziell supportet, mit Visual Studio ausliefert und die Arbeiten an der hauseigenen JavaScript Bibliothek ASP.NET Ajax Library zugunsten von jQuery eingestellt hat.

Wie legen wir nun aber mit jQuery los? Genau diese Frage möchte ich in diesem und den folgenden Blog Posts beantworten. Da jQuery in einem neuen ASP.NET MVC Projekt automatisch hinzugefügt wird und ASP.NET MVC Entwickler somit sowieso jQuery gewöhnt sind, soll als Beispiel zunächst eine Webforms Anwendung dienen.

Auf die Plätze, fertig, los!

Wenn man jQuery benutzen möchte, besteht der erste Schritt darin, die freie JavaScript Library in seine Seite einzubinden. Dazu lädt man unter http://www.jQuery.com einfach die aktuelle Version der Bibliothek herunter und kopiert diese anschließend zum Beispiel in einen Unterordner Scripts seiner Webanwendung. jQuery ist übrigens in einer für Menschen lesbaren (z. B. jQuery-1.4.2.js) und in einer verkleinerten Version (z, B. jQuery-1.4.2.min.js) verfügbar. In der verkleinerten Version sind unnötige Leerzeichen, Zeilenumbrüche und Kommentare entfernt. Außerdem wurden die Namen der Variablen und nicht öffentlichen Funktionen auf ein oder zwei Buchstaben verkürzt. Sinn dieser Maßnahme ist es die zum Client übertragene Datenmenge zu reduzieren. So ist die verkleinerte Version knappe 100 kb kleiner als die lesbare Variante. Für Produktivszenarien sollte demnach also in jedem Fall die .min Version genutzt werden, wohingegen während der Entwicklungszeit eher die lesbare Variante eingebunden werden sollte. So kann man den Scriptcode im Fall der Fälle nämlich noch debuggen.

So, genug der Vorrede und zurück zur Praxis. Tatsächlich einbinden können wir jQuery nun über folgende Zeile:

<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>

Platzieren sollte man diese Zeile übrigens innerhalb des Kopfbereichs der Seite:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
</head>

Prima, aber was mache ich nun damit?

Gute Frage! Jetzt haben wir jQuery zwar eingebunden, aber wie geht es jetzt weiter. Dazu sollten wir zunächst kurz einen Blick darauf werfen, was wir normalerweise mit JavaScript machen. In den meißten Fällen reduziert sich dies auf:

Elemente aus dem DOM zu selektieren
Selektierte Elemente zu manipulieren (ein- / ausblenden, Styledefinitionen zu verändern...)
Code bei bestimmten Ereignissen ausführen (z. B. click event)
Neue Elemente dem DOM hinzuzufügen
Elemente aus dem DOM zu löschen
AJAX Aufrufe zum Server zu machen und die Antwort zu Verarbeiten

Als kleinen Einstieg picken wir uns exemplarisch die ersten drei Punkte heraus. Wir werden also DOM Elemente selektieren und diese manipulieren. Geschehen wird dies bei dem Klick auf einen Button.

Dazu werden wir eine Meldungszeile, ähnlich wie man sie von Stackoverflow kennt nachbauen.

Der erste Schritt besteht in der Erstellung eines HTML und CSS Grundgerüsts:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Demo</title>

    <style type="text/css">
        body
        {
            margin: 0px;
        }
        #message
        {
            background-color: #FFFF88;
            border-bottom: solid 1px #000000;
            font-weight: bold;
            text-align: center;
            padding: 8px;
            margin: 0px;
            display:none;
            font-family: Arial, Verdana, Sans-Serif;
        }
        #message a
        {
            float: right;
            border: solid 3px black;
            font-family: Arial, Verdana, Sans-Serif;
            font-weight: bold;
            text-decoration: none;
            color: Black;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="message"><span>Dummy Nachricht</span><a href="Default.aspx">X</a>
    </div>
    <div id="content">
        <p>
            Dies ist eine jQuery Demowebsite</p>
        <button id="showMessage">
            Klick mich</button>
    </div>
    </form>
</body>
</html>

Wie man sieht, wird ein DIV Element mit dem Namen "message" erstellt, dass als Unterlemente ein SPAN Element und einen Link enthält. Über CSS wird dieses DIV Element noch ein wenig gestyled und initial ausgeblendet. Außerdem ist auf der Seite noch ein Button definiert. Ein Klick auf diesen Button soll der Auslöser sein, um die Meldung anzuzeigen.

Wie aber genau sieht nun der Code aus, um die Nachricht - mit verändertem Text - anzuzeigen?

Mit der Hilfe von jQuery ist dies garnicht so schwer:

$("#showMessage").click(function(evt) {
    evt.preventDefault();
    $("#message span").text("Du hast den Button geklickt. Klicke nun auf das X, um die Nachricht auszublenden.");
    $("#message").fadeIn(2000);
});

Auf den ersten Blick mag der Code etwas verwirrend aussehen. Vor allem durch die vielen $-Zeichen. Daher ein paar erklärende Worte:

In Zeile 1 selektieren wir mit dem Befehl: $("#showMessage") zunächst das DOM Element mit der ID showMessage, also unseren Button. Das $-Zeichen ist übrigens ein Alias für die jQuery Funktion. Statt $("message") hätte ich also auch jQuery("$message") schreiben können. Die Rückgabe des Aufrufs - unabhängig ob via jQuery(...) oder $(...) ist ein Objekt vom Typ jQuery. Dieses Objekt beinhaltet die selektieren DOM Elemente bzw. das selektierte DOM Element sowie einige weitere Funktionen.

In unserem Fall bekommen wir also ein Objekt vom Typ jQuery zurück, dass das DOM Element showMessage beinhaltet. Für dieses DOM Element wird nun eine anonyme Funktion als Handler für das Ereignis Click registriert.

In Zeile 2 wird mit dem Befehl evt.preventDefault(); nun die Standardaktion die der Browser bei diesem Ereignis, also z. B. das posten des Formulars nach Klick auf den Button, verhindert.

In Zeile 3 werden anschließend alle span Elemente innerhalb des DOM Elements mit der Id message selektiert. In unserem Fall ist dies also genau eins. Für dieses span Element wird mit der Funktion text jetzt ein neuer Text vergeben. Außerdem wird das Element mit der Id message in Zeile 4 langsam (über einen Zeitraum von zwei Sekunden) eingeblendet.

Der Quellcode zum Ausblenden der Nachricht sieht ähnlich aus:

$("#message a").click( function(evt) {
     evt.preventDefault();
     $("#message").fadeOut("slow");
 });

In Zeile 1 wird an alle A-Elemente innerhalb des DOM Elements mit der Id message ein Eventhandler für das Ereignis Click angehangen. Dieser verhindert in Zeile 2 die Standardaktion des Links und blendet in Zeile 3 unsere Nachrichtenzeile wieder aus. Dieses mal wird statt einer Angabe in Millisekunden der String "slow" als Argument übergeben. Dieser ist in den jQuery Quellcodes mit einem Wert von 600 ms hinterlegt.

Perfekt, aber wo schreibe ich den Code nun rein?

So, jetzt wo wir eigentlich den ganzen Quellcode fertig haben stellt sich natürlich die Frage, wie wir ihn in unsere Seite einbinden. Eine naive Implementierung sähe wie folgt aus:

<head>
<!-- ... -->
<script type="text/javascript">
    $("#showMessage").click(function(evt) {
        evt.preventDefault();
        $("#message span").text("Du hast den Button geklickt. Klicke nun auf das X, um die Nachricht auszublenden.");
        $("#message").fadeIn(2000);
    });
    $("#message a").click( function(evt) {
        evt.preventDefault();
        $("#message").fadeOut("slow");
    });
</script>
<!-- ... -->
</head>

Der Code würde also einfach in ein Scripttag innerhalb des Head Tags kopiert werden. Dies läuft so nicht! Der Grund ist, dass mit diesem Code versucht wird, ein Eventhandler an ein DOM Element zu binden, das es zu diesem Zeitpunkt noch garnicht gibt.

Wie sieht aber die Lösung für das Problem aus?

Alles zu seiner Zeit

Wie wir zuvor gesehen haben, ist unser Code wirkungslos, wenn wir ihn ausführen ehe es ein entsprechendes DOM Element gibt. Daher sollten wir ihn erst auslösen, sobald das DOM vollständig initialisiert ist.

Ein weg dies zu erreichen wäre es, den Code aufzurufen wenn das Ereignis window.onload eintritt:

window.onload = function() {
  $("#showMessage").click(function(evt) {
     evt.preventDefault();
     // Restlicher Code hier
  });
}

Diese Variante würde bereits fehlerfrei funktionieren. Allerdings wird das Ereignis onload erst ausgelöst, wenn das DOM vollständig initialisiert wurde und alle externen Ressourcen, wie zum Beispiel Bilder oder Stylesheets geladen wurden. Dies kann von Fall zu Fall recht lange dauern, so dass der Anwender den Button bereits anklicken könnte, ohne dass unser Script ausgeführt wird. Zum Glück bietet jQuery einen besseren Ansatz, nämlich $(document).ready. In dieser Variante wird das Ereignis ready ausgelöst, sobald das DOM vollständig initialisiert wurde, aber bevor externe Ressourcen geladen wurden.

Das vollständige Beispiel mit $(document).ready sieht dann wie folgt aus:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Demo</title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <style type="text/css">
        body
        {
            margin: 0px;
        }
        #message
        {
            background-color: #FFFF88;
            border-bottom: solid 1px #000000;
            font-weight: bold;
            text-align: center;
            padding: 8px;
            margin: 0px;
            display:none;
            font-family: Arial, Verdana, Sans-Serif;
        }
        #message a
        {
            float: right;
            border: solid 3px black;
            font-family: Arial, Verdana, Sans-Serif;
            font-weight: bold;
            text-decoration: none;
            color: Black;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#showMessage").click(function(evt) {
                evt.preventDefault();
                $("#message span").text("Du hast den Button geklickt. Klicke nun auf das X, um die Nachricht auszublenden.");
                $("#message").fadeIn(2000);
            });
            $("#message a").click(function(evt) {
                evt.preventDefault();
                $("#message").fadeOut("slow");
            }
        }
      });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="message"><span>Dummy Nachricht</span><a href="Default.aspx">X</a>
    </div>
    <div id="content">
        <p>
            Dies ist eine jQuery Demowebsite</p>
        <button id="showMessage">
            Klick mich</button>
    </div>
    </form>
</body>
</html>

Ausblick und Fazit

Wie dieser Blog Eintrag gezeigt hat, ist jQuery eine recht komfortabel zu bediene JavaScript Library, mit der sich mit wenigen Zeilen Script Code interessante Effekte erzielen lassen. Neben der intuitiven und Browser unabhängigen API besticht die Bibliothek vor allem durch die Fülle an Funktionen und erhältlichen Plug-Ins. Selbstverständlich konnte ich hier nur einen kurzen (ersten) Einblick verschaffen. Da ich das Thema Clientseitige Entwicklung in (ASP.NET) Webanwendungen jedoch für sehr interessant halte, habe ich vor in der nächsten Zeit weitere Einträge zum Thema jQuery mit folgenden Schwerpunkten zu schreiben:

Nutzen von Content Delivery Networks (CDNs)
jQuery Selektoren
Möglichkeiten der DOM Manipulation
jQuery und Firebug
jQuery Plugins selber entwickeln
jQuery UI
jQuery Utility Funktionen
jQuery und Ajax für Webforms und ASP.NET MVC

Eventuell werde ich im Anschluss an die Artikel auch kurze Video Tutorials bereitstellen.

Bevor ich allerdings loslege würde mich natürlich interessieren, ob das Thema für euch überhaupt von Interesse ist. Am liebsten in Form eines kurzen Kommentars.

Sollte jemand von euch übrigens das Verlangen haben, das Thema jQuery, oder auch generell ASP.NET mit mir persönlich in lockerer Atmosphäre zu diskutieren: Am 28. Mai werde ich einen Einsteigervortrag zu jQuery auf der dotnet Cologne 2010 halten. Über zahlreiche Besucher des Vortrags und natürlich auch spannende Diskussionen danach würde ich mich sehr freuen.

In den Pausen findet man ihr mich übrigens wahrscheinlich im Ausstellerbereich am Stand der Firma Infragistics. Dort wäre ich dann zusätzlich auch für den ein oder anderen Plausch über die Infragistics NetAdvantage Komponenten zu haben.

War dieser Artikel hilfreich für dich? Dann kicke ihn doch bitte bei dotnet-kicks.de!

Tags: jQuery, ASP.NET, Webentwicklung