RadioList

Das RadioList-EditorTemplate rendert eine Gruppe von Radio-Buttons. Die Optionen kommen über [AdditionalMetadata("Selection", ...)]; Einbindung über [UIHint("RadioList")]. Die Ausrichtung der Radio-Buttons (nebeneinander oder nach unten) steuert [AdditionalMetadata("Direction", FlexDirection.Column)].

RadioList (Standard, nebeneinander)

Gruppe von Radio-Buttons; ohne Angabe werden die Einträge nebeneinander ausgerichtet.

@model RadioListBeispielViewModel

<form class="fmh-demo-form">
    @Html.EditorFor(m => m.Anrede)
</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 RadioListBeispielViewModel
    {
        [Display(Name = "Anrede")]
        [UIHint("RadioList")]
        [AdditionalMetadata("Selection", nameof(Anreden))]
        [AdditionalMetadata("Direction", FlexDirection.Row)]
        public string Anrede { get; set; } = "f";

        public IEnumerable<SelectListItem> Anreden { get; } = new List<SelectListItem>
                                                              {
                                                                  new ("Frau", "f"),
                                                                  new ("Herr", "m"),
                                                                  new ("Keine Angabe", "x"),
                                                              };
    }
}

Darstellung

Das RadioList-EditorTemplate rendert eine Gruppe von Radio-Buttons (Single-Select). Die Optionen kommen über [AdditionalMetadata("Selection", nameof(...))].

[Display(Name = "Anrede")]
[UIHint("RadioList")]
[AdditionalMetadata("Selection", nameof(Anreden))]
public string Anrede { get; set; }

public IEnumerable<SelectListItem> Anreden { get; } = new List<SelectListItem> { /* ... */ };

Voraussetzung: registrierter AdditionalMetadataProvider.

Weitere Konfigurationen

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

RadioList untereinander

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

@model RadioListSpalteBeispielViewModel

<form class="fmh-demo-form">
    @Html.EditorFor(m => m.Anrede)
</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 RadioListSpalteBeispielViewModel
    {
        [Display(Name = "Anrede")]
        [UIHint("RadioList")]
        [AdditionalMetadata("Selection", nameof(Anreden))]
        [AdditionalMetadata("Direction", FlexDirection.Column)]
        public string Anrede { get; set; } = "f";

        public IEnumerable<SelectListItem> Anreden { get; } = new List<SelectListItem>
                                                              {
                                                                  new ("Frau", "f"),
                                                                  new ("Herr", "m"),
                                                                  new ("Keine Angabe", "x"),
                                                              };
    }
}

Darstellung

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

[Display(Name = "Anrede")]
[UIHint("RadioList")]
[AdditionalMetadata("Selection", nameof(Anreden))]
[AdditionalMetadata("Direction", FlexDirection.Column)]
public string Anrede { get; set; }

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

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

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