Bygg et skjema fra en liste med feltdefinisjoner i stedet for å skrive markup: tekst, e-post, passord, tall, dato, liste, radio, avkrysningsboks og bryter.
Hvorfor det hjelper
- Skjemaer fra definisjoner
- Vanlige felttyper
- Validering inkludert
Hvor det passer
- Administrasjonsskjermer
- Dynamiske skjemaer
- Prototyper
Eksempel
<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}"));
}Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.