jQuery

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

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

Microsoft, Ajax und JQuery

André Krämer — Wed, 17 Mar 2010 11:41:29 GMT

Wie Stephen Walter in seinem Blog angekündigt hat, stoppt Microsoft die Entwicklung des eigenen clientseitigen ASP.NET Ajax Library und steuert stattdessen Code zu jQuery bei. Bedeutet Microsoft hat jQuery nicht "übernommen", sondern steuert wie jeder andere einfach nur Quellcode bei bzw. schlägt Features vor, die anschließend durch das jQuery Team geprüft werden.

Da die Beta der ASP.NET Ajax Library nun bereits seit November verfügbar war, überraschte mich diese Ankündigung ein wenig. Andererseits fragte ich mich, je tiefer ich mich mit der Library beschäftigte, sowieso weshalb man den clientseitigen Teil neben jQuery überhaupt brauchen würde.

Jedem der sich nun genötigt fühlt, jQuery zu lernen, dem kann ich nur wärmstens Dave Wards Blog empfehlen. Außerdem ist seine Tekpub jQuery Serie die er gemeinsam mit James Avery aufzeichnet natürlich auch Pflichtprogramm.

Tags: ASP.NET, jQuery, Webentwicklung