Basis – RadioList - FMH.Komponente.WebUI

RadioList ohne View-Model

Das ViewModel ist nur eine lokale Variable, etwa in einer Sidebar. Die Liste kommt dann über den zweiten Parameter von EditorFor ins Template.

@* Bewusst ohne @model: Das ViewModel ist eine lokale Variable, wie in einer Sidebar oder einem
   Layout-Partial. Der Behälter im Template ist damit nicht dieses Objekt, darum reicht der zweite
   Parameter von EditorFor das Objekt mit; seine Eigenschaften landen in der ViewData des Templates. *@
@{
    var auswahl = new RadioListBeispielViewModel();
}

<form class="fmh-demo-form">
    @Html.EditorFor(m => auswahl.Anrede, 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 RadioListBeispielViewModel
    {
        [Display(Name = "Anrede")]
        [UIHint(UiEditor.Basis.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

Ist das ViewModel nur eine lokale Variable, etwa in einer Sidebar oder einem Layout-Partial, gibt der zweite Parameter von EditorFor das Objekt mit. Das Template findet die Liste dann in der ViewData statt am Behälter:

@{
    var auswahl = new RadioListBeispielViewModel();
}

@Html.EditorFor(m => auswahl.Anrede, auswahl)

Ausrichtung (Direction) und Gruppen-Label (GroupLabel) wirken unverändert, sie hängen an der Eigenschaft und nicht am Behälter.

Warum das nötig ist, in welcher Reihenfolge das Template sucht, die Variante mit anonymem Objekt und wie das Feld beim Absenden heisst (auswahl.Anrede), steht ausführlich im Beispiel «DropdownList ohne View-Model» auf der Seite DropdownList.

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(UiEditor.Basis.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(UiEditor.Basis.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
`EditorFor(m => lokal.Anrede, lokal)`	Liste ohne View-Model über `additionalViewData`, siehe «RadioList ohne View-Model»

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.AnredeSpalte)
</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(UiEditor.Basis.RadioList)]
        [AdditionalMetadata("Selection", nameof(Anreden))]
        [AdditionalMetadata("Direction", FlexDirection.Column)]
        public string AnredeSpalte { 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(UiEditor.Basis.RadioList)]
[AdditionalMetadata("Selection", nameof(Anreden))]
[AdditionalMetadata("Direction", FlexDirection.Column)]
public string AnredeSpalte { 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.