Textarea (DisplayTemplate)

Konfigurationen des TextareaDisplay-DisplayTemplates. Es stellt einen mehrzeiligen Text schreibgeschützt dar; Zeilenumbrüche werden als <br> gerendert (Einbindung über @Html.DisplayFor(...) mit [UIHint(UiDisplay.Basis.Textarea)]).

Textarea (Grundfall)

Mehrzeiliger Text schreibgeschützt als Schlüssel/Wert-Paar. Die Zeilenumbrüche des Werts erscheinen auch in der Anzeige, sofern sie als \r\n darin stehen.

@model DisplayTextareaBeispielViewModel

@Html.DisplayFor(m => m.Text)

using System.ComponentModel.DataAnnotations;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Mehrzeiliger Text als schreibgeschützte Anzeige.
    /// </summary>
    /// <remarks>
    /// Die Zeilen sind bewusst mit <c>\r\n</c> getrennt: Das Template wandelt nur diese Folge in
    /// ein <c>&lt;br /&gt;</c> um. Ein Text mit blossem <c>\n</c> erschiene einzeilig, siehe die
    /// Anleitung zu diesem Beispiel.
    /// </remarks>
    public class DisplayTextareaBeispielViewModel
    {
        [Display(Name = "Weitere Bemerkungen")]
        [UIHint(UiDisplay.Basis.Textarea)]
        public string Text { get; set; } = "Erste Zeile\r\nZweite Zeile\r\nDritte Zeile";
    }
}

Darstellung

Weitere Bemerkungen

Erste Zeile
Zweite Zeile
Dritte Zeile

Das TextareaDisplay-DisplayTemplate stellt einen mehrzeiligen Text schreibgeschützt als Schlüssel/Wert-Paar dar. Die Verwendung ist analog zu den EditorTemplates, konfiguriert wird über die Data Annotations.

[Display(Name = "Weitere Bemerkungen")]
[UIHint(UiDisplay.Basis.Textarea)]
public string Text { get; set; } = "Erste Zeile\r\nZweite Zeile\r\nDritte Zeile";

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

Zeilenumbrüche

Umgebrochen wird nur bei \r\n. Das Template gibt den Wert über DisplayMitHtmlBreaksFor aus: Der Text wird HTML-kodiert, danach wird jedes \r\n durch ein <br /> ersetzt. Ein Text, dessen Zeilen nur mit \n getrennt sind, bleibt deshalb einzeilig, das blosse Zeichen fällt in HTML mit dem folgenden Leerraum zusammen.

Wo das auffällt:

Herkunft des Werts	Umbruch sichtbar
aus einem `<textarea>` abgeschickt	ja, der Browser sendet `\r\n`
Zeichenkette im Code mit `\r\n`	ja
Zeichenkette im Code mit `\n`	nein, alles auf einer Zeile
`Environment.NewLine`	nur unter Windows, dort ist es `\r\n`; auf Linux `\n`
aus der Datenbank	je nachdem, wie er dort abgelegt wurde

Kommt der Text aus einer Quelle, die das nicht garantiert, vor der Anzeige normalisieren:

this.Text = rohText.Replace("\r\n", "\n")
    .Replace("\n", "\r\n");

Kodiert wird vor dem Ersetzen, HTML im Wert wird also angezeigt und nicht ausgeführt; nur das <br /> des Templates selbst wirkt als Auszeichnung.

Weitere Konfigurationen

Konfiguration	Wirkung
`[Display(Name = "…")]`	Beschriftung; ohne Angabe erscheint an ihrer Stelle «-»
`[DisplayAlignment(Alignment.Horizontal)]`	Beschriftung und Wert nebeneinander, siehe Beispiel «Textarea horizontal»; ohne Angabe gilt `Vertical`
`[HelpText(Name = "…")]`	Info-Icon hinter der Beschriftung, der Text erscheint als Tooltip
`[AdditionalMetadata(UiMetadata.Basis.ValueColorClass, "…")]`	Hinterlegt den Wert grau (`bg-light`). Das Template prüft nur, ob der Schlüssel gesetzt ist; der Wert selbst wird nicht ausgewertet. Voraussetzung: der `AdditionalMetadataProvider`, den `AddFmhWidgetOptions()` registriert

Ist der Wert leer, erscheint «-» statt einer leeren Zeile. Dasselbe gilt für eine fehlende Beschriftung.

Textarea horizontal

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

@model DisplayTextareaHorizontalBeispielViewModel

@* 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.Text)

@Html.DisplayFor(m => m.TextLangesLabel)

using System.ComponentModel.DataAnnotations;
using FMH.Komponente.Basis.Ui.Validation.DataAnnotation;

namespace FMH.Komponente.WebUI.Areas.Basis.Models
{
    /// <summary>
    /// Zwei Felder nebeneinander gestellt; die zweite Beschriftung ist bewusst zu lang für die
    /// Schlüsselspalte und zeigt die Kürzung mit «…».
    /// </summary>
    public class DisplayTextareaHorizontalBeispielViewModel
    {
        [Display(Name = "Weitere Bemerkungen")]
        [UIHint(UiDisplay.Basis.Textarea)]
        [DisplayAlignment(Alignment.Horizontal)]
        public string Text { get; set; } = "Erste Zeile\r\nZweite Zeile";

        [Display(Name = "Bemerkungen zur Rückweisung des Gesuchs")]
        [UIHint(UiDisplay.Basis.Textarea)]
        [DisplayAlignment(Alignment.Horizontal)]
        public string TextLangesLabel { get; set; } = "Unterlagen unvollständig.";
    }
}

Darstellung

Weitere Bemerkungen

Erste Zeile
Zweite Zeile

Bemerkungen zur Rückweisung des Gesuchs

Unterlagen unvollständig.

Über [DisplayAlignment(Alignment.Horizontal)] stehen Beschriftung und Wert nebeneinander statt untereinander, der Container bekommt dafür die Klasse siwf-display-horizontal.

[Display(Name = "Weitere Bemerkungen")]
[UIHint(UiDisplay.Basis.Textarea)]
[DisplayAlignment(Alignment.Horizontal)]
public string Text { get; set; } = "Erste Zeile\r\nZweite Zeile";

Das Attribut wird direkt aus den Model-Metadaten gelesen (ToDisplayAlignment()), ein zusätzlicher Provider ist dafür nicht nötig. An den Zeilenumbrüchen ändert die Ausrichtung nichts, es gilt dieselbe Regel wie im Grundfall.

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. Den vollen Text zeigt ein Tooltip über 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.