Move action buttons after the forms.

This commit is contained in:
2025-12-25 23:42:18 -05:00
parent 023e6c289a
commit 059a16b958
8 changed files with 53 additions and 36 deletions
@@ -8,12 +8,7 @@
Title="Create"
Subtitle="Event"
ShowBackButton="true"
BackButtonUrl="/events">
<ActionButtons>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-event-form">Create</MudButton>
<MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
</ActionButtons>
</PageHeader>
BackButtonUrl="/events" />
<EditForm id="create-event-form" Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
<AntiforgeryToken />
@@ -51,6 +46,10 @@
</MudGrid>
</EditForm>
<FormActions>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-event-form">Create</MudButton>
<MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
</FormActions>
@code {
[SupplyParameterFromForm]
+6 -6
View File
@@ -15,12 +15,7 @@
Title="Edit"
Subtitle="Event"
ShowBackButton="true"
BackButtonUrl="/events">
<ActionButtons>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="edit-event-form">Save</MudButton>
<MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
</ActionButtons>
</PageHeader>
BackButtonUrl="/events" />
<EditForm id="edit-event-form" Model="EventDefinition" OnValidSubmit="OnValidSubmit" Enhance>
<AntiforgeryToken />
@@ -58,6 +53,11 @@
</MudGrid>
</EditForm>
<FormActions>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="edit-event-form">Save</MudButton>
<MudButton Href="/events" Variant="Variant.Text">Cancel</MudButton>
</FormActions>
@code {
[SupplyParameterFromQuery]
private int Id { get; set; }
@@ -8,12 +8,7 @@
Title="Create"
Subtitle="Student"
ShowBackButton="true"
BackButtonUrl="/students">
<ActionButtons>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-student-form">Create</MudButton>
<MudButton Href="/students" Variant="Variant.Text">Cancel</MudButton>
</ActionButtons>
</PageHeader>
BackButtonUrl="/students" />
<EditForm id="create-student-form" Model="Student" OnValidSubmit="OnValidSubmit" Enhance>
<AntiforgeryToken />
@@ -32,6 +27,11 @@
</MudGrid>
</EditForm>
<FormActions>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Form="create-student-form">Create</MudButton>
<MudButton Href="/students" Variant="Variant.Text">Cancel</MudButton>
</FormActions>
@code {
[SupplyParameterFromForm]
private Student Student { get; set; } = new() { TsaYear = 1 };
@@ -15,12 +15,7 @@
Title="Edit Student"
Subtitle="@($"{Student.FirstNameLastName}")"
ShowBackButton="true"
BackButtonUrl="@(ReturnUrl ?? "/students")">
<ActionButtons>
<MudButton OnClick="UpdateStudent" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
<MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Cancel</MudButton>
</ActionButtons>
</PageHeader>
BackButtonUrl="@(ReturnUrl ?? "/students")" />
@* https://www.mudblazor.com/components/form *@
@* https://medium.com/@husainalbar/applying-mudblazor-for-crud-operations-in-our-blazor-project-a343037a52ef *@
@@ -52,6 +47,11 @@
</MudGrid>
</EditForm>
<FormActions>
<MudButton OnClick="UpdateStudent" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
<MudButton Href="@(ReturnUrl ?? "/students")" Variant="Variant.Text">Cancel</MudButton>
</FormActions>
@code {
[SupplyParameterFromQuery]
private int Id { get; set; }
@@ -15,12 +15,7 @@
Title="Create"
Subtitle="Team"
ShowBackButton="true"
BackButtonUrl="/teams">
<ActionButtons>
<MudButton OnClick="AddTeam" Variant="Variant.Filled" Color="Color.Primary">Add</MudButton>
<MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
</ActionButtons>
</PageHeader>
BackButtonUrl="/teams" />
<EditForm method="post" Model="Team" OnValidSubmit="AddTeam" FormName="create" Enhance>
<AntiforgeryToken />
@@ -70,6 +65,11 @@
}
</EditForm>
<FormActions>
<MudButton OnClick="AddTeam" Variant="Variant.Filled" Color="Color.Primary">Add</MudButton>
<MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
</FormActions>
@code {
[SupplyParameterFromForm]
private Team Team { get; set; } = new();
+6 -6
View File
@@ -14,12 +14,7 @@
<PageHeader Title="Edit Team"
Subtitle=@Team.ToString()
ShowBackButton="true"
BackButtonUrl="/teams">
<ActionButtons>
<MudButton OnClick="UpdateTeam" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
<MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
</ActionButtons>
</PageHeader>
BackButtonUrl="/teams" />
<EditForm method="post" Model="Team" OnValidSubmit="UpdateTeam" FormName="edit" Enhance>
<AntiforgeryToken />
@@ -41,6 +36,11 @@
</MudGrid>
</EditForm>
<FormActions>
<MudButton OnClick="UpdateTeam" Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>
<MudButton Href="/teams" Variant="Variant.Text">Cancel</MudButton>
</FormActions>
@code {
[SupplyParameterFromQuery]
private int Id { get; set; }
@@ -0,0 +1,10 @@
@namespace WebApp.Components.Shared.Components
@using MudBlazor
<div class="form-actions">
@ChildContent
</div>
@code {
[Parameter] public RenderFragment? ChildContent { get; set; }
}
+8
View File
@@ -118,4 +118,12 @@ h1:focus {
display: flex;
gap: 0.5rem;
align-items: center;
}
.form-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-top: 1.5rem;
margin-bottom: 1rem;
}