Basis – Auswahlbox (DisplayTemplate)

Auswahlbox (Grundfall)

Titel und Text als Karte. Ohne Icon-Metadate und ohne NavigationUrl bleibt es bei der reinen Darstellung, die Linkdarstellung unterdrückt das Template.

@model DisplayAuswahlboxBeispielViewModel

@Html.DisplayFor(m => m.Auswahl)

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    public class DisplayAuswahlboxBeispielViewModel
    {
        [Display(Name = "Formular XY")]
        [UIHint(UiDisplay.Basis.Auswahlbox)]
        public string Auswahl { get; set; } = "Kurzbeschreibung der Auswahl.";
    }
}

Darstellung

Formular XY

Kurzbeschreibung der Auswahl.

Das AuswahlboxDisplay-DisplayTemplate stellt einen Wert als Karte dar: der Anzeigename als Titel (<h3>), darunter der Wert. Gedacht für Einstiegskacheln, aus denen jemand eine Auswahl trifft. Eingebunden wird es wie jedes DisplayTemplate über [UIHint] am Modell und Html.DisplayFor(...) in der View, die Verwendung ist also analog zu den EditorTemplates.

[Display(Name = "Formular XY")]
[UIHint(UiDisplay.Basis.Auswahlbox)]
public string Auswahl { get; set; } = "Kurzbeschreibung der Auswahl.";

@Html.DisplayFor(m => m.Auswahl)

Ohne Icon-Metadate und ohne NavigationUrl bleibt es bei dieser Darstellung: Die Karte ist kein Link, das Template unterdrückt die Linkdarstellung und setzt den Mauszeiger auf default.

Weitere Konfigurationen

Konfiguration	Wirkung
`[Display(Name = "…")]`	Titel der Karte
`[AdditionalMetadata(UiMetadata.Basis.IconTyp, IconType.LocalPharmacy)]`	Icon links neben Titel und Text, siehe Beispiel «Auswahlbox mit Icon»
`@Html.DisplayFor(m => m.Auswahl, new { NavigationUrl = "…", Target = "_blank" })`	Macht die ganze Karte zu einem Link, siehe Beispiel «Auswahlbox mit Navigation»

Auswahlbox mit Icon

Das Icon steht als AdditionalMetadata am Modell und wird links neben Titel und Text gerendert.

@model DisplayAuswahlboxIconBeispielViewModel

@* Ohne NavigationUrl bleibt die Karte eine Karte: Das Template unterdrückt die Linkdarstellung. *@
@Html.DisplayFor(m => m.Fmh)

using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;
using FMH.Komponente.Infrastruktur.Schnittstellen.Ui;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Auswahlbox mit Icon: Der Icon-Typ steht als zusätzliche Metadate an der Eigenschaft und
    /// erreicht das DisplayTemplate über den AdditionalMetadataProvider.
    /// </summary>
    public class DisplayAuswahlboxIconBeispielViewModel
    {
        [Display(Name = "FMH Swiss Medical Association")]
        [UIHint(UiDisplay.Basis.Auswahlbox)]
        [AdditionalMetadata(UiMetadata.Basis.IconTyp, IconType.LocalPharmacy)]
        public string Fmh { get; set; } = "Die Detailbeschreibung steht hier.";
    }
}

Darstellung

FMH Swiss Medical Association

Die Detailbeschreibung steht hier.

Das Icon steht am Modell, nicht am Aufruf: [AdditionalMetadata] mit dem Schlüssel UiMetadata.Basis.IconTyp und einem Wert aus IconType.

[Display(Name = "FMH Swiss Medical Association")]
[UIHint(UiDisplay.Basis.Auswahlbox)]
[AdditionalMetadata(UiMetadata.Basis.IconTyp, IconType.LocalPharmacy)]
public string Fmh { get; set; } = "Die Detailbeschreibung steht hier.";

@Html.DisplayFor(m => m.Fmh)

Zwei Dinge sind dabei zu wissen:

Der Wert wird als IconType gelesen. Das Template löst ihn über Enum.TryParse auf; passt der Wert zu keinem Eintrag, bleibt die Karte einfach ohne Icon, ohne Fehler. Neben dem Enum-Wert ist deshalb auch die Zeichenkette "LocalPharmacy" zulässig.
Voraussetzung ist der AdditionalMetadataProvider. Er trägt die Metadaten in ModelMetadata.AdditionalValues ein und wird von AddFmhWidgetOptions() registriert. Ohne ihn erscheint die Karte ohne Icon. Das Attribut liegt im Paket FMH.Komponente.Basis.Validierung, AddFmhWidgetOptions() in FMH.Komponente.Basis.

Icon und Navigation lassen sich frei kombinieren, beide Angaben sind unabhängig voneinander.

Auswahlbox mit Navigation

Drei Karten als Einstiegsliste: NavigationUrl macht die ganze Karte zum Link, Target öffnet die erste in einem neuen Fenster.

@model DisplayAuswahlboxNavigationBeispielViewModel

@* Die Adresse steht nicht am Modell, sondern als AdditionalViewData am Aufruf: NavigationUrl macht
   die ganze Karte zum Link, Target steuert das Zielfenster. Ohne Target bleibt der Aufruf im
   gleichen Fenster. *@
@Html.DisplayFor(m => m.Fmh, new { NavigationUrl = "https://www.fmh.ch", Target = "_blank" })

@Html.DisplayFor(m => m.Siwf, new { NavigationUrl = "https://www.siwf.ch" })

@Html.DisplayFor(m => m.Idp, new { NavigationUrl = "https://login.fmh.ch" })

using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;
using FMH.Komponente.Infrastruktur.Schnittstellen.Ui;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Mehrere Auswahlboxen als Einstiegsliste. Am Modell steht nur, was die Karte zeigt
    /// (Titel, Text, Icon); wohin sie führt, gibt erst der Aufruf in der View an.
    /// </summary>
    public class DisplayAuswahlboxNavigationBeispielViewModel
    {
        [Display(Name = "FMH Swiss Medical Association")]
        [UIHint(UiDisplay.Basis.Auswahlbox)]
        [AdditionalMetadata(UiMetadata.Basis.IconTyp, IconType.LocalPharmacy)]
        public string Fmh { get; set; } = "Standesorganisation der Ärzteschaft, öffnet in einem neuen Fenster.";

        [Display(Name = "Anmeldung")]
        [UIHint(UiDisplay.Basis.Auswahlbox)]
        [AdditionalMetadata(UiMetadata.Basis.IconTyp, IconType.Login)]
        public string Idp { get; set; } = "Zentrale Anmeldung für die FMH-Anwendungen.";

        [Display(Name = "SIWF")]
        [UIHint(UiDisplay.Basis.Auswahlbox)]
        [AdditionalMetadata(UiMetadata.Basis.IconTyp, IconType.School)]
        public string Siwf { get; set; } = "Schweizerisches Institut für ärztliche Weiter- und Fortbildung.";
    }
}

Darstellung

Wohin die Karte führt, steht nicht am Modell, sondern als AdditionalViewData am Aufruf. Das ist die einzige Abweichung vom Standard-Ansatz der DisplayTemplates. Die Eigenschaft heisst NavigationUrl, das optionale Zielfenster Target:

@Html.DisplayFor(m => m.Fmh, new { NavigationUrl = "https://www.fmh.ch", Target = "_blank" })

@Html.DisplayFor(m => m.Siwf, new { NavigationUrl = "https://www.siwf.ch" })

@Html.DisplayFor(m => m.Idp, new { NavigationUrl = "https://login.fmh.ch" })

Mit gesetzter NavigationUrl legt das Template ein <a> um die ganze Karte, nicht nur um den Titel. Fehlt Target, bleibt der Aufruf im gleichen Fenster.

Optionen

Angabe	Wirkung
`NavigationUrl`	Ziel des Links; fehlt sie, entfällt die Linkdarstellung
`Target`	Wert des `target`-Attributs, z. B. `_blank`; leer oder fehlend heisst gleiches Fenster

Die Schlüssel sind als Konstanten hinterlegt (UiMetadata.Basis.NavigationUrl, UiMetadata.Basis.NavigationTarget), im anonymen Objekt der View sind sie als NavigationUrl und Target zu schreiben.