WPF ShowDialog() 的 Blazor 等价物？答案

【问题标题】：Blazor equivalent of WPF ShowDialog()?WPF ShowDialog() 的 Blazor 等价物？
【发布时间】：2023-04-01 21:59:01
【问题描述】：

我正在尝试将一些代码从 WPF 迁移到 Blazor。 WPF 代码依靠 ShowDialog() 来显示模式对话框并暂停执行，直到模式关闭。是否有（服务器端）Blazor 等效项允许 C# 控制流基于，例如，用户是否在模式对话框中单击了“确认”与“取消”？

【问题讨论】：

我写的但现在已经过时了
谢谢你，@daniherrera。但是，我特别希望避免在模态之后将代码重组为“成功”和“失败”的延续。我有这个约束的原因是我现有的代码库依赖于 WPF 的 ShowDialog() 方法的特定行为的数千种方式。无论好坏，我们有很多概念上类似的实例： if (FileDialog.GetFilePath(out string path)) WriteOutput(path);或 if (CouponDialog.BuyerHasCoupon(out Coupon coupon)) { order.AddCoupon(); } order.PlaceOrder();

标签： c# blazor blazor-server-side

【解决方案1】：

你可以添加一个按钮

<button class="btn btn-primary"
  @onclick="AddNewForecast">
  Add New Forecast
</button>

调用一个将值设置为真的方法

bool ShowPopup = false;
void AddNewForecast()
{
    // Open the Popup
    ShowPopup = true;
}

并且该值包含在使用引导模式控件 (class="modal") 的代码周围：

        @if (ShowPopup)
        {
            <!-- This is the popup to create or edit a forecast -->
            <div class="modal" tabindex="-1" style="display:block" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title">Edit Forecast</h3>
                            <!-- Button to close the popup -->
                            <button type="button" class="close"
                                    @onclick="ClosePopup">
                                <span aria-hidden="true">X</span>
                            </button>
                        </div>
                        <!-- Edit form for the current forecast -->
                        <div class="modal-body">
                            <input class="form-control" type="text"
                                   placeholder="Celsius forecast"
                                   @bind="objWeatherForecast.TemperatureC" />
                            <input class="form-control" type="text"
                                   placeholder="Fahrenheit forecast"
                                   @bind="objWeatherForecast.TemperatureF" />
                            <input class="form-control" type="text"
                                   placeholder="Summary"
                                   @bind="objWeatherForecast.Summary" />
                            <br />
                            <!-- Button to save the forecast -->
                            <button class="btn btn-primary"
                                    @onclick="SaveForecast">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        }

您将看到一个“模态”弹出窗口

【讨论】：

我猜这将实现他的目的。但是当他使用 WPF 时，他很可能使用 MVVM，因此通常您在视图模型中有一些代码，即 ShowMessage 并在该对话框之后继续。所以这是代码流的细微差别。也许在考虑视图划分和逻辑划分时也是有区别的。

【解决方案2】：

目前，没有像 WPF 那样开箱即用的等价物。但是一些关于此的良好记录样本：

https://www.telerik.com/blogs/creating-a-reusable-javascript-free-blazor-modal

https://www.syncfusion.com/blazor-components/blazor-modal-dialog

对我来说唯一的问题是如何为这种 Dialog 设置动画，例如飞入/淡入动画等...

【讨论】：