CheckInfo (DisplayTemplate)

Konfigurationen des CheckInfoDisplay-DisplayTemplates. Es stellt einen bool-Wert als Icon (Haken/Kreuz) mit Beschriftung dar (Einbindung über @Html.DisplayFor(...) mit [UIHint(UiDisplay.Basis.CheckInfo)]).

CheckInfo (Grundfall)

Ein bool als Icon mit Beschriftung: true zeigt den Haken, false das Kreuz. Derselbe Aufruf, das Template entscheidet am Wert.

@model DisplayCheckInfoBeispielViewModel

@* Beide Zustände nebeneinander: Das Template wählt das Icon allein aus dem Wert, der Aufruf ist
   für true und false derselbe. *@
@Html.DisplayFor(m => m.JaWert)

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

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    public class DisplayCheckInfoBeispielViewModel
    {
        [Display(Name = "Vertrag akzeptiert")]
        [UIHint(UiDisplay.Basis.CheckInfo)]
        public bool JaWert { get; set; } = true;

        [Display(Name = "Newsletter abonniert")]
        [UIHint(UiDisplay.Basis.CheckInfo)]
        public bool NeinWert { get; set; } = false;
    }
}

Darstellung

done Vertrag akzeptiert
close Newsletter abonniert

Das CheckInfoDisplay-DisplayTemplate stellt einen bool als Icon mit Beschriftung dar: bei true ein Haken (Done), bei false ein Kreuz (Close). Die Verwendung ist analog zu den EditorTemplates, konfiguriert wird über die Data Annotations.

[Display(Name = "Vertrag akzeptiert")]
[UIHint(UiDisplay.Basis.CheckInfo)]
public bool JaWert { get; set; } = true;

[Display(Name = "Newsletter abonniert")]
[UIHint(UiDisplay.Basis.CheckInfo)]
public bool NeinWert { get; set; }

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

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

Der Aufruf ist für beide Zustände derselbe, das Template wählt das Icon allein aus dem Wert. Gedacht ist das für Prüflisten und Übersichten, in denen mehrere Ja/Nein-Angaben untereinander stehen.

Weitere Konfigurationen

Konfiguration Wirkung
[Display(Name = "…")] Beschriftung neben dem Icon
[HelpText(Name = "…")] Zusätzliches Info-Icon dahinter, der Text erscheint als Tooltip
[AdditionalMetadata(UiMetadata.Basis.IconTrue, IconType.ThumbUp)] Eigenes Icon für true, siehe Beispiel «CheckInfo mit eigenen Icons»
[AdditionalMetadata(UiMetadata.Basis.IconFalse, IconType.ThumbDown)] Eigenes Icon für false, gleiches Beispiel
[DisplayFromViewModel(nameof(Bezeichnung))] Beschriftung aus einer Eigenschaft des ViewModels, siehe Beispiel «CheckInfo mit Text aus dem ViewModel»

CheckInfo mit eigenen Icons

Daumen hoch statt Haken, Daumen runter statt Kreuz. Beide Zustände stehen als AdditionalMetadata am Modell.

@model DisplayCheckInfoIconsBeispielViewModel

@* Die Icons stehen am Modell, der Aufruf bleibt unverändert. *@
@Html.DisplayFor(m => m.IstOk)

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

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>
    /// CheckInfo mit eigenen Icons: Beide Zustände sind einzeln gesetzt, gerendert wird immer nur
    /// der, den der Wert der Eigenschaft trifft.
    /// </summary>
    public class DisplayCheckInfoIconsBeispielViewModel
    {
        [Display(Name = "Super gemacht")]
        [UIHint(UiDisplay.Basis.CheckInfo)]
        [AdditionalMetadata(UiMetadata.Basis.IconTrue, IconType.ThumbUp)]
        [AdditionalMetadata(UiMetadata.Basis.IconFalse, IconType.ThumbDown)]
        public bool IstOk { get; set; } = true;

        [Display(Name = "War nicht gut")]
        [UIHint(UiDisplay.Basis.CheckInfo)]
        [AdditionalMetadata(UiMetadata.Basis.IconTrue, IconType.ThumbUp)]
        [AdditionalMetadata(UiMetadata.Basis.IconFalse, IconType.ThumbDown)]
        public bool IstSchlecht { get; set; }
    }
}

Darstellung

thumb_up_off_alt Super gemacht
thumb_down_off_alt War nicht gut

Über [AdditionalMetadata] lassen sich die Icons selbst bestimmen, je eines für true und für false:

[Display(Name = "Super gemacht")]
[UIHint(UiDisplay.Basis.CheckInfo)]
[AdditionalMetadata(UiMetadata.Basis.IconTrue, IconType.ThumbUp)]
[AdditionalMetadata(UiMetadata.Basis.IconFalse, IconType.ThumbDown)]
public bool IstOk { get; set; } = true;

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

Drei Dinge sind dabei zu wissen:

  • Beide Angaben sind unabhängig. Wer nur MetaDataIconTrue setzt, bekommt für false weiterhin das Kreuz. Gerendert wird ohnehin immer nur das Icon des Zustands, den der Wert trifft.
  • Der Wert wird als IconType gelesen. Das Template löst ihn über Enum.TryParse auf, IconType.ThumbUp und die Zeichenkette nameof(IconType.ThumbUp) sind also gleichwertig. Passt der Wert zu keinem Eintrag, bleibt es beim Standard-Icon, ohne Fehler.
  • Voraussetzung ist der AdditionalMetadataProvider. Er trägt die Metadaten in ModelMetadata.AdditionalValues ein und wird von AddFmhWidgetOptions() registriert. Ohne ihn erscheinen die Standard-Icons. Das Attribut liegt im Paket FMH.Komponente.Basis.Validierung, AddFmhWidgetOptions() in FMH.Komponente.Basis.

CheckInfo mit Text aus dem ViewModel

Die Beschriftung kommt über DisplayFromViewModel aus einer zweiten Eigenschaft, für Prüflisten aus Konfiguration oder Datenbank.

@model DisplayCheckInfoTextBeispielViewModel

@* Die Beschriftung kommt aus der Eigenschaft Bezeichnung desselben ViewModels. *@
@Html.DisplayFor(m => m.IstDynamisch)

using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// CheckInfo mit dynamischer Beschriftung: Der Text steht nicht im Attribut, sondern in einer
    /// zweiten Eigenschaft des ViewModels.
    /// </summary>
    /// <remarks>
    /// Der übliche Fall sind Prüflisten, deren Punkte aus einer Konfiguration oder der Datenbank
    /// kommen: Der Text wechselt je Datensatz, ein <c>[Display(Name = "…")]</c> ist deshalb nicht
    /// möglich.
    /// </remarks>
    public class DisplayCheckInfoTextBeispielViewModel
    {
        /// <summary>
        /// Holt oder setzt die Beschriftung. In einem Projekt kommt sie aus der Datenbank.
        /// </summary>
        public string Bezeichnung { get; set; } = "Facharzttitel im Register hinterlegt";

        [UIHint(UiDisplay.Basis.CheckInfo)]
        [DisplayFromViewModel(nameof(Bezeichnung))]
        public bool IstDynamisch { get; set; } = true;
    }
}

Darstellung

done Facharzttitel im Register hinterlegt

Wechselt die Beschriftung je Datensatz, steht sie nicht im Attribut, sondern in einer zweiten Eigenschaft des ViewModels. [DisplayFromViewModel] nennt diese Eigenschaft, [Display] wird damit überflüssig:

public string Bezeichnung { get; set; } = "Facharzttitel im Register hinterlegt";

[UIHint(UiDisplay.Basis.CheckInfo)]
[DisplayFromViewModel(nameof(Bezeichnung))]
public bool IstDynamisch { get; set; } = true;

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

Aufgelöst wird der Text zur Renderzeit am umschliessenden Modell. Das Attribut wirkt deshalb nur, wenn die Eigenschaft Teil eines ViewModels ist, nicht bei einem bool, der für sich allein an DisplayFor geht. Findet das Template die genannte Eigenschaft nicht, bleibt die Beschriftung leer, das Icon erscheint trotzdem.

Dasselbe Attribut steuert auch die Beschriftung von Eingabefeldern, siehe EditorTemplates › Label aus dem ViewModel.