Telefon (DisplayTemplate)

Konfigurationen des TelefonDisplay-DisplayTemplates. Es stellt eine Telefonnummer schreibgeschützt als tel:-Link mit Icon dar (Einbindung über @Html.DisplayFor(...) mit [UIHint(UiDisplay.Basis.Telefon)]). Ohne Wert erscheint «Unbekannt».

Telefon (Grundfall)

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

@model DisplayTelefonBeispielViewModel

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

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Telefonnummer als schreibgeschützte Anzeige. Mehr als [UIHint] und [Display] braucht der
    /// Grundfall nicht, den tel:-Link und das Icon bringt das DisplayTemplate mit.
    /// </summary>
    public class DisplayTelefonBeispielViewModel
    {
        [Display(Name = "Telefon")]
        [UIHint(UiDisplay.Basis.Telefon)]
        public string Telefon { get; set; } = "+41 44 123 45 67";
    }
}

Darstellung

Das TelefonDisplay-DisplayTemplate stellt eine Telefonnummer schreibgeschützt dar: links die Beschriftung, rechts die Nummer als tel:-Link mit Telefon-Icon. Die Verwendung ist analog zu den EditorTemplates, konfiguriert wird über die Data Annotations.

[Display(Name = "Telefon")]
[UIHint(UiDisplay.Basis.Telefon)]
public string Telefon { get; set; } = "+41 44 123 45 67";

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

Angezeigt und gewählt wird nicht dasselbe. Sichtbar bleibt die Nummer so, wie sie im Feld steht, mit Leerzeichen und Gruppierung. Für den tel:-Link entfernt das Template Leerzeichen und Backslashes, damit Telefonie-Programme die Nummer annehmen. Gerendert wird ein Schlüssel/Wert-Paar (siwf-key-value-pair), dieselbe Gliederung wie bei Textbox und E-Mail.

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.Telefon, new { NurDaten = true }) Nur der Link, ohne Beschriftung, siehe Beispiel «Telefon ohne Beschriftung»

Was zu beachten ist

  • Das Template prüft nicht. Es zeigt, was im Feld steht, auch wenn das keine wählbare Nummer ist. Die Prüfung gehört auf die Erfassungsseite.
  • Die innere Kennung ist fest. Der Wert steht in einem <span id="fsmeta_Telefon">, unabhängig vom Namen der Eigenschaft. Zwei Telefon-Anzeigen auf derselben Seite tragen diese Id also doppelt; wer ein Feld per Skript sucht, nimmt die Id aus Html.IdForModel(), die am Wert-Container hängt.

Telefon horizontal

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

@model DisplayTelefonHorizontalBeispielViewModel

@* 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.Telefon)

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

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

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Zwei Telefonnummern nebeneinander gestellt; die zweite Beschriftung ist bewusst zu lang
    /// für die Schlüsselspalte und zeigt die Kürzung mit «…».
    /// </summary>
    public class DisplayTelefonHorizontalBeispielViewModel
    {
        [Display(Name = "Telefon")]
        [UIHint(UiDisplay.Basis.Telefon)]
        [DisplayAlignment(Alignment.Horizontal)]
        public string Telefon { get; set; } = "+41 44 123 45 67";

        [Display(Name = "Telefon für Rückfragen am Nachmittag")]
        [UIHint(UiDisplay.Basis.Telefon)]
        [DisplayAlignment(Alignment.Horizontal)]
        public string TelefonPrivat { get; set; } = "+41 79 987 65 43";
    }
}

Darstellung

Telefon
Telefon für Rückfragen am Nachmittag

Ü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 = "Telefon")]
[UIHint(UiDisplay.Basis.Telefon)]
[DisplayAlignment(Alignment.Horizontal)]
public string Telefon { 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.

Telefon ohne Beschriftung

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

@model DisplayTelefonBeispielViewModel

@* 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.Telefon, new { NurDaten = true })

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Telefonnummer als schreibgeschützte Anzeige. Mehr als [UIHint] und [Display] braucht der
    /// Grundfall nicht, den tel:-Link und das Icon bringt das DisplayTemplate mit.
    /// </summary>
    public class DisplayTelefonBeispielViewModel
    {
        [Display(Name = "Telefon")]
        [UIHint(UiDisplay.Basis.Telefon)]
        public string Telefon { get; set; } = "+41 44 123 45 67";
    }
}

Darstellung

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

@Html.DisplayFor(m => m.Telefon, 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.

Telefon ohne Wert

Ohne Nummer schreibt das Template den lokalisierten Text «Unbekannt» statt einer leeren Zeile.

@model DisplayTelefonLeerBeispielViewModel

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

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Dasselbe Modell ohne Wert: Die Eigenschaft bleibt bewusst leer, damit die Demo zeigt, was
    /// das Template in diesem Fall schreibt.
    /// </summary>
    public class DisplayTelefonLeerBeispielViewModel
    {
        [Display(Name = "Telefon")]
        [UIHint(UiDisplay.Basis.Telefon)]
        public string Telefon { get; set; }
    }
}

Darstellung

Ist keine Nummer vorhanden (null oder leer), schreibt das Template den lokalisierten Text «Unbekannt» statt einer leeren Zeile. Das Modell unterscheidet sich vom Grundfall nur darin, dass die Eigenschaft keinen Wert trägt:

[Display(Name = "Telefon")]
[UIHint(UiDisplay.Basis.Telefon)]
public string Telefon { get; set; } // ohne Wert

Der Text kommt aus _FmhWebMvc.Unbekannt und ist in allen vier Sprachen hinterlegt. Zwei Punkte dazu:

  • Der Link bleibt stehen. «Unbekannt» ist die Beschriftung eines tel:-Links ohne Nummer, das Icon erscheint weiterhin. Soll bei fehlender Nummer gar nichts erscheinen, blendet die aufrufende Seite das Feld selbst aus.
  • EmailDisplay verhält sich anders. Dort gibt es keinen Ersatztext, ein leeres Feld rendert einen mailto:-Link ohne Text. Die beiden Templates sind sich in allem übrigen sehr ähnlich, in diesem Punkt nicht.