Bygg ett formulär från en lista med fältdefinitioner i stället för att skriva markup: text, e-post, lösenord, tal, datum, lista, radio, kryssruta och brytare.
Varför det hjälper
- Formulär från definitioner
- Vanliga fälttyper
- Validering ingår
Var det passar
- Administrationsskärmar
- Dynamiska formulär
- Prototyper
Exempel
<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}"));
}Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.
Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.