CheckboxList

Das CheckboxList-EditorTemplate rendert eine Gruppe von Checkboxen für eine Mehrfachauswahl. Der Wert ist eine IEnumerable<int> der ausgewählten Ids; die Optionen kommen über [AdditionalMetadata("Selection", ...)]; Einbindung über [UIHint("CheckboxList")]. Die Ausrichtung der Checkboxen (nebeneinander oder nach unten) steuert [AdditionalMetadata("Direction", FlexDirection.Column)].

CheckboxList (Standard, nebeneinander)

Gruppe von Checkboxen (IEnumerable<int>); ohne Angabe werden die Einträge nebeneinander ausgerichtet.

@model CheckboxListBeispielViewModel

<form class="fmh-demo-form">
    @Html.EditorFor(m => m.Auswahl)
</form>

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Controls;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    public class CheckboxListBeispielViewModel
    {
        [Display(Name = "Interessen")]
        [UIHint("CheckboxList")]
        [AdditionalMetadata("Selection", nameof(Interessen))]
        [AdditionalMetadata("Direction", FlexDirection.Row)]
        public IEnumerable<int> Auswahl { get; set; } = new[] { 1, 3 };

        public IEnumerable<SelectListItem> Interessen { get; } = new List<SelectListItem>
                                                                 {
                                                                     new ("Sport", "1"),
                                                                     new ("Musik", "2"),
                                                                     new ("Reisen", "3"),
                                                                 };
    }
}

Darstellung

Das CheckboxList-EditorTemplate rendert eine Gruppe von Checkboxen für eine Mehrfachauswahl. Der Wert ist eine IEnumerable<int> der ausgewählten Ids; die Optionen kommen über [AdditionalMetadata("Selection", nameof(...))] (die SelectListItem-Werte sind die Ids als Text).

[Display(Name = "Interessen")]
[UIHint("CheckboxList")]
[AdditionalMetadata("Selection", nameof(Interessen))]
public IEnumerable<int> Auswahl { get; set; }

public IEnumerable<SelectListItem> Interessen { get; } = new List<SelectListItem>
{
    new("Sport", "1"), new("Musik", "2"), new("Reisen", "3"),
};

Voraussetzung: registrierter AdditionalMetadataProvider.

Weitere Konfigurationen

Konfiguration	Wirkung
`[AdditionalMetadata("GroupLabel", false)]`	Blendet das Gruppen-Label aus (Standard: eingeblendet)
`[AdditionalMetadata("Direction", FlexDirection.Column)]`	Anordnung der Checkboxen (Zeile/Spalte), siehe unten

CheckboxList untereinander

Ausrichtung nach unten über [AdditionalMetadata("Direction", FlexDirection.Column)] – die Checkboxen stehen untereinander.

@model CheckboxListSpalteBeispielViewModel

<form class="fmh-demo-form">
    @Html.EditorFor(m => m.Auswahl)
</form>

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Controls;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    public class CheckboxListSpalteBeispielViewModel
    {
        [Display(Name = "Interessen")]
        [UIHint("CheckboxList")]
        [AdditionalMetadata("Selection", nameof(Interessen))]
        [AdditionalMetadata("Direction", FlexDirection.Column)]
        public IEnumerable<int> Auswahl { get; set; } = new[] { 1, 3 };

        public IEnumerable<SelectListItem> Interessen { get; } = new List<SelectListItem>
                                                                 {
                                                                     new ("Sport", "1"),
                                                                     new ("Musik", "2"),
                                                                     new ("Reisen", "3"),
                                                                 };
    }
}

Darstellung

Standardmässig werden die Checkboxen nebeneinander ausgerichtet (FlexDirection.Row). Mit [AdditionalMetadata("Direction", FlexDirection.Column)] richtet das Template sie nach unten aus – jede Checkbox steht auf einer eigenen Zeile.

[Display(Name = "Interessen")]
[UIHint("CheckboxList")]
[AdditionalMetadata("Selection", nameof(Interessen))]
[AdditionalMetadata("Direction", FlexDirection.Column)]
public IEnumerable<int> Auswahl { get; set; }

FlexDirection liegt in FMH.Komponente.Basis.Ui.Controls.

Wert	Wirkung
`FlexDirection.None`	Wie `Row` (Standard, keine Angabe)
`FlexDirection.Row`	Checkboxen nebeneinander – CSS-Klasse `fmh-flex-direction-row`
`FlexDirection.Column`	Checkboxen untereinander – CSS-Klasse `fmh-flex-direction-column`

Das Gruppen-Label (GroupLabel) ist Teil desselben Flex-Containers: bei Column steht es über den Checkboxen, bei Row in derselben Zeile.