Neue UI Komponente DropDownListEx für ASP.NET MVC
Montag, 26. Oktober 2009Ein 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.
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.





