Multiple submit buttons in Blazor EditForm?

Question

Using AspNet Blazor and its EditForm: I am creating a simple form that should contain both an update and a delete button. I do not seem to find any examples of how to pass parameters to the submit.

I have tried to place an @onclick in the delete button pointing towards DeleteObject, but then I get no validation (I actually do not need validation in this case, but I want to do it anyway), plus that the SaveObject was also called after the delete...

<EditForm Model="@selectedCar" OnValidSubmit="@SaveObject">
    <DataAnnotationsValidator />
    <ValidationSummary />

    ....My <InputText>'s for all values I have in my object

    <button type="submit" class="btn btn-primary" value="Save">Spara</button>
    <button type="submit" class="btn btn-primary" value="Delete">Delete</button>
</EditForm>


@code {
    [Parameter]
    public string Id { get; set; }

    CarModel selectedCar;

    protected override async Task OnInitializedAsync()
    {
        selectedCar = await _CarService.GetCar(int.Parse(Id));
    }

    protected async Task SaveObject()
    {
        selectedCar.Id = await _CarService.SaveCar(selectedCar);
    }

    protected async Task DeleteObject(int Id)
    {
        selectedCar.Id = await _CarService.DeleteCar(selectedCar);
    }
}

I want to be able to call specific functions for each button, without going around validation.

Anyone have a good idea how to do this?

I don't know the answer but one way to work around it is you can put a delete button where you are listing the cars beside the edit button that redirects here That way you don't need to handle both edit and delete here — ctyar, Oct 04 '19 at 08:04
if you are deleting the Car object please explain why you want to run validation on it? Because that seems to be you problem as other wise you can just as you say add an onclick for the delete button to call the delete function. As it is your code is only ever calling the saveObject function as that is set with OnValidSubmit="@SaveObject". — David Masterson, Oct 04 '19 at 08:14

score 17 · Accepted Answer · answered Oct 06 '19 at 11:54

Ok, I ended up with the following solution. It seems to work as expected.

<EditForm Model="@selectedCar" Context="formContext">

    <DataAnnotationsValidator />
    <ValidationSummary />

    ....My <InputText>'s for all values I have in my object

    <button type="submit" class="btn btn-primary" @onclick="@(() => SaveCar(formContext))">Save</button>
    <button type="submit" class="btn btn-primary" @onclick="@(() => UpdateStockQuantity(formContext))">Update stock quantity</button>
    <button type="submit" class="btn btn-secondary" @onclick="@(() => DeleteCar(formContext))">Delete</button>
</EditForm>

@code {
    [Parameter]
    public string Id { get; set; }

    CarModel selectedCar;

    protected override async Task OnInitializedAsync()
    {
        selectedCar = await _CarService.GetCar(int.Parse(Id));
    }

    protected async Task SaveCar(EditContext formContext)
    {
        bool formIsValid = formContext.Validate();
        if (formIsValid == false)
            return;

        selectedCar.Id = await _CarService.SaveCar(selectedCar);
    }

    ... plus same approach with UpdateStockQuantity and DeleteCar.

}

score 15 · Answer 2 · edited Dec 15 '19 at 12:58

15

The two buttons will submit the form with the validations.
And then you can check on the Boolean and call any logic you want:

<EditForm Model="@Input" OnValidSubmit="@UpdateAsync">
    <DataAnnotationsValidator />
    <div class="row">
        <div class="form-group col-md-12">
            <label class="required"> Name</label>
            <InputText class="form-control" @bind-Value="Input.Name" />
            <span class="err"><ValidationMessage For="@(() => Input.Name)" /></span>
        </div>
    </div>
    <div class="text-center">
     <button type="submit" @onclick="@(()=> Input.IsNew = false)" class="btn">save 1</button>
     <button type="submit" @onclick="@(()=> Input.IsNew = true)" class="btn">save 2</button>
    </div>
</EditForm> 


@code{
async Task UpdateAsync()
    {

        if (Input.IsNew)
        {
//do somthing 
        }
        else
        {
//do another somthing 
        }
    }
}

edited Dec 15 '19 at 12:58

סטנלי גרונן

2,917
23
46
68

answered Dec 15 '19 at 12:36

Mohamed Omera

249
2
7

1

This has helped me with a button I added inside an EditForm that invokes the Submit but isn't marked as a submit button. Without type="button", it seems to default to submit button behaviour. – imekon Dec 23 '20 at 15:16
This is a very elegant way to setup a single submit handler and pass it parameters via the View Model. Wish I could upvote more than once. Very nice! And you get all the benefits of Form Validation without complicated editContext solutions I've seen elsewhere. – Stuart Helwig Jan 30 '22 at 06:45
This is so easy and elegant, thanks for your answer! – MissRaphie Apr 28 '22 at 11:56
With this solution, isn't there a possibility that we are having a timing issue that causes the `UpdateAsync` function to be called before `onclick` is executed? – TheBigNeo Mar 30 '23 at 10:13

Pascal R. · Answer 3 · 2019-10-04T09:09:51.387

10

If you use type="button" then only the @onclick method is called and not the OnValidSubmit method. But this way there's no validation.

edited Oct 04 '19 at 09:09

answered Oct 04 '19 at 09:03

Pascal R.

2,024
1
21
35

Very intuitive ‍♂️ – adinas Aug 25 '22 at 17:23

Multiple submit buttons in Blazor EditForm?

3 Answers3