Dialog

Der DialogBuilder (Fmh.Dialog()) erzeugt einen Bootstrap-Modal-Dialog über ein einheitliches Fluent-API. Aufruf immer über @Html.Fmh(Fmh.Dialog()...).

Hinweis: Der Dialog wird über den BodyPlacer ans Ende des <body> gerendert (RenderBodyPlacer() ist über die Basis-BodyIncludes im Layout eingebunden). Geöffnet wird er über einen Button mit data-bs-toggle="modal" und data-bs-target="#<id>". Der Abbrechen-/Schliessen-Button nutzt .CloseDialogOnClick() (rendert data-bs-dismiss="modal") und schliesst den Dialog nativ; ebenso das X in der Kopfzeile.

Dialog gross

Grösse Large über .Size(DialogSize.Large).

@{
    var dialogId = "dlgGross";
}
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#@dialogId">
    Grossen Dialog öffnen
</button>

@Html.Fmh(Fmh.Dialog()
    .Id(dialogId)
    .Title("Details")
    .Size(DialogSize.Large)
    .Content("<p>Ein grosser Dialog (modal-lg) für umfangreichere Inhalte.</p>")
    .AddButton(Fmh.Button().Text("Schliessen").Type(ButtonType.Button).CloseDialogOnClick(), true))

Darstellung

Der DialogBuilder wird über Fmh.Dialog() erzeugt und mit @Html.Fmh(...) gerendert. Ausgegeben wird ein Bootstrap-Modal (.modal fade) mit Kopf-, Inhalts- und Fusszeile:

@Html.Fmh(Fmh.Dialog()
    .Id("dlgBeispiel")
    .Title("Bestätigung")
    .Content("<p>Möchten Sie die Aktion wirklich ausführen?</p>")
    .AddButton(Fmh.Button().Text("OK").Type(ButtonType.Button))
    .AddButton(Fmh.Button().Text("Abbrechen").Type(ButtonType.Button), true))

Öffnen: Der Dialog wird über einen Auslöser mit data-bs-toggle="modal" und data-bs-target="#<id>" geöffnet (oder automatisch über .AutoOpen()). Standardgrösse ist Medium.

Platzierung: Standardmässig wird das Markup über den BodyPlacer ans Ende des <body> gesetzt — dazu muss das Layout RenderBodyPlacer() aufrufen (über die Basis-BodyIncludes vorhanden). Der Backdrop liegt dann korrekt mit z-index:1050 über dem Seiteninhalt. Nur .DisableBodyPlacerRendering() rendert den Dialog inline; fmh-sitesetup.js setzt den Backdrop in diesem Fall bewusst auf z-index:-1, wodurch er hinter den Seiteninhalt rückt — für einen normal überlagernden Dialog daher nicht verwenden.

Inhalt & Titel

Methode	Erklärung
`.Title("…")`	Titel in der Kopfzeile (HTML-kodiert)
`.RawTitle("…")`	Titel ohne Kodierung (wenn HTML im Titel gewünscht)
`.Content("<p>…</p>")`	Inhalt als HTML-String (für C#-Code)
`.Content(@<text>…</text>)`	Inhalt aus der Razor-View (`Func<object, HelperResult>`) — mehr Flexibilität

Erscheinungsbild & Verhalten

Methode	Erklärung
`.Size(DialogSize.Small \\| Medium \\| Large)`	Dialoggrösse (`modal-sm` / Standard / `modal-lg`)
`.Modal(bool = true)`	Statischer Backdrop: Klick auf den Hintergrund und ESC schliessen nicht
`.AutoOpen(bool = true)`	Öffnet den Dialog automatisch beim Laden der Seite
`.DisableHeaderCloseButton(bool = true)`	Entfernt das X in der Kopfzeile
`.DisableBodyPlacerRendering()`	Rendert den Dialog inline statt am Body-Ende (siehe oben)
`.Attributes(new { … })`	Zusätzliche HTML-Attribute am Modal-Container
`.Id("…")`	Setzt die HTML-`id` (Ziel des `data-bs-target`; ohne Angabe generiert)

Buttons & Formular

Methode	Erklärung
`.AddButton(ButtonBuilder button, bool isCancelButton = false)`	Fügt einen Fusszeilen-Button hinzu; `isCancelButton: true` markiert den Abbrechen-Button (`btnCancelAction`). Zum reinen Schliessen am Button `.CloseDialogOnClick()` setzen (rendert `data-bs-dismiss="modal"`)
`.Form(action, controller, routeValues, method)`	Bettet den Dialoginhalt in ein Formular mit Zielaktion ein
`.NestedForm(bool = true)`	Kein eigenes Formular rendern (wenn der Dialog in einem bestehenden Formular liegt)
`.DialogFormAntiforgeryToken(bool = true)`	Steuert das Antiforgery-Token des Dialog-Formulars (Standard: aktiv)

Ein reiner Schliessen-Button erhält .CloseDialogOnClick() (nativ data-bs-dismiss="modal") — wie das X in der Kopfzeile. Buttons mit fachlicher Aktion (Speichern o. Ä.) lösen dagegen über .Form(...) bzw. ihr .Type(...)/.Action(...) aus; sie schliessen den Dialog nicht automatisch.

Dialog modal

Statischer Backdrop über .Modal() — Hintergrund/ESC schliessen nicht.

@{
    var dialogId = "dlgModal";
}
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#@dialogId">
    Modalen Dialog öffnen
</button>

@Html.Fmh(Fmh.Dialog()
    .Id(dialogId)
    .Title("Eingabe erforderlich")
    .Modal()
    .Content("<p>Ein modaler Dialog: Klick auf den Hintergrund und die ESC-Taste schliessen ihn nicht (statischer Backdrop). Schliessen über das X oben oder «Bestätigen».</p>")
    .AddButton(Fmh.Button().Text("Bestätigen").Type(ButtonType.Button).CloseDialogOnClick()))

Darstellung

Der DialogBuilder wird über Fmh.Dialog() erzeugt und mit @Html.Fmh(...) gerendert. Ausgegeben wird ein Bootstrap-Modal (.modal fade) mit Kopf-, Inhalts- und Fusszeile:

@Html.Fmh(Fmh.Dialog()
    .Id("dlgBeispiel")
    .Title("Bestätigung")
    .Content("<p>Möchten Sie die Aktion wirklich ausführen?</p>")
    .AddButton(Fmh.Button().Text("OK").Type(ButtonType.Button))
    .AddButton(Fmh.Button().Text("Abbrechen").Type(ButtonType.Button), true))

Öffnen: Der Dialog wird über einen Auslöser mit data-bs-toggle="modal" und data-bs-target="#<id>" geöffnet (oder automatisch über .AutoOpen()). Standardgrösse ist Medium.

Inhalt & Titel

Methode	Erklärung
`.Title("…")`	Titel in der Kopfzeile (HTML-kodiert)
`.RawTitle("…")`	Titel ohne Kodierung (wenn HTML im Titel gewünscht)
`.Content("<p>…</p>")`	Inhalt als HTML-String (für C#-Code)
`.Content(@<text>…</text>)`	Inhalt aus der Razor-View (`Func<object, HelperResult>`) — mehr Flexibilität

Erscheinungsbild & Verhalten

Methode	Erklärung
`.Size(DialogSize.Small \\| Medium \\| Large)`	Dialoggrösse (`modal-sm` / Standard / `modal-lg`)
`.Modal(bool = true)`	Statischer Backdrop: Klick auf den Hintergrund und ESC schliessen nicht
`.AutoOpen(bool = true)`	Öffnet den Dialog automatisch beim Laden der Seite
`.DisableHeaderCloseButton(bool = true)`	Entfernt das X in der Kopfzeile
`.DisableBodyPlacerRendering()`	Rendert den Dialog inline statt am Body-Ende (siehe oben)
`.Attributes(new { … })`	Zusätzliche HTML-Attribute am Modal-Container
`.Id("…")`	Setzt die HTML-`id` (Ziel des `data-bs-target`; ohne Angabe generiert)

Buttons & Formular

Methode	Erklärung
`.AddButton(ButtonBuilder button, bool isCancelButton = false)`	Fügt einen Fusszeilen-Button hinzu; `isCancelButton: true` markiert den Abbrechen-Button (`btnCancelAction`). Zum reinen Schliessen am Button `.CloseDialogOnClick()` setzen (rendert `data-bs-dismiss="modal"`)
`.Form(action, controller, routeValues, method)`	Bettet den Dialoginhalt in ein Formular mit Zielaktion ein
`.NestedForm(bool = true)`	Kein eigenes Formular rendern (wenn der Dialog in einem bestehenden Formular liegt)
`.DialogFormAntiforgeryToken(bool = true)`	Steuert das Antiforgery-Token des Dialog-Formulars (Standard: aktiv)

Ein reiner Schliessen-Button erhält .CloseDialogOnClick() (nativ data-bs-dismiss="modal") — wie das X in der Kopfzeile. Buttons mit fachlicher Aktion (Speichern o. Ä.) lösen dagegen über .Form(...) bzw. ihr .Type(...)/.Action(...) aus; sie schliessen den Dialog nicht automatisch.

Dialog Standard

Bootstrap-Modal mit Titel, Inhalt und OK-/Abbrechen-Button.

@{
    var dialogId = "dlgStandard";
}
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#@dialogId">
    Dialog öffnen
</button>

@Html.Fmh(Fmh.Dialog()
    .Id(dialogId)
    .Title("Bestätigung")
    .Content("<p>Möchten Sie die Aktion wirklich ausführen?</p>")
    .AddButton(Fmh.Button().Text("OK").Type(ButtonType.Button))
    .AddButton(Fmh.Button().Text("Abbrechen").Type(ButtonType.Button).CloseDialogOnClick(), true))

Darstellung

Der DialogBuilder wird über Fmh.Dialog() erzeugt und mit @Html.Fmh(...) gerendert. Ausgegeben wird ein Bootstrap-Modal (.modal fade) mit Kopf-, Inhalts- und Fusszeile:

@Html.Fmh(Fmh.Dialog()
    .Id("dlgBeispiel")
    .Title("Bestätigung")
    .Content("<p>Möchten Sie die Aktion wirklich ausführen?</p>")
    .AddButton(Fmh.Button().Text("OK").Type(ButtonType.Button))
    .AddButton(Fmh.Button().Text("Abbrechen").Type(ButtonType.Button), true))

Öffnen: Der Dialog wird über einen Auslöser mit data-bs-toggle="modal" und data-bs-target="#<id>" geöffnet (oder automatisch über .AutoOpen()). Standardgrösse ist Medium.

Inhalt & Titel

Methode	Erklärung
`.Title("…")`	Titel in der Kopfzeile (HTML-kodiert)
`.RawTitle("…")`	Titel ohne Kodierung (wenn HTML im Titel gewünscht)
`.Content("<p>…</p>")`	Inhalt als HTML-String (für C#-Code)
`.Content(@<text>…</text>)`	Inhalt aus der Razor-View (`Func<object, HelperResult>`) — mehr Flexibilität

Erscheinungsbild & Verhalten

Methode	Erklärung
`.Size(DialogSize.Small \\| Medium \\| Large)`	Dialoggrösse (`modal-sm` / Standard / `modal-lg`)
`.Modal(bool = true)`	Statischer Backdrop: Klick auf den Hintergrund und ESC schliessen nicht
`.AutoOpen(bool = true)`	Öffnet den Dialog automatisch beim Laden der Seite
`.DisableHeaderCloseButton(bool = true)`	Entfernt das X in der Kopfzeile
`.DisableBodyPlacerRendering()`	Rendert den Dialog inline statt am Body-Ende (siehe oben)
`.Attributes(new { … })`	Zusätzliche HTML-Attribute am Modal-Container
`.Id("…")`	Setzt die HTML-`id` (Ziel des `data-bs-target`; ohne Angabe generiert)

Buttons & Formular

Methode	Erklärung
`.AddButton(ButtonBuilder button, bool isCancelButton = false)`	Fügt einen Fusszeilen-Button hinzu; `isCancelButton: true` markiert den Abbrechen-Button (`btnCancelAction`). Zum reinen Schliessen am Button `.CloseDialogOnClick()` setzen (rendert `data-bs-dismiss="modal"`)
`.Form(action, controller, routeValues, method)`	Bettet den Dialoginhalt in ein Formular mit Zielaktion ein
`.NestedForm(bool = true)`	Kein eigenes Formular rendern (wenn der Dialog in einem bestehenden Formular liegt)
`.DialogFormAntiforgeryToken(bool = true)`	Steuert das Antiforgery-Token des Dialog-Formulars (Standard: aktiv)

Ein reiner Schliessen-Button erhält .CloseDialogOnClick() (nativ data-bs-dismiss="modal") — wie das X in der Kopfzeile. Buttons mit fachlicher Aktion (Speichern o. Ä.) lösen dagegen über .Form(...) bzw. ihr .Type(...)/.Action(...) aus; sie schliessen den Dialog nicht automatisch.