Blazor中选择框上的确认对话框

Question

我的表单中有一个select，用户可以在其中选择一个品牌，它将过滤一个列表。我希望能够在筛选该列表之前显示一个确认对话框，这样，如果用户单击选择框并选择项目1，它将询问他们是否确定要确认，如果他们选择是，它将筛选该列表，如果选择否，则不会发生任何事。我有一个选择框在工作，但我不确定如何在点击是或否时显示对话框并进行操作：

选择框：

<MudSelect @bind-Value="@selectedBrand" Label="Select Brand" Variant="Variant.Filled">
@foreach (var item in brand) {
<MudSelectItem Value="@item.Id">@item.Description</MudSelectItem>
}
</MudSelect>

Answer 1

只需创建一个ConfirmDialog组件：

<MudDialog>
<DialogContent>
@Message
</DialogContent>
<DialogActions>
<MudButton OnClick="Cancel">Cancel</MudButton>
<MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
</DialogActions>
</MudDialog>
@code {
[CascadingParameter] MudDialogInstance MudDialog { get; set; }
[Parameter] public string Message { get; set; }
void Submit() => MudDialog.Close(DialogResult.Ok(true));
void Cancel() => MudDialog.Cancel();
}

然后处理MudSelect组件的ValueChangedEventCallback以显示对话框，并根据对话框结果更改所选值：

@inject IDialogService DialogService
<MudSelect T="string" Label="Coffee" AnchorOrigin="Origin.BottomCenter"
Value="_selectedCoffee" ValueChanged="OnValueChanged">
<MudSelectItem Value="@("Cappuccino")" />
<MudSelectItem Value="@("Cafe Latte")" />
<MudSelectItem Value="@("Espresso")" />
</MudSelect>
<p>Selected coffee: @_selectedCoffee</p>
@code {
private string _selectedCoffee;
private async Task OnValueChanged(string value)
{
var parameters = new DialogParameters();
parameters.Add("Message", $"Are you sure you want to apply filter: '{value}'?");
var dialog = DialogService.Show<ConfirmDialog>("Confirm", parameters);
var result = await dialog.Result;
if (!result.Cancelled)
{
_selectedCoffee = value;
// filter the list
}
}
}

在线演示

对话框文档