Button Blazor EditForm中有多个提交按钮?
使用AspNet Blazor及其EditForm: 我正在创建一个简单的表单,它应该包含一个更新和一个删除按钮。我似乎找不到任何关于如何将参数传递给submit的示例 我试图在delete按钮中放置一个指向DeleteObject的@onclick,但是没有得到任何验证(在这种情况下,我实际上不需要验证,但无论如何我都想这样做),而且在删除之后也调用了SaveObjectButton Blazor EditForm中有多个提交按钮?,button,submit,blazor,Button,Submit,Blazor,使用AspNet Blazor及其EditForm: 我正在创建一个简单的表单,它应该包含一个更新和一个删除按钮。我似乎找不到任何关于如何将参数传递给submit的示例 我试图在delete按钮中放置一个指向DeleteObject的@onclick,但是没有得到任何验证(在这种情况下,我实际上不需要验证,但无论如何我都想这样做),而且在删除之后也调用了SaveObject <EditForm Model="@selectedCar" OnValidSubmit="@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);
}
}
…我的是我在对象中拥有的所有值
斯巴拉
删除
@代码{
[参数]
公共字符串Id{get;set;}
CarModel-selectedCar;
受保护的重写异步任务OnInitializedAsync()
{
selectedCar=wait_CarService.GetCar(int.Parse(Id));
}
受保护的异步任务SaveObject()
{
selectedCar.Id=wait\u CarService.SaveCar(selectedCar);
}
受保护的异步任务删除对象(int-Id)
{
selectedCar.Id=wait\u CarService.DeleteCar(selectedCar);
}
}
我希望能够调用每个按钮的特定函数,而无需进行验证
有人知道如何做吗?如果使用
type=“button”
则只调用@onclick
方法,而不调用OnValidSubmit
方法。但是这种方法没有验证。好的,我最终得到了以下解决方案。它似乎像预期的那样工作
<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.
}
…我的是我在对象中拥有的所有值
拯救
更新库存数量
删除
@代码{
[参数]
公共字符串Id{get;set;}
CarModel-selectedCar;
受保护的重写异步任务OnInitializedAsync()
{
selectedCar=wait_CarService.GetCar(int.Parse(Id));
}
受保护的异步任务存储车(EditContext formContext)
{
bool formIsValid=formContext.Validate();
if(formIsValid==false)
返回;
selectedCar.Id=wait\u CarService.SaveCar(selectedCar);
}
…再加上UpdateStockQuantity和DeleteCar的相同方法。
}
这两个按钮将提交带有验证的表单。然后,您可以检查布尔值并调用所需的任何逻辑:
<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
}
}
}
名称
节省1
节省2
@代码{
异步任务UpdateAsync()
{
if(Input.IsNew)
{
//干坏事
}
其他的
{
//做另一件事
}
}
}
我不知道答案,但解决这个问题的一种方法是,您可以将“删除”按钮放在您列出车辆的位置,旁边的“编辑”按钮重定向到此处,这样您就不需要在此处同时处理“编辑”和“删除”操作。如果您要删除车辆对象,请解释为什么要对其运行验证?因为这似乎是您的问题,正如您所说的,您可以为delete按钮添加onclick来调用delete函数。实际上,您的代码只调用了使用OnValidSubmit=“@saveObject”设置的saveObject函数。这有助于我在EditForm中添加一个按钮,该按钮调用提交,但未标记为提交按钮。如果没有type=“button”,则似乎默认提交按钮行为。