Button

Button Async

Für asynchrone Aktionen stehen jQuery-Statusfunktionen zur Verfügung, die den Button zwischen Lade-, Erfolgs- und Fehlerzustand umschalten.

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Ausfüllen")
    .Attributes(new { id = "btnAsyncDemo" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Primär mit Icon rechts und Attributen (Typ Submit)

Icon rechts statt links vom Text platziert.

• cshtml

@Html.Fmh(Fmh.Button()
    .Icon(IconType.Send)
    .IconPosition(ButtonIconPosition.Right)
    .Text("Absenden")
    .Color(ButtonColor.Primary)
    .Attributes(new { id = "btnIconRechts", @class = "ms-3" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Primär mit Icon und Attributen (Typ Button)

Typ Button statt Submit — löst kein Formular aus, für rein clientseitige Aktionen.

• cshtml

@Html.Fmh(Fmh.Button()
    .Icon(IconType.Add)
    .Text("Hinzufügen")
    .Type(ButtonType.Button)
    .Color(ButtonColor.Primary)
    .Attributes(new { id = "btnHinzufuegen", @class = "ms-3" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Primär mit Icon und Attributen (Typ Submit)

Primärer Submit-Button mit Icon und zusätzlichen HTML-Attributen.

• cshtml

@Html.Fmh(Fmh.Button()
    .Icon(IconType.Send)
    .Text("Absenden")
    .Color(ButtonColor.Primary)
    .Attributes(new { id = "btnPrimaerIcon", @class = "ms-3" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Primär (Typ Submit)

Primärer Button vom Typ Submit ohne weitere Optionen.

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Color(ButtonColor.Primary))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Sekundär mit Icon und Attributen (Typ Submit)

Wie "Button Primär mit Icon und Attributen (Typ Submit)", aber mit der Farbe Secondary.

• cshtml

@Html.Fmh(Fmh.Button()
    .Icon(IconType.Send)
    .Text("Absenden")
    .Color(ButtonColor.Secondary)
    .Attributes(new { id = "btnSekundaerIcon", @class = "ms-3" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Success als Link

Als Link gerendert, Ziel über .Action(...) auf eine MVC-Action.

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Neues Produkt")
    .Icon(IconType.NewReleases)
    .Type(ButtonType.Link)
    .Action("Index", "Home", new { id = 5, area = "" })
    .Color(ButtonColor.Success)
    .Attributes(new { id = "btnNeuesProdukt" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Success als Link (Icon rechts)

Wie "Button Success als Link", aber mit Icon rechts.

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Neues Produkt")
    .Icon(IconType.NewReleases)
    .IconPosition(ButtonIconPosition.Right)
    .Type(ButtonType.Link)
    .Action("Index", "Home", new { id = 5, area = "" })
    .Color(ButtonColor.Success)
    .Attributes(new { id = "btnNeuesProduktRechts" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Button Success als Link mit externem Link und Target

Als Link auf eine externe URL, öffnet in neuem Tab (target="_blank").

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Unterstützung anfordern")
    .Icon(IconType.PowerInput)
    .Type(ButtonType.Link)
    .Url("https://www.databinding.net")
    .Color(ButtonColor.Success)
    .Attributes(new { id = "btnUnterstuetzung", target = "_blank" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Einfacher Link

Link ohne Button-Optik (Typ SimpleLink).

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Weitere Informationen")
    .Type(ButtonType.SimpleLink)
    .Action("Index", "Home", new { area = "" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Icon Button

Reiner Icon-Button ohne sichtbaren Text (Text wird als Tooltip verwendet).

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Bearbeiten")
    .Type(ButtonType.IconButton)
    .Icon(IconType.Edit)
    .Attributes(new { id = "btnBearbeiten" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Toggle Button

Icon-Button mit zwei Zuständen (an/aus) für Toggle-Interaktionen.

• cshtml

@Html.Fmh(Fmh.Button()
    .Text("Sichtbarkeit")
    .Type(ButtonType.IconButton)
    .Icon(IconType.Visibility, IconType.VisibilityOff)
    .Attributes(new { id = "btnSichtbarkeit" }))

Darstellung

• Demo
• Anleitung

@Html.Fmh(Fmh.Button()
    .Text("Absenden")
    .Icon(IconType.Send)
    .Color(ButtonColor.Primary))

Status-Varianten (jQuery)

Die Status-Funktionen stammen aus jquery-fmh-sitesetup.js, das über die Basis-BodyIncludes als /bundle/fmh-sitesetup.js geladen wird. Die Links unten schalten den Button #btnAsyncDemo zwischen Lade-, Erfolgs- und Fehlerzustand um.

• Busy - $('#btnAsyncDemo').fmhBtnAsyncBusy()
• Not Busy - $('#btnAsyncDemo').fmhBtnAsyncNotBusy()
• Success state - $('#btnAsyncDemo').fmhBtnAsyncSuccess()
• Failed state - $('#btnAsyncDemo').fmhBtnAsyncFailure()
• Disabled state - $('#btnAsyncDemo').fmhBtnDisabled()
• Enabled state - $('#btnAsyncDemo').fmhBtnEnabled()

Hinweis: Mit Content Security Policy auf onclick/onchange-Attribute verzichten, stattdessen jQuery oder addEventListener verwenden.