Ich habe eine neue HTML Helper Komponente in meine Library etcetera.Mvc aufgenommen. Die macht es möglich, mit wenigen Zeilen im View die bekannten Google Maps auf der Seite darzustellen:

Der Html Helper unterstützt alle Steuerelemente, welche Google in ihrem API anbietet. Das obenstehende Beispiel wurde mit folgendem Aufruf erzeugt:

<%= Html.GoogleMap()
        .Width(640)
        .Height(480)
        .ApiKey("ABCDEFGHIJKLMNOPQRSTUVWXYZ")
        .Language(MapLanguage.de)
        .Coordinates("47.1,8.1")
        .ZoomLevel(8)
        .ScrollZoom()
        .EnableMapType(MapType.Map)
        .EnableOverviewMap()
        .ZoomControlType(MapZoomControlType.LargeMapControl3D)
        .ScrollZoom()
        .Markers(new List<Marker>
                     {
                       new Marker("47.1, 8.1", "I'm a test bubble."),
                       new Marker("47.2, 8.2", "I can describe <strong>interesting</strong> <br />places using HTML.", true)
                     })
 %>

Die Komponente steht vorerst nur via Source Code zur Verfügung, ein Release folgt bald.

Ein den meisten (MS) Entwicklern unbekanntes HTML Tag ist das <optgroup> Element. Unter Umständen liegt dies daran, dass das Element in ASP.NET nicht direkt durch ein Server Control unterstützt wird.
Das <optgroup> Element kann innerhalb von Dropdown Listen verwendet werden, um die einzelnen Optionen zu gliedern. So lässt sich einfach eine zweistufige Hierarchie darstellen, HTML konform.

Das Markup für eine solche Dropdown Liste wird wie folgt definiert:

<select id="GameConsole" name="GameConsole">
 <option value="">Select your favorite...</option>
 <optgroup label="Microsoft">
   <option value="1">XBox</option>
   <option value="2">XBox 360</option>
 </optgroup>
 <optgroup label="Nintendo">
   <option value="3">Wii</option>
   <option value="4">Gameboy</option>
 </optgroup>
 <optgroup label="Sega">
   <option value="5">Dreamcast</option>
 </optgroup>
 <optgroup label="Sony">
   <option value="6">Playstation</option>
   <option value="7">Playstation 2</option>
   <option value="8">Playstation 3</option>
   <option value="9">PSP</option>
 </optgroup>
</select>

Ich habe eine neue HTML Helper Komponente DropDownListEx in meine Library etcetera.Mvc aufgenommen. Diese unterstützt das eben beschriebene Tag.

etcetera.Mvc DropDownListEx

Dazu habe ich auch eine Hilfsklasse OptionGroupSelectList erstellt, welche eine ähnliche Aufgabe wie die SelectList erfüllt. Die DropDownListEx erwartet im Konstruktor eine solche OptionGroupSelectList. Diese kann vom Controller wie folgt erstellt werden:

GameConsoleViewModel gcvm = new GameConsoleViewModel();
gcvm.GameConsoles = new OptionGroupSelectList<GameConsole>(gameConsoles,
                                                           x => x.Id,
                                                           x => x.Name,
                                                           x => x.Manufacturer.Name);
ViewData.Model = gcvm;

Die drei Lambda Expressions geben die jeweiligen Properties des Aufzählungstyps für das Wert und Namensfeld der Optionen, sowie das Label der Option Group an.

Im View kann der HTML Helper wie folgt aufgerufen werden:

<%= Html.DropDownListEx("GameConsole", Model.GameConsoles, "Select your favorite...") %>

Ich habe noch keinen Release erstellt, die Komponente ist bislang nur als Source Code verfügbar. Ich werde aber bald einen Release erstellen, welcher auch noch weitere Komponenten enthalten wird.

Ich mag das ASP.NET MVC Framework. Wenn ich die Wahl habe, ziehe ich ein MVC Projekt mittlerweile einem WebForms basierten vor. Die offene Architektur, Flexibilität, Testbarkeit und vor allem die Erweiterbarkeit machen es zu einer Freude Webprojekte zu entwickeln.
Wer mit dem MVC Framework beginnt, wird unweigerlich auf das MvcContrib Projekt stossen. Dieses erweitert das Framework an allen Ecken und Enden.
Gerade zu Beginn wird man die ASP.NET Server Controls vermissen. Die mitgelieferten HTML Helper sind zwar sehr komfortabel, decken aber nur das allernötigste ab. Unterstützung für komplexere GUI Elemente wie ein Grid sucht man vergebens.
Das MvcContrib Projekt enthält nebst vielen nützlichen Dingen wie alternativen ViewEngines, Controller Factories und Routing Unterstützung auch einen grossen Satz HTML Helper. Die mächtigste UI Komponente ist in meinen Augen das Grid.

In meinen MVC Projekten habe ich nach anfänglichen Rumspielen mit jQuery Plugins für tabellarische Daten ausschliesslich das MvcContrib Grid verwendet, habe aber bald begonnen, dieses so zu erweitern, dass auch AJAX basiertes Paging und ein Sortieren der Spalten in einem HTML Helper gekapselt wurden.
Das ganze hat sich zu einer kleinen Library gemausert, die ich nun auf CodePlex als Open Source Projekt veröffentlicht habe. Das Projekt nennt sich etcetera.Mvc und ist in einer ersten Version 0.1 verfügbar.

Momentan sind drei UI Komponenten enthalten:

Grid

etcetera.Mvc Grid

Das Grid basiert auf demjenigen von MvcContrib. Dazu gehört eine separate und flexibel konfigurierbare Toolbar, welche für das Paging eingesetzt werden kann. Das Grid verwendet den selben Syntax wie MvcContrib undfügt folgendes hinzu:

• Effizientes asynchrones Paging via AJAX ohne eine einzige Zeile eigenem JavaScript
• Falls der Client kein JavaScript unterstützt, werden regulare Seiten Requests ausgeführt.
• Sortierbare Spalten
• Optionaler Grid Header welcher das Grid ein- und ausfahren kann
• Toolbar für das Paging, mit Anzeige und direkter Wahl der Seitennummer
• Die Toolbar kann einfach und beliebig auch mit eigenen Buttons erweitert werden
• Konfigurierbarer Export der Grid Daten nach Excel
• Alle Labels und Tooltips können selber definiert werden

Das Grid enthält ein jQuery Plugin, die Beispiel Icons und Stylesheets des Screenshots.

Kalender

etcetera.Mvc Calendar

Der Kalender zeigt eine Monatsansicht und unterstützt die Anzeige von Einträgen wie Meetings. Die Kalender Datenstrukturen sind komplett unabhängig von eigenen Projekten. Der Kalender unterstützt folgende Einstellungen:

• Den Wochentag, an dem die Woche beginnt. In den USA ist dies z.B. der Sonntag.
• Anzeige der Tage des Vor- und Folgemonats
• Highlighting des aktuellen Tags
• Komplette Kontrolle über die Links zu Einträgen oder Daten

Wie die anderen UI Komponenten lässt sich das Aussehen komplett über Stylesheets definieren.

Progressbar

etcetera.Mvc Progressbar

Die Progressbar ist ein sehr simples Element. Ich habe es hauptsächlich dafür benötigt, um die Progressbar von jQuery-UI zu ersetzen.

Weitere Komponenten und Framework Erweiterungen werden folgen.