Several submit buttons
One form, three actions: each submit button posts its own Name and Value, so a single handler knows which was pressed. Works with JavaScript off.
System.ComponentModel.DataAnnotations
<Form Model="Model" FormName="article" OnValidSubmit="Save" MaxWidth="36.Rem">
<TextField @bind-Value="Model!.Title" />
<TextArea @bind-Value="Model!.Body" Rows="3" />
<FormActions Justify="Justify.Start">
<Button Submit Name="intent" Value="publish" StartIcon="Lucide.Send"
OnClick='() => _pressed = "publish"'>Publish</Button>
<Button Submit Name="intent" Value="draft" Variant="ButtonVariant.Outline" Accent="Accent.Neutral"
OnClick='() => _pressed = "draft"'>Save draft</Button>
<Button Submit Name="intent" Value="discard" Variant="ButtonVariant.Ghost" Accent="Accent.Danger"
OnClick='() => _pressed = "discard"'>Discard</Button>
</FormActions>
if (_result is not null)
{
<Alert Status="Status.Success">_result</Alert>
}
</Form>
{
[SupplyParameterFromForm(FormName = "article")]
private Article? Model { get; set; }
// Static pages: the pressed button's Name=Value posts with the form.
[SupplyParameterFromForm(FormName = "article", Name = "intent")]
private string? Intent { get; set; }
// Interactive pages post nothing, so OnClick says which button it was.
private string? _pressed;
private string? _result;
protected override void OnInitialized() => Model ??= new();
private void Save() => _result = (Intent ?? _pressed) switch
{
"publish" => $"Published \"{Model!.Title}\".",
"draft" => "Saved as a draft.",
"discard" => "Discarded the changes.",
_ => null,
};
public sealed class Article
{
[Required, StringLength(80)]
public string Title { get; set; } = "What's new in alpha.12";
public string? Body { get; set; } = "OnThisPage, PrevNext and CopyButton, for docs sites.";
}
}