Bouw een formulier uit een lijst met velddefinities in plaats van markup te schrijven: tekst, e-mail, wachtwoord, getal, datum, keuzelijst, radio, selectievakje en schakelaar.
Waarom het helpt
- Formulieren uit definities
- Gangbare veldtypen
- Validatie inbegrepen
Waar het past
- Beheerschermen
- Dynamische formulieren
- Prototypes
Voorbeeld
<FormBuilder Fields="_fields" Values="_values" OnSubmit="Submitted" SubmitText="Register" />
<pre class="code-block" tabindex="0"><code>@_result</code></pre>
@code {
private string _result = "Submit the form to see the values.";
private readonly Dictionary<string, object?> _values = new() { ["newsletter"] = true };
private readonly FormField[] _fields =
[
new("name", "Full name", Required: true, Placeholder: "Ada Lovelace"),
new("email", "Email", FormFieldKind.Email, Required: true, Help: "We never share it."),
new("age", "Age", FormFieldKind.Number, Min: 18, Max: 120),
new("birth", "Date of birth", FormFieldKind.Date),
new("country", "Country", FormFieldKind.Select, Options: ["Bulgaria", "Germany", "Norway"], Placeholder: "Choose…", Required: true),
new("plan", "Plan", FormFieldKind.Radio, Options: ["Free", "Team", "Enterprise"]),
new("notes", "Notes", FormFieldKind.TextArea, Lines: 3),
new("newsletter", "Send me the newsletter", FormFieldKind.Switch),
new("terms", "I accept the terms", FormFieldKind.Checkbox, Required: true)
];
private void Submitted(IReadOnlyDictionary<string, object?> values) =>
_result = string.Join("\n", values.Select(pair => $"{pair.Key} = {pair.Value}"));
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.