Komponenten
Beispiele je Komponenten-Paket.
Analyse
Fertige Support-Seite mit Browser-, Cache- und Verbindungsinformationen.
- Analyse-Seite Browser-, Storage- und Cookie-Infos für den Support, per Knopfdruck kopierbar.
Basis
EditorTemplates und erweiterte DataAnnotations.
- Auswahlbox Wert als Karte, optional als Navigations-Link.
- CheckInfo bool-Wert als Haken-/Kreuz-Icon mit Beschriftung.
- E-Mail E-Mail-Adresse als mailto:-Link, optional nur Wert.
- Telefon Telefonnummer als tel:-Link, «Unbekannt» ohne Wert.
- Textarea Mehrzeiliger Text mit Zeilenumbrüchen als <br>.
- Textbox Schreibgeschützte Wert-Darstellung mit Ausrichtung und Hilfetext.
- Boolean bool? als Ja/Nein-Auswahl.
- BooleanCombobox Ja/Nein-Auswahl mit Combobox, die erst bei „Ja“ erscheint.
- Checkbox bool? als einzelne Checkbox.
- CheckboxList Gruppe von Checkboxen (Mehrfachauswahl).
- ComboboxList Durchsuchbares Auswahlfeld (Single-Select).
- DropdownList Auswahlfeld (Single-Select) mit Liste.
- MultiselectList Auswahlfeld mit Mehrfachauswahl.
- Password Passwort-Eingabefeld.
- RadioList Gruppe von Radio-Buttons.
- String Textfeld-Template mit RequiredIf, HelpText und UniqueId.
- Textarea Mehrzeiliges Eingabefeld.
- Clarity Bindet Microsoft Clarity ein – mit Projektcode und optionalen Tags.
- PasswortStatus Zeigt die Passwortregeln und hakt sie während der Eingabe live ab.
- TabStrip Reiter mit Inhalt, deaktivierbaren Tabs und Klick-Ereignis.
- Text Gibt Text HTML-kodiert aus – auf Wunsch wieder dekodiert.
- Alert Meldung als Bootstrap-Toast, direkt oder nach einem Redirect aus TempData.
- LoadingSpinner Blockierendes Lade-Overlay mit Statustext, über showLoader()/hideLoader() gesteuert.
- CheckboxRequired Verlangt eine angekreuzte Checkbox (z. B. Zustimmung).
- DatumBereich DateTime-Feld mit Bereichsvalidierung (feste Daten, Jahr-Offset, relative Tage).
- Email Prüft eine Zeichenkette gegen ein E-Mail-Format inkl. Top-Level-Domain.
- Ganzzahl Prüft eine Zeichenkette gegen ganze Zahlen (optional mit Minus).
- NoHtml Lehnt Eingaben mit HTML-Code (Tags) ab.
- Nummer Prüft eine Zeichenkette gegen Dezimalzahlen (Punkt oder Komma).
- RequiredIf Pflichtfeld abhängig von einem anderen Feld – je EditorTemplate ein Beispiel.
- RequiredIfContains Pflichtfeld, sobald ein anderes Feld einen von mehreren Werten hat.
- UniqueId Zufälliges Suffix an der HTML-Id, damit mehrfach gerenderte Formulare kollisionsfrei bleiben.
BenutzerPraesenzCheck
Hält die Anmeldung während der Arbeit gültig und fragt bei Untätigkeit nach.
- BenutzerPraesenzPruefer Prüft im Hintergrund die Gültigkeit des Auth-Cookies und zeigt bei Untätigkeit den Dialog «Sind Sie noch da?».
FileUpload
Datei-Upload über eine Ablagefläche (Dropzone) samt Validierung.
- Anzahl per Ereignis auswerten Das Ereignis documentsuploaded meldet Feldname, Anzahl und Obergrenze.
- Dokumente bearbeiten Umbenennen je Zeile und Mehrfachlöschen über eine Auswahlspalte.
- Dokumentliste (Grundfall) Tabelle der zugeordneten Dokumente mit Download und Löschen, darunter die Ablagefläche.
- Dokumenttyp im Dialog Der Upload-Dialog verlangt zusätzlich einen Dokumenttyp aus einer Auswahl.
- Download-Url zur Laufzeit Eigene Download-Route als Vorlage mit dem Platzhalter {dokumentId}.
- Pflicht-Upload Ohne zugeordnetes Dokument ist das Formular ungültig (DocumentUploadRequired).
- Datei-Upload (Grundfall) Ablagefläche für Dateien; überträgt sofort und sammelt die Ids im Formular.
- Dokumenttyp im Dialog Der Upload-Dialog verlangt zusätzlich einen Dokumenttyp aus einer Auswahlliste.
- Maximale Anzahl Dateien Obergrenze aus einer Eigenschaft des ViewModels (MaxUploadableFiles).
- Pflicht-Upload Ohne übertragenes Dokument ist das Formular ungültig (DocumentUploadRequired).
- Zwei Upload-Bereiche Zwei Felder, zwei Dropzones, zwei Endpunkte in einem Formular.
Infrastruktur
Ui-Controls über das Fluent-Builder-Pattern.
- PartialBuilder Rendert eine Razor-Partial als IBuilder (z. B. Head-/Body-Includes).
PDFViewer
Dokumentenbetrachter für PDF und Bilder – als Element der Seite oder als Dialog.
- Clientseitiger Aufruf Leeres Skelett, Dokument zur Laufzeit über initDocumentViewer.
- Darstellung der Formate Der Regelfall, umschaltbar über PDF, Bild, defekte Datei und nicht unterstütztes Format.
- Dialog über Links Vorschau im Modal, geöffnet über data-siwf-documentviewer-type.
- Zweispaltig mit Sachdaten ERP-Muster: links die Sachdaten, rechts die Belegvorschau.
Tabelle
Datagrid auf Basis von DataTables – Spalten, Aktionen und Zeilenverhalten über ein Fluent-API.
- Referenz Alle Builder- und Spalten-Methoden auf einen Blick.
- Grundfall AjaxDataUrl und der Endpunkt dahinter – mit Blättern, Suchen und Seitengrösse.
- Aktion vor dem Ausführen abfangen (gridButtonClick) Route-Werte je Zeile anhängen oder die Aktion mit preventDefault anhalten.
- Auf geladene Daten reagieren (griddataloaded) Die Antwort des Endpunkts mit den Zählwerten aus GridDataSource.
- Nach einer Aktion nachziehen (gridAsyncButtonClicked) Der Postback im Hintergrund ist durch und die Tabelle neu geladen.
- Zeilen auszeichnen (gridRowCreated) Die Zeile abhängig von ihren Daten auszeichnen, statt über eine Zeilenbedingung.
- Zellen auszeichnen (gridCellCreated) Der Ersatz für CellAttributes und EmptyColumnChar.
- Feste Filterwerte in der Adresse Werte, die beim Aufbau der Seite feststehen, über ToRouteValueDictionary an den Endpunkt.
- Suchformular über der Tabelle Eigene Suchfelder gehen mit jeder Abfrage mit; neu geladen wird über gridReload.
- Spalten aufbereiten Fertige Werte aus der Datenquelle statt Format, Custom und EmptyColumnChar.
- Unterzeilen nachladen ChildForAsync holt den Inhalt der Unterzeile erst beim Aufklappen.
- Aktionen ohne Seitenwechsel Entfernen, Dialog und Umschalten als Postback im Hintergrund, Antwort als JSON.
- Aktionen sperren und ausblenden DisabledClientExpression, VisibleClientExpression und DisableRowClientExpression statt Disabled und Visible.
- Mehrfachauswahl (bulkeditchange) Auswahlkästchen im Formular, Feldname aus ClientDataKey, Auswahl nur auf der angezeigten Seite.
- Zeilenklick Ganze Zeile anklickbar – auch nach dem Blättern, ohne Zutun.
- Grundfall Einstieg 1 BindTo und Columns – der kleinste vollständige Aufbau.
- Grid in einem Formular NestedForm gegen verschachtelte Formulare, Aktion als Submit-Button.
- Ohne Daten Leere Liste mit eigenem Hinweistext statt der Vorgabe.
- Benutzerdefinierte Spalte Freies HTML in der Zelle, sortiert über SortByKey.
- Spalten formatieren Einstieg 2 Format, Breite, Sichtbarkeit, Tooltip und getrennte Sortierung.
- Zellen auszeichnen Attribute an der einzelnen Zelle, Symbol für leere Zellen.
- Unterzeilen Aufklappbare Untertabelle je Zeile über ChildFor.
- Unterzeilen offen halten Erste Unterzeile offen starten, weitere offen lassen.
- Unterzeilen-Spalte darstellen Symbol, Text oder beides in der Aufklapp-Spalte.
- Aktionen je Zeile Einstieg 3 Ansehen, Bearbeiten, Entfernen und eigene Aktionen über FmhGrid.
- Aktionen sperren und ausblenden Disabled, Visible und Property je Zeile entschieden.
- Dialog-Aktion Rückfrage im Dialog des Grids statt sofortiger Navigation.
- Umschalt-Aktion Schaltfläche mit zwei Zuständen über ToogleButton und ToggleStatus.
- Mehrfachauswahl (bulkeditchange) Auswahlkästchen im Formular, Auswertung über bulkeditchange.
- Zeilen sperren DisableRow sperrt Zeilen fachlich samt ihrer Aktionen.
- Zeilen umsortieren (gridrowmoved) Drag & Drop der Zeilen, Auswertung über gridrowmoved.
- Zeilenklick Ganze Zeile anklickbar, Ziel über data-row-click-default.
Wizard
Mehrstufige Erfassung mit Schritt-Navigation, Entwurfsspeicherung und eigener Validierungssteuerung.
- Fünf Schritte Der Regelfall: Kopfbereich, Navigationsleiste und gesteuerte Validierung.
- Viele Schritte Zwölf Schritte – wie sich die Schritt-Navigation bei vielen Einträgen verhält.
- Zustände und gesperrte Navigation WizardStepState von erledigt bis fehlerhaft, dazu StepNavigationDisabled und die clientseitige Freigabe.