如何在Blazor+DevExpress的DxCheckBox开关切换后显示确认弹窗

需求：切换DxCheckBox开关状态时显示对应确认弹窗——开关为false时点击弹出“Do you want make the product active?”，为true时点击弹出“Do you want make the product inactive?”。

初始尝试使用<DxCheckBox @bind-Checked="@value" CheckType="CheckType.Switch" Enabled="false" />，并添加onclick事件、直接绑定CheckedChanged方法均无效，最终通过在DisplayTemplate中配置控件，并结合异步确认方法实现需求。

Razor 页面代码 #

<DisplayTemplate>
    @{
        var item = context as PriceListValueDTO;
        var value = item.IsUnavailableForSale;
        <DxCheckBox Checked="@value" CheckType="CheckType.Switch" Enabled="true" T="bool" CheckedChanged="ShowChangeAvailabilityConfirm" />
    }
</DisplayTemplate>

后台逻辑代码（Razor.cs） #

private async Task ShowChangeAvailabilityConfirm(bool value)
{
    if (value)
    {
        // 弹出"Do you want make the product inactive?"确认框
        await this.ConfirmPopupRef.Open(ConfirmOptionEnum.ToUnavailable)
                .ContinueWith((o) => value = false);
    }
    else
    {
        // 弹出"Do you want make the product active?"确认框
        await this.ConfirmPopupRef.Open(ConfirmOptionEnum.ToAvailable)
                .ContinueWith((o) => value = true);
    }
}

关键说明 #

• 放弃双向绑定@bind-Checked，改用单向绑定Checked="@value"，避免控件自动更新状态导致弹窗逻辑失效
• 通过CheckedChanged绑定异步处理方法，根据传入的状态值判断要弹出的确认内容
• 使用ContinueWith处理确认后的状态回滚：若用户取消操作，将开关状态重置为原始值

内容的提问来源于stack exchange，提问作者Lucas Mikó