Kurze Einführung
Gestern habe ich bei meiner kleinen Test-Applikation die Chosen-Select DropDownListe eingesetzt.
Chosen ist ein JQuery Plugin und ermöglicht eine schönere und benutzerfreundlichere DropDownListe.
Da ich dieses Element das erste mal eingesetzt habe, hatte ich vorerst einige Probleme wie, das Einbinden der Libraries etc.
Deswegen mache ich hier ein kleines Tutorial wie man das Ganze zum Laufen bringt:
Chosen Multi-Select Tutorial:
Ausgangslage: Ich möchte eine DropDownListe mit einer mehrfachen Selektion
Schritt 1: HTML-Code einbauen:
So sieht mein Code aus. Hier ist wichtig, dass man den “name” Attribute setzt, damit man später beim POST, die Werte abholen kann.
Bei den ersten zwei Option-Tags sieht man den”selected” Schlüssel. Dies dient dazu, dass man diese Elemente bereits in die Selektion einbindet.
Der Rest ist eigentlich mehr oder weniger wie ein normaler DropDownList.
Schritt 2: Libraries einbinden:
Im Styles-Section werden die benötigten CSS-Dateien eingebunden.
Im Scripts-Section werden die JQuery-Dateien eingebunden.
Schritt 3: Chosen initialisieren:
Hier wird zuerst die Library jquery-1.9.1.min.js eingebunden, damit jquery überhaupt funktioniert.
Danach wird im Javascript-Section die $(document).ready() Funktion aufgerufen. Diese Funktion wird
dann ausgeführt, wenn die Seite geladen wird. Das heisst, wenn man etwas initialisieren möchte, wird
man diese Initialisierungen innerhalb dieser Funktion ausführen. Genau dies wird im Code auch gemacht:
$(“.chosen-select”).chosen({ width: “100%” });
Schritt 4: Selektierte Elemente schicken und abholen:
Hier kommt nun der “name” Attribute – den ich im Schritt 1 betont habe – ins Spiel. In meinem Beispiel habe ich
den Namen: “roles-selection” definiert. Dies kann nun, wenn man eine Submit-Aktion auf der Seite durchführt, ganz
einfach im Controller abgeholt werden:
Im Code ist zu sehen, dass ich den definierten Namen im Request.Form Array einsetze. Ich versuche mit
der TryGetValue() Methode, den folgenden Array-Element anzusprechen und die Werte in die Variable
paramList einzulesen. Die Werte werden Komma separiert als String abgelegt.
Somit würde die Selektion: Admin | CaseWorker | Backoffice folgendermassen aussehen:
paramList => “Admin, CaseWorker, Backoffice”
Deswegen überprüfe ich im Code, ob die paramList leer ist, oder ob sie ein Komma beinhaltet oder nicht.
Wenn die paramList nicht leer ist und einen oder mehrere Kommas beinhaltet, dann trenne ich die Werte
mit der string.Split() Methode und erhalte somit einen String-Array mit meinen Werten.
Wenn die paramList nicht leer ist, aber keine Kommas enthält, dann gehe ich davon aus, dass nur ein Wert
vorhanden ist. Dann erzeuge ich ein neues Array mit einem Element.
Ende des Tutorials:
Weitere Infos über das Chosen-Select Element unter: https://harvesthq.github.io/chosen/