RenderAction and SubControllers in ASP.NET MVC

Standard

Last week I watched some videos about ASP.NET MVC. Rob Conery creates in episode 11 of the “ASP.NET MVC Storefront” series an ASP.NET MVC Component. Using components you can call an action method of a ComponentController and insert the rendered result into the view. Mike Bosch explains this concept in a blog post.

In ASP.NET MVC Preview 4 ComponentController has been removed and the method RenderComponent which called the ComponentController action from the view has been replaced by the method RenderAction which can call an action of a normal Controller. Since this concept conflicts with “Separation of concerns“, Microsoft doesn’t intend to include this feature in the RTM version of ASP.NET MVC.

ASP.NET MVC Futures

Therefore the ASP.NET MVC team moved the RenderAction method to the ASP.NET MVC Futures which consist of the assembly Microsoft.Web.Mvc.dll. This assembly contains features and prototypes which haven’t been included in the RTM version yet. The release for ASP.NET MVC Beta 1 can be downloaded from Codeplex.

In order to use ASP.NET MVC Futures in your MVC project reference the assembly “Microsoft.Web.Mvc.dll” and insert the following line into the web.config to include the namespace “Microsoft.Web.Mvc” in all your views automatically:

Configuration settings to include ASP.NET MVC futures in your views

SubControllers from MvcContrib

SubControllers can be used for similar purposes like RenderAction or Components. Matt Hinze presented this feature from the MvcContrib project in a blog post. SubController actions can be included in the view data as delegates. The views can then invoke these delegates and start the rendering of the SubController action view.

The host controller can pass objects to the SubController. Matt Hinze explains this feature in another blog post.

jQuery: Den Dokumentenbaum manipulieren

Standard

Letztes Mal ging’s darum, wie man DOM-Elemente in jQuery auswählen kann. Dieses Mal werfen wir einen Blick darauf, wie man den Dokumentenbaum ändern kann.

In den letzten Folgen haben wir bereits einige Methoden kennengelernt:

  • text – ändert den Textinhalt eines Elements.
  • toggle – macht ein Element sichtbar, wenn es zuvor unsichtbar war, und umgekehrt.

Inhalte einfügen

Die Methoden zur Änderung der Inhalte (html und text) haben wir bereits in den letzten Folgen kennengelernt. Viel mehr Methoden gibt es, um neue Inhalte in den Dokumentenbaum einzufügen. In der jQuery-Dokumentation findet man Details über die Methoden zur Manipulation des Dokumentbaumes.

Dieses Beispiel demonstriert das Kopieren von Elementen von einem Quell- in einen Zielbereich. Der JavaScript-Code dafür sieht so aus:

    $(document).ready(function() {
      $("#changeButton").click(function() {
        $(".target").empty();
        $(".source").appendTo(".target");
      });
    });

Die Methode empty löscht alle Kindelemente der ausgewählten Elemente. In unserem Fall sind das alle Elemente, die mit der CSS-Klasse “target” ausgezeichnet wurden. In Zeile 4 wird der Inhalt aller Elemente mit der CSS-Klasse “source” verkettet und in alle Elemente mit der CSS-Klasse “target” eingefügt.

Subelemente ersetzen

Im nächsten Beispiel wird der Button durch ein DIV-Element ausgetauscht. Der JavaScript-Code sieht folgendermaßen aus:

    $(document).ready(function() {
      $("#replacingButton").click(function() {
        $(this).replaceWith("Hello, world!");
      });
    });

Subelemente löschen

Weiter oben hatten wir bereits ein Beispiel, in dem mit empty() alle Subelemente gelöscht wurden. Mit der Methode remove werden alle selektierten Elemente aus dem Dokumentenbaum entfernt. Die Objekte bleiben erhalten und selektiert, d.h. man kann die entfernten Elemente noch in verketteten Methodenaufrufen verwenden. Im obigen Beispiel haben wir Elemente kopiert. Ich habe das Beispiel ein wenig modifiziert, um die Elemente nicht nur zu kopieren, sondern zu verschieben:

    $(document).ready(function() {
      $("#changeButton").click(function() {
        $(".target").empty();
        $(".source").remove().appendTo(".target");
      });
    });

Elemente klonen

Die Methode clone() erstellt einen Klon der ausgewählten Elemente und selektiert die Klons für weitere Methodenaufrufe. Ein optionaler Parameter vom Typ bool gibt an, ob Eventhandler ebenfalls geklont werden sollen. Der voreingestellte Wert ist false.

Ich habe das obige Beispiel ein weiteres Mal modifiziert:

    $(document).ready(function() {
      $("#changeButton").click(function() {
        $(".source")
          .clone()
          .removeClass("source")
          .addClass("target")
          .appendTo("body");
      });
    });

Zuerst werden alle Elemente mit der CSS-Klasse “source” selektiert und geklont. Der Wert des Attributs class aller Klone wird so modifiziert, dass die Klasse “source” nicht mehr vorhanden ist (Methode removeClass()) und die Klasse “target” hinzugefügt wird (Methode addClass()). Die Methode appendTo fügt dann die Klone in das body-Element ein.

Mehr Details zu den Methoden addClass() und removeClass() gibt’s in der jQuery-Dokumentation.

Weitere Methoden

jQuery kennt natürlich noch mehr Methoden, die den Dokumentenbaum manipulieren. Die jQuery-Dokumentation enthält Details dazu.

Zusammenfassung

jQuery bietet jede Menge Methoden an, um den Dokumentenbaum zu manipulieren. Inhalte können geändert, eingefügt, gelöscht, ersetzt und kopiert werden.

In der nächsten Folge werde ich mich mit den in jQuery eingebauten Effekten beschäftigen.

Intellisense für jQuery in Visual Studio 2008

Standard

Bertrand Le Roy hat heute bekanntgegeben, dass die Intellisense-Dokumentationsdateien für jQuery in Visual Studio 2008 von der jQuery-Homepage heruntergeladen werden kann. Tatsächlich gibt es einen Download-Link, der als Dokumentationsdatei für Visual Studio bezeichnet wird.

In der Datei jquery-1.2.6-vsdoc.js befindet sich der jQuery-Quellcode mit XML-Kommentaren. Sie sollten diese jQuery-Variante nur zum Entwickeln verwenden. Bertrand Le Roy schlägt vor, die Datei vorerst nur in einem Server-Codeblock (if (false)) einzubinden. Das ASP.NET AJAX-Team arbeitet an einer besseren Lösung.

jQuery: DOM-Elemente auswählen

Standard

Im letzten Beitrag „Ein erster Blick auf jQuery“ haben wir uns die Grundlagen von jQuery angesehen. Diesmal sehen wir uns an, wie wir mit jQuery DOM-Elemente selektieren können.

Selektoren

Eine JavaScript-Applikation ändert die GUI, indem sie den Dokumentenbaum manipuliert. Das DOM bietet dafür die Methoden getElementById, getElementsByName oder getElementsByTagName. Mit jQuery geht’s einfacher.

Zwei weitere Sprachen müssen häufig im Dokumentenbaum navigieren: CSS und XPath. CSS- und XPath-Kenntnisse setze ich voraus.

Sehen wir uns einmal ein Beispiel an. Angenommen irgendwo in einem Dokument befindet sich folgendes Code-Schnipsel:

    <div id="MenuItem">Datei</div>

Das DIV-Element findet man mit dem DOM-API mit folgendem Code:

    var element = document.getElementById('MenuItem');

Die Voraussetzung dafür ist, dass das gesuchte Element ein ID-Attribut besitzt. Mit CSS setzt man die Vordergrundfarbe des Elements so:

    #MenuItem { color: #fe4578; }

Dabei ist „#MenuItem“ der CSS-Selektor. Mit jQuery kann man CSS-Selektoren für die Navigation im Dokumentenbaum verwenden:

    $("#MenuItem").click(function() {
        ...
    });

Dem $-Zeichen sind wir schon in der letzten Folge begegnet. Es handelt sich dabei um einen Alias für die Funktion jQuery. jQuery akzeptiert entweder ein DOM-Element oder einen Selektor als Argument.

Mehrere Elemente gleichzeitig manipulieren

Bisher haben wir immer nur ein DOM-Element bearbeitet. Doch was macht folgendes Code-Schnipsel?

    $(".clickable").click(function() {
    ...
    });

Der Selektor „.clickable“ wählt alle Elemente mit der CSS-Klasse „clickable“ und registriert darauf einen Click-Eventhandler. Mit jQuery können Sie also mehrere Elemente gleichzeitig bearbeiten.

Methoden-Verkettung

Der Rückgabewert jeder jQuery-Methode ist das jQuery-Objekt selbst. Daher können Methoden-Aufrufe verkettet werden.

    $("p").css("color", "#800000").addClass("paragraph").click(function() {
        ...
    });

In diesem Beispiel setzen wir die Vordergrundfarbe aller P-Elemente auf rot, fügen allen P-Elementen die CSS-Klasse „paragraph“ hinzu und registrieren auf allen P-Elementen einen Click-Eventhandler.

In diesem Beispiel sind wir zwei neuen Methoden begegnet: css und addClass. css setzt eine oder mehrere CSS-Eigenschaften. Mehrere CSS-Eigenschaften können so angegeben werden:

    $("p").css({
        "color": "#800000",
        "background-color": "#000000",
        "text-weight": "bold"
    });

addClass fügt eine CSS-Klasse hinzu.

Auswahl erweitern und einschränken

jQuery hat einige Methoden, die die Auswahl der DOM-Elemente erweitern oder einschränken. In Verbindung mit der Methodenverkettung ergeben sich daraus interessante Möglichkeiten.

Wenn Sie das folgende Beispiel starten, können Sie die Text aus- und einblenden, indem Sie auf die entsprechende Links klicken.

Beispiel starten

Hier ist der Source-Code des Beispiels:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>jQuery Sample</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="sample.js" type="text/javascript"></script>
      </head>
      <body>
        <div>
          <a href="#" class="activateLink">Text 1</a>
          <div>
            Erster Text
          </div>
        </div>
        <div>
          <a href="#" class="activateLink">Text 2</a>
          <div>
            Zweiter Text
          </div>
        </div>
      </body>
    </html>

Der JavaScript-Code für dieses Beispiel ist nur fünf Zeilen lang:

    $(document).ready(function() {
      $("a.activateLink").click(function() {
        $(this).next("div").toggle();
      });
    });

Der Click-Eventhandler sucht ein DIV-Element, das dem geklickten Link unmittelbar folgt, und ändert dessen Sichtbarkeit.

Die Methode filter

Beispiel starten

Hier ist der HTML-Sourcecode:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>jQuery 02 - Filter Methods</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery_02_filter_methods.js" type="text/javascript"></script>
      </head>
      <body>
        <ul>
          <li><a href="http://www.andreas-schlapsi.com" class="external_link">Link 1</a></li>
          <li><a href="http://www.jquery.com" class="external_link">Link 2</a></li>
          <li><a href="http://ui.jquery.com" class="external_link">Link 3</a></li>
        </ul>
        <ul>
          <li><a href="#" class="message_link">Erste Nachricht</a></li>
          <li><a href="#" class="message_link">Zweite Nachricht</a></li>
        </ul>
        <div id="MessageLabel" style="border: 1px solid #000; background-color: #eee; padding: 1em;">
        </div>
        <ul>
          <li><a href="http://www.google.com">Ein normaler Link</a></li>
        </ul>
      </body>
    </html>

Und hier der JavaScript-Code:

    $(document).ready(function() {
      $("a")
        .filter(".external_link")
          .click(function() {
            alert("Sie verlassen die Seite.");
          })
        .end()
        .filter(".message_link")
          .click(function() {
            $("#MessageLabel").text($(this).text());
            return false;
          })
        .end();
    });

Das Beispiel filtert aus den selektierten Linkelementen jene heraus, die die Klasse „.external_link“ haben und registriert darauf einen Click-Eventhandler, der eine Messagebox anzeigt. Die Methode end hebt die Filterung wieder auf. Auf allen Linkelementen mit der Klasse „.message_link“ wird ein anderer Click-Eventhandler registriert, der den Textinhalt des geklickten Links in das DIV-Element mit der ID „MessageLabel“ kopiert. Die Methode text ohne Parameter liest den Textinhalt aus, statt ihn zu setzen.

Beachten Sie, dass der zweite Click-Eventhandler false zurückgibt. Bei einem Click-Eventhandler wird dadurch die Ereignisbehandlung abgebrochen, d.h. dass der Browser dem Link, der im Attribut href angegeben ist, nicht folgt.

jQuery-Dokumentation

Folgende Links auf die jQuery-Dokumentation enthalten detailliertere Informationen zu den Themen dieses Artikels:

Zusammenfassung

Dieses Mal haben wir gesehen, wie wir mit Selektoren ein oder mehrere DOM-Elemente finden und bearbeiten können. Die jQuery-Methoden geben das jQuery-Objekt zurück und können daher verkettet werden. Einige Methoden schränken die Auswahl ein oder erweitern diese.

In der nächsten Folge dieser Serie geht es um DOM-Manipulation und Effekte.

Ein erster Blick auf jQuery

Standard

Update: Verbesserte Beschreibung der drei Download-Varianten.

Update: Verzeichnis der anderen Folgen der jQuery-Reihe hinzugefügt.

Überblick über die jQuery-Reihe:

  1. Ein erster Blick auf jQuery
  2. jQuery: DOM-Elemente auswählen
  3. Intellisense für jQuery in Visual Studio 2008
  4. jQuery: Den Dokumentenbaum manipulieren
  5. jQuery: Effektvoll ein- und ausblenden

Scott Guthrie und John Resig kündigten Ende September an, dass die nächste Version von Visual Studio die JavaScript-Library jQuery enthalten wird. Die Entwicklungsumgebung wird Intellisense für jQuery-Methoden bieten und die jQuery-Hilfe in das Hilfesystem integriert sein. Grund genug, um einen ersten Blick auf die JavaScript-Library zu werfen.

Dieser Artikel ist der Beginn einer Blogserie, mit der ich die Grundlagen von jQuery vorstellen möchte. In dieser Folge sehen wir uns ein einfaches jQuery-Script an.

Hello, world!

Um mit jQuery experimentieren und entwickeln zu können, laden Sie die JavaScript-Library von der Homepage runter. Das Beispiel wurde mit Version 1.2.6 entwickelt und getestet. Es gibt drei Varianten für den Download:

  • Uncompressed (oder Development): enthält den JavaScript-Quellcode so, wie die Entwickler ihn geschrieben haben. Alle Kommentare sind enthalten, bestimmte Zeilen sind mit Leerzeichen eingerückt usw. Nicht nur der Browser, sondern auch Menschen sollen den Programmcode lesen und verstehen können.
  • Minified: enthält den JavaScript-Quellcode ohne Kommentare und unnötigen Leerzeichen. Aus der Developmentversion werden alle Zeichen entfernt, die für die Ausführung im Browser nicht benötigt werden. Der Browser versteht den JavaScript-Code ohne weitere Veränderungen. Ein Entwickler kann den Programmcode nur mehr mit sehr viel Mühe lesen. Die Dateien sind aber viel kleiner als in der Developmentversion. Diese Variante wird für Produktionssysteme empfohlen.
  • Packed: Noch kleiner werden die Dateien, wenn sie “gepackt” werden, d.h. die Datei enthält nur mehr einen JavaScript-Code, der den eigentlichen JavaScript-Code aus der Developmentversion erst mit einem Algorithmus “entpacken” muss. Üblicherweise ist ein solcher Algorithmus rechenintensiv.

Für unser erstes Beispiel kopieren Sie die heruntergeladene Datei unter dem Namen „jquery.js“ in ein beliebiges Verzeichnis, in dem Sie auch eine neue HTML-Datei mit folgendem Inhalt anlegen:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
        <title>jQuery Sample</title>
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            $("#Label").click(function() {
              $(this).text("Hello, world!");
            });
          });
        </script>
      </head>
      <body>
        <div id="Label" style="border: 1px solid #000;">
          This is a test.
        </div>
      </body>
    </html>

Wenn Sie die Datei öffnen, zeigt der Browser den Text „This is a test.“ an. Wenn Sie darauf klicken, tauscht der JavaScript-Code den Text gegen „Hello, world!“ aus.

Der Startpunkt des Frameworks ist „$“, ein Alias für die Funktion jQuery, die als Argument einen Selektor oder ein DOM-Element erwartet. In unserem Beispiel verwenden wir die $-Funktion drei Mal: $(document), $("#Label") und $(this). $(document) und $(this) geben jeweils ein Objekt zurück, dessen Methoden auf die angegebenen DOM-Elemente wirken. $("#Label") verwendet einen CSS-Selektor, um das DIV-Element mit der ID „Label“ zu finden.

Das Ready-Ereignis

JavaScript-Code wird sofort nach dem Parsen ausgeführt. Zu diesem Zeitpunkt ist der Dokumentenbaum noch nicht vollständig aufgebaut, was zu Problemen führen kann.

JavaScript-Entwickler verwenden deshalb häufig das Load-Ereignis am window-Objekt für Initialisierungscode. Der Browser löst dieses Ereignis aus, sobald er die Seite geladen hat. Der Code wird aber erst ausgeführt, nachdem auch alle Bilder geladen wurden.

jQuery bietet deshalb das Ready-Ereignis an. jQuery wartet, bis das Dokument bereit ist, um bearbeitet zu werden, und löst dann das Ereignis aus.

Eventhandler

Eventhandler sind für jQuery einfache JavaScript-Funktionen. Wir haben in unserem Beispiel anonyme Funktionen verwendet (Zeilen 8 und 9).

Unser Beispiel registriert einen Eventhandler für das Click-Ereignis am DIV-Element mit der ID „Label“. Ein DOM-Element löst das Click-Ereignis aus, wenn der Benutzer darauf mit der Maus klickt.

Hinweis: In Eventhandlern zeigt this auf das DOM-Element, das das Ereignis ausgelöst hat.

Unser Beispiel verändert in Zeile 10 im Click-Eventhandler des DIV-Elements den Textinhalt des Elements mit der Methode „text“:

    $(this).text("Hello, world!");

Zusammenfassung

Der Startpunkt für jQuery ist die Funktion jQuery mit dem Alias „$“. Mit Selektoren referenzieren Sie DOM-Elemente, auf die Sie mit dem jQuery-API Eventhandler registrieren, DOM-Manipulationen durchführen
oder Effekte aufrufen können.

Das Ready-Ereignis können Sie zur Initialisierung Ihrer JavaScript-Anwendung nutzen. Wie bei normalen JavaScript-Eventhandlern referenziert this in einer als Eventhandler registrierten Funktion das DOM-Element, das das Ereignis ausgelöst hat.

In der nächsten Folge wenden wir uns den jQuery-Selektoren zu.