CODEWITHSUNDEEP
buttonsubmitblazor
Anders K
Anders K

Reputation: 503

Multiple submit buttons in Blazor EditForm?

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?

Upvotes: 30

Views: 15026

Answers (4)

Mohamed Omera
Mohamed Omera

Reputation: 263

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 
        }
    }
}

Upvotes: 16

thecoolestname36
thecoolestname36

Reputation: 114

You can use an EditForm property on the view as a reference to the form, then have a custom @onclick handler on the delete button which accepts a parameter.

<EditForm @ref="editFormRef" 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 @onclick="() => DeleteObject(Id)" class="btn btn-primary" value="Delete">Delete</button>
</EditForm>


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

    CarModel selectedCar;

    EditForm? editFormRef;

    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(string Id)
    {   
        if (_editFormRef?.EditContext?.Validate() ?? false) {
            selectedCar.Id = await _CarService.DeleteCar(await _CarService.GetCar(int.Parse(Id)));
            // You can call OnValidSubmit here too if needed with  `await _editFormRef.OnValidSubmit.InvokeAsync();`
        }
    }
}

Upvotes: 0

Anders K
Anders K

Reputation: 503

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.

}

Upvotes: 19

Pascal R.
Pascal R.

Reputation: 2323

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

Upvotes: 12

Related Questions