Blazor EditForm 中存在多个提交按钮？

Question

使用 AspNet Blazor 及其 EditForm： 我正在创建一个简单的表单，其中应包含更新和删除按钮。我似乎没有找到任何如何将参数传递给提交的示例。

我尝试在删除按钮中放置一个指向DeleteObject的@onclick，但随后我没有得到验证（在这种情况下我实际上不需要验证，但我无论如何都想这样做），而且SaveObject也被称为删除后...

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

我希望能够为每个按钮调用特定的函数，而无需绕过验证。

有人知道如何做到这一点吗？

Answer 1

好的，我最终得到了以下解决方案。看起来效果如预期。

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

}   

Answer 2

这两个按钮将提交带有验证的表单。
然后您可以检查布尔值并调用您想要的任何逻辑：

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

Answer 3

如果使用

type="button"

，则仅调用

@onclick

方法，而不调用

OnValidSubmit

方法。但这样就没有验证。

Answer 4

您可以使用视图上的

EditForm

属性作为对表单的引用，然后在接受参数的删除按钮上使用自定义

@onclick

处理程序。

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