E-Mail (DisplayTemplate)

Konfigurationen des EmailDisplay-DisplayTemplates. Es stellt eine E-Mail-Adresse schreibgeschützt als mailto:-Link mit Icon dar (Einbindung über @Html.DisplayFor(...) mit [UIHint(UiDisplay.Basis.Email)]).

E-Mail (Grundfall)

Die Adresse schreibgeschützt als Schlüssel/Wert-Paar: Beschriftung, daneben der mailto:-Link mit Icon. Konfiguriert wird allein über die Data Annotations.

@model DisplayEmailBeispielViewModel

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

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// E-Mail-Adresse als schreibgeschützte Anzeige. Mehr als [UIHint] und [Display] braucht der
    /// Grundfall nicht, den mailto:-Link und das Icon bringt das DisplayTemplate mit.
    /// </summary>
    public class DisplayEmailBeispielViewModel
    {
        [Display(Name = "E-Mail")]
        [UIHint(UiDisplay.Basis.Email)]
        public string Email { get; set; } = "[email protected]";
    }
}

Darstellung

Das EmailDisplay-DisplayTemplate stellt eine E-Mail-Adresse schreibgeschützt dar: links die Beschriftung, rechts die Adresse als mailto:-Link mit E-Mail-Icon. Die Verwendung ist analog zu den EditorTemplates, konfiguriert wird über die Data Annotations.

[Display(Name = "E-Mail")]
[UIHint(UiDisplay.Basis.Email)]
public string Email { get; set; } = "[email protected]";

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

Gerendert wird ein Schlüssel/Wert-Paar (siwf-key-value-pair), dieselbe Gliederung wie bei Textbox und Telefon. Der Link trägt die Adresse zusätzlich als title, damit sie im Tooltip vollständig lesbar bleibt, wenn die Spalte sie abschneidet.

Weitere Konfigurationen

Konfiguration Wirkung
[Display(Name = "…")] Beschriftung; ohne Angabe steht der Eigenschaftsname
[DisplayAlignment(Alignment.Horizontal)] Beschriftung und Wert nebeneinander statt untereinander, siehe DisplayTemplates › Textbox
[HelpText(Name = "…")] Info-Icon hinter der Beschriftung, der Text erscheint als Tooltip
@Html.DisplayFor(m => m.Email, new { NurDaten = true }) Nur der Link, ohne Beschriftung, siehe Beispiel «E-Mail ohne Beschriftung»

Was zu beachten ist

  • Das Template prüft nicht. Es zeigt an, was im Feld steht, auch wenn das keine gültige Adresse ist. Geprüft wird auf der Erfassungsseite mit [Email], siehe Basis.Validierung › Validierung › Email.
  • Ein leerer Wert bleibt ein Link. Anders als TelefonDisplay, das dann «Unbekannt» schreibt, rendert EmailDisplay ein mailto: ohne Adresse; sichtbar bleibt nur das Icon. Soll bei fehlender Adresse gar nichts erscheinen, blendet die aufrufende Seite das Feld selbst aus.
  • Die innere Kennung ist fest. Der Wert steht in einem <span id="fsmeta_Email">, unabhängig vom Namen der Eigenschaft. Zwei E-Mail-Anzeigen auf derselben Seite tragen diese Id also doppelt; wer ein Feld per Skript sucht, nimmt die äussere Id aus Html.IdForModel().

E-Mail horizontal

Beschriftung und Wert nebeneinander über [DisplayAlignment(Alignment.Horizontal)]; das zweite Feld zeigt, was bei einer zu langen Beschriftung passiert.

@model DisplayEmailHorizontalBeispielViewModel

@* Zwei Felder untereinander, beide horizontal ausgerichtet: So wird sichtbar, dass die
   Schlüsselspalte gleich breit bleibt und eine zu lange Beschriftung gekürzt wird. *@
@Html.DisplayFor(m => m.Email)

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

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

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Zwei E-Mail-Anzeigen nebeneinander gestellt; die zweite Beschriftung ist bewusst zu lang
    /// für die Schlüsselspalte und zeigt die Kürzung mit «…».
    /// </summary>
    public class DisplayEmailHorizontalBeispielViewModel
    {
        [Display(Name = "E-Mail")]
        [UIHint(UiDisplay.Basis.Email)]
        [DisplayAlignment(Alignment.Horizontal)]
        public string Email { get; set; } = "[email protected]";

        [Display(Name = "E-Mail für Rechnungen und Mahnungen")]
        [UIHint(UiDisplay.Basis.Email)]
        [DisplayAlignment(Alignment.Horizontal)]
        public string EmailRechnung { get; set; } = "[email protected]";
    }
}

Darstellung

E-Mail
markunread [email protected]
E-Mail für Rechnungen und Mahnungen
markunread [email protected]

Über [DisplayAlignment(Alignment.Horizontal)] stehen Beschriftung und Wert nebeneinander statt untereinander; der Container bekommt dafür die Klasse siwf-display-horizontal. Das Attribut wird direkt aus den Model-Metadaten gelesen (ToDisplayAlignment()), ein zusätzlicher Provider ist dafür nicht nötig.

[Display(Name = "E-Mail")]
[UIHint(UiDisplay.Basis.Email)]
[DisplayAlignment(Alignment.Horizontal)]
public string Email { get; set; }

Was bei langen Beschriftungen passiert. Die Schlüsselspalte ist eine Flex-Spalte mit min-width: 100px und white-space: nowrap; eine zu lange Beschriftung wird abgeschnitten und mit «…» beendet, statt die Zeile zu sprengen. Den vollen Text zeigt ein Tooltip: Die Spalte trägt die Klasse fmh-grid-ellipsis, die initGridEllipsisTooltip() aus dem Skript-Bundle der Basis auswertet. Das zweite Feld im Beispiel ist genau dafür da.

Dieselbe Ausrichtung kennen TextboxDisplay, TextareaDisplay, EmailDisplay und TelefonDisplay, jeweils mit einem eigenen Beispiel auf deren Demoseite. AuswahlboxDisplay und CheckInfoDisplay werten das Attribut nicht aus.

E-Mail ohne Beschriftung

Nur der Link, ohne Schlüsselspalte, über die zusätzliche ViewData NurDaten = true. Für Tabellenzellen und enge Layouts.

@model DisplayEmailBeispielViewModel

@* NurDaten ist keine Angabe am Modell, sondern AdditionalViewData am Aufruf: Dasselbe Modell
   lässt sich damit an einer Stelle mit und an einer anderen ohne Beschriftung zeigen. *@
@Html.DisplayFor(m => m.Email, new { NurDaten = true })

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// E-Mail-Adresse als schreibgeschützte Anzeige. Mehr als [UIHint] und [Display] braucht der
    /// Grundfall nicht, den mailto:-Link und das Icon bringt das DisplayTemplate mit.
    /// </summary>
    public class DisplayEmailBeispielViewModel
    {
        [Display(Name = "E-Mail")]
        [UIHint(UiDisplay.Basis.Email)]
        public string Email { get; set; } = "[email protected]";
    }
}

Darstellung

Mit der zusätzlichen ViewData NurDaten = true entfällt die Schlüsselspalte, übrig bleibt der Link mit Icon:

@Html.DisplayFor(m => m.Email, new { NurDaten = true })

Gedacht für Tabellenzellen und enge Layouts, in denen die Beschriftung bereits als Spaltentitel dasteht. Die Angabe steht am Aufruf, nicht am Modell: Dasselbe ViewModel lässt sich damit an einer Stelle mit und an einer anderen ohne Beschriftung zeigen.

Der Container trägt dann zusätzlich die Klasse siwf-key-value-pair--only-value. [DisplayAlignment] und [HelpText] wirken in diesem Modus nicht, beide gehören zur Beschriftung.