diff --git a/src/BootstrapBlazor.Server/Components/Samples/DialogServices.razor b/src/BootstrapBlazor.Server/Components/Samples/DialogServices.razor index 15dfa04d0..f8c5fac6a 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DialogServices.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DialogServices.razor @@ -57,6 +57,24 @@ private DialogService? DialogService { get; set; }

我们换个思路,先弹出一个对话框,业务逻辑仍然由 ResultDialogDemo 完成,当点击 关闭 按钮时取消或者回滚业务逻辑操作或者仅关窗,当点击 保存 按钮时对业务处理结果进行入库操作或者其他操作然后关窗,这个思路也是完全没有问题,不需要通过弹窗的返回值进行后续逻辑判断,把业务逻辑处理移到弹窗内显示组件中,个人感觉更加合理代码更加内聚,并且可以解决模态弹窗返回值不够用需要自定义的问题

+ +

组件库提供了 ShowModal 扩展方法用于弹出模态框,也可以通过调用泛型扩展方法 ShowModal<TDialog> 其组件泛型约束 TDialog 需要继承 IResultDialog 接口,在组件内通过级联参数 SetResultAsync 来设置其模态框返回值,示例代码如下:

+
[CascadingParameter(Name = "ResultDialogContext")]
+private Func<DialogResult, Task>? SetResultAsync { get; set; }
+
+private async Task OnClick(DialogResult dialogResult)
+{
+    if (SetResultAsync != null)
+    {
+        await SetResultAsync(dialogResult);
+    }
+}
+

组件内示例代码如下:

+
<DialogCloseButton Color="@@ButtonNoColor" Icon="@@ButtonNoIcon" Text="@@ButtonNoText" OnClickWithoutRender="() => OnClick(DialogResult.No)" />
+

通过以上代码实现点击按钮关闭当前弹窗,并且设置弹窗返回值为 DialogResult.No

+

本组件库内置了 ResultDialogFooter 组件,可以使用或者下载源码学习

+
+

在使用弹窗的过程中基本都是需要根据自己的业务需求放置一些业务逻辑处理按钮的,比如放置 关闭 保存 应用 等等,这些按钮逻辑有些是需要处理业务逻辑结束后,根据业务逻辑处理结果决定是否关闭弹窗,代码关闭弹窗我们组件库内置了一下几种办法

diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs index daf87af04..89361d9c4 100644 --- a/test/UnitTest/Components/DateTimePickerTest.cs +++ b/test/UnitTest/Components/DateTimePickerTest.cs @@ -928,8 +928,9 @@ public class DateTimePickerTest : BootstrapBlazorTestBase { pb.Add(a => a.AutoClose, true); }); + button = cut.FindAll(".picker-panel-content .cell").First(i => i.TextContent == $"{DateTime.Today.Day}"); await cut.InvokeAsync(() => button.Click()); - Assert.Equal(val, DateTime.MinValue); + Assert.NotEqual(val, DateTime.MinValue); } [Fact]