Alert

Der AlertBuilder (Fmh.Alert(...)) zeigt eine Meldung als Bootstrap-Toast unten in der Seitenmitte, mit Icon je Meldungsart, optionalem Schliessen-Knopf und optionalem automatischem Ausblenden. Der übliche Weg führt über AddAlert(...) im Controller und die Ausgabe im Layout. Für Meldungen im Browser, etwa nach einem Ajax-Aufruf, gibt es die Skript-Funktion fmhAlert(...).

Meldung als Toast

Der Toast erscheint unten in der Seitenmitte, sobald die Seite geladen ist. Jede weitere Meldung landet an derselben Position und verdeckt die erste.

@using FMH.Komponente.Basis.Ui.Feedback.Alert

@* Der Builder gibt an dieser Stelle nichts aus: Das Toast-Markup landet über den BodyPlacer am
   Ende des Body, das Anzeige-Skript über die Skript-Sammlung des Layouts. Die Position ist fest
   (unten, mittig) – deshalb steht auf dieser Seite nur ein Beispiel. *@

@Html.Fmh(Fmh.Alert("Die Angaben wurden gespeichert.", AlertType.Success))

<p class="mb-0">Der Toast erscheint unten in der Seitenmitte. Ohne <code>CanAutoHide()</code> bleibt
    er stehen, bis er über das Kreuz geschlossen wird – Seite neu laden bringt ihn zurück.</p>

Darstellung

Der Toast erscheint unten in der Seitenmitte. Ohne CanAutoHide() bleibt er stehen, bis er über das Kreuz geschlossen wird – Seite neu laden bringt ihn zurück.

Der AlertBuilder wird über Fmh.Alert(...) erzeugt und mit @Html.Fmh(...) gerendert. Er zeigt eine Meldung als Bootstrap-Toast unten in der Seitenmitte, mit Icon je Meldungsart:

@Html.Fmh(Fmh.Alert("Die Angaben wurden gespeichert.", AlertType.Success))

Standardwerte ohne weitere Angabe: Art Success, Schliessen-Knopf an, kein automatisches Ausblenden, Id ein neues Guid.

Methoden

Methode	Erklärung
`Fmh.Alert(text, AlertType)`	Kurzform für `Fmh.Alert().Text(text, art)`.
`.Text(string, AlertType)`	Meldungstext (wird HTML-kodiert) und Art.
`.ShowCloseButton(bool = true)`	Blendet den Schliessen-Knopf ein oder aus.
`.CanAutoHide(bool = true)`	Lässt den Toast nach einer Weile von selbst verschwinden.
`.AutoHideInSeconds(int)`	Wartezeit dafür; Standard 10 Sekunden. Wirkt nur zusammen mit `CanAutoHide()`.
`.Id(string)`	Eigene Id statt des Guid, nötig, wenn der Toast per Skript angesprochen werden soll.

AlertType: Success (Haken), Info (i), Warning (Ausrufezeichen), Danger (Fehler-Icon).

Der übliche Weg: Meldung nach einem Redirect

Nach dem PRG-Muster (Post-Redirect-Get) überlebt die Meldung den Redirect in TempData. Im Controller:

this.AddAlert("Die Angaben wurden gespeichert.", AlertType.Success, autoHide: true, autoHideSeconds: 5);
return this.RedirectToAction(nameof(this.Index));

Und einmalig im Layout:

@if (TempData[AlertSchluessel.Text] != null)
{
    @Html.Fmh(Fmh.Alert(TempData))
}

AddAlert(...) (Erweiterung auf Controller) legt Text, Art, Schliessen-Knopf, Auto-Hide und Wartezeit in TempData ab; Fmh.Alert(ITempDataDictionary) liest sie dort wieder aus und setzt die entsprechenden Optionen. So bleibt die Anzeige an einer Stelle, und jede Action meldet mit einer Zeile.

Wo die Ausgabe landet

Der Builder gibt an der Aufrufstelle nichts aus (HtmlString.Empty):

Das Toast-Markup geht über den BodyPlacer ans Ende des Body, dafür braucht das Layout @Html.RenderBodyPlacer().
Das Anzeige-Skript ($(...).toast("show")) geht in die Skript-Sammlung, dafür braucht das Layout @Html.RenderFmhScripts().

Beides steht in _BodyIncludes.cshtml der Basis-Komponente. Wo im View der Aufruf steht, spielt deshalb keine Rolle.

Was zu beachten ist

Die Position ist fest (unten, mittig). Mehrere Alerts auf derselben Seite erzeugen je einen eigenen Container an derselben Stelle und verdecken sich gegenseitig, daher steht auf dieser Demo-Seite bewusst nur ein Beispiel.
Ohne CanAutoHide() bleibt der Toast stehen, bis er geschlossen wird. Für Erfolgsmeldungen ist automatisches Ausblenden angenehmer, für Fehlermeldungen nicht.
Der Text wird kodiert; Markup darin erscheint als Zeichen.

Meldung per JavaScript

Ohne Server: fmhAlert(text, icon) baut den Toast im Browser, etwa nach einem Ajax-Aufruf. Vorher den Toast aus «Meldung als Toast» schliessen, beide erscheinen an derselben Stelle.

@* fmhAlert(text, icon) ist eine globale Funktion aus fmh-sitesetup.js der Basis-Komponente. Sie
   baut den Toast im Browser, ohne Server: gedacht für Rückmeldungen nach einem Ajax-Aufruf. Die
   Knöpfe dieser Demo rufen sie auf; die Umsetzung steht im Tab "JavaScript". *@

<div class="d-flex gap-2">
    @Html.Fmh(Fmh.Button()
        .Text("Erfolg melden")
        .Type(ButtonType.Button)
        .Size(ButtonSize.Sm)
        .Color(ButtonColor.Success)
        .Attributes(new { data_alert_demo = "erfolg" }))

    @Html.Fmh(Fmh.Button()
        .Text("Fehler melden")
        .Type(ButtonType.Button)
        .Size(ButtonSize.Sm)
        .Color(ButtonColor.Danger)
        .Attributes(new { data_alert_demo = "fehler" }))
</div>

@Html.PostScript(@<script src="~/js/demos/alert-client.js" asp-append-version="true"></script>)

// Demo "Basis › Ui › Feedback › Alert": Meldung im Browser anzeigen.
//
// fmhAlert(text, icon) ist eine globale Funktion aus fmh-sitesetup.js der Basis-Komponente.
// Das Icon ist der Name eines Material-Icons, etwa 'check_circle' für Erfolg oder 'error' für
// einen Fehler. Der Toast erscheint unten in der Seitenmitte und verschwindet nach 10 Sekunden.
//
// In einer echten Anwendung steht der Aufruf im Ergebnis eines Ajax-Aufrufs; hier lösen ihn die
// beiden Knöpfe aus.
document.addEventListener('click', function (event) {
    var knopf = event.target.closest('[data-alert-demo]');
    if (knopf === null) {
        return;
    }

    if (knopf.dataset.alertDemo === 'fehler') {
        fmhAlert('Die Angaben konnten nicht gespeichert werden.', 'error');
    } else {
        fmhAlert('Die Angaben wurden gespeichert.', 'check_circle');
    }
});

// jQuery-Variante zum Beispiel «Meldung per JavaScript» – dasselbe wie im Tab "JavaScript", nur
// mit jQuery geschrieben. Diese Datei wird von der Demo-Seite NICHT geladen; sonst liefe der
// Klick-Handler doppelt. Sie ist als Vorlage zum Übernehmen gedacht.
$(function () {
    // Delegierter Klick: wirkt auch für Knöpfe, die erst später ins DOM kommen (nachgeladene Inhalte).
    $(document).on('click', '[data-alert-demo]', function () {
        if ($(this).data('alert-demo') === 'fehler') {
            fmhAlert('Die Angaben konnten nicht gespeichert werden.', 'error');
        } else {
            fmhAlert('Die Angaben wurden gespeichert.', 'check_circle');
        }

        // In einer echten Anwendung steht fmhAlert() im done()/fail() des Ajax-Aufrufs:
        //
        // $.post('/Antrag/Speichern', daten)
        //     .done(function () { fmhAlert('Die Angaben wurden gespeichert.', 'check_circle'); })
        //     .fail(function (xhr) { fmhAlert(xhr.responseJSON, 'error'); });
    });
});

Darstellung

Für Meldungen ohne Seitenwechsel, etwa nach einem Ajax-Aufruf, gibt es die globale Funktion fmhAlert aus fmh-sitesetup.js der Basis-Komponente. Sie baut denselben Toast wie der Builder direkt im Browser:

fmhAlert('Die Angaben wurden gespeichert.', 'check_circle');

Parameter

Parameter	Erklärung
`message`	Der Meldungstext. Statt eines Texts geht auch ein Objekt, etwa die JSON-Antwort des Servers: Verwendet wird die erste Text-Eigenschaft aus `message`, `msg`, `text`, `error`, `title`, `description`. Eine ganze HTML-Seite (z. B. eine Fehlerseite) wird auf ihren `<title>` gekürzt. Ohne Text erscheint «Ok».
`iconType`	Name eines Material-Icons, z. B. `check_circle` (Erfolg) oder `error` (Fehler). Ohne Angabe kein Icon.

Unterschiede zum Builder

Der Toast verschwindet immer nach 10 Sekunden und hat immer einen Schliessen-Knopf; beides lässt sich nicht einstellen.
Das Icon ist frei wählbar und nicht an AlertType gebunden.
Es braucht keine Einrichtung im Layout: Die Funktion hängt den Toast selbst an den Anfang des Body.

Was zu beachten ist

Die Position ist dieselbe wie beim Builder; zwei gleichzeitige Meldungen verdecken sich.