Bootstrap Blazor
下载
Bootstrap Blazor

Dialog 对话框组件

通过注入服务调用 Show 方法弹出窗口进行人机交互

基本用法

通过设置 DialogOption 属性对模态框进行基本属性设置

Demo
<Button @onclick="@OnClick">点击打开 Dialog</Button>

<Dialog></Dialog>

@code {
    /// <summary>
    /// 获得 DialogService 实例
    /// </summary>
    [Inject]
    private DialogService? DialogService { get; set; }

    /// <summary>
    /// 点击按钮调用 Dialog 服务
    /// </summary>
    /// <returns></returns>
    private Task OnClick()
    {
        DialogService?.Show(new DialogOption()
        {
            Title = "我是服务创建的弹出框",
            BodyTemplate = DynamicComponent.CreateComponent<Button>(new KeyValuePair<string, object>[]
            {
                new KeyValuePair<string, object>(nameof(Button.ChildContent), new RenderFragment(builder => builder.AddContent(0, "我是服务创建的按钮")))
            })
            .Render()
        });
        return Task.CompletedTask;
    }
}

弹出复杂组件

通过调用 Show<Counter>() 来弹出一个自定义组件

Demo

本例中弹出对话框中包含一个示例网站的自带 Counter 组件，通过设置 KeepChildrenState 属性来控制弹窗内组件是否保持状态

  • 选择 不保持状态 时，弹窗内的计数器数据关闭弹窗后清零
  • 选择 保持状态 时，弹窗内的计数器数据关闭弹窗后保持

<Button @onclick="@OnClick">点击打开 Dialog</Button>

<Dialog></Dialog>

@code {
    /// <summary>
    /// 获得 DialogService 实例
    /// </summary>
    [Inject]
    private DialogService? DialogService { get; set; }

    /// <summary>
    /// 点击按钮调用 Dialog 服务
    /// </summary>
    /// <returns></returns>
    private Task OnClick()
    {
        DialogService?.Show(new DialogOption()
        {
            Title = "自带的 Counter 组件",
            KeepChildrenState = KeepState,
            Component = DynamicComponent.CreateComponent<Counter>()
        });
        return Task.CompletedTask;
    }
}

弹窗传参

通过设置 BodyContext 属性值，可以把参数传递给弹窗中的组件内

Demo

本例中点击按钮时设置 BodyContext 值为 我是传参，弹窗内容为自定义组件 DemoComponent，组件内通过级联参数获取到其值 

<Button @onclick="@OnClickParameter">Dialog 传参示例</Button>

@code {
    /// <summary>
    /// 
    /// </summary>
    /// <returns></returns>
    private Task OnClickParameter()
    {
        DialogService?.Show(new DialogOption()
        {
            Title = "自带的 Counter 组件",
            BodyContext = "我是传参",
            BodyTemplate = builder =>
            {
                var index = 0;
                builder.OpenComponent<DemoComponent>(index++);
                builder.CloseComponent();
            }
        });
        return Task.CompletedTask;
    }
}

DemoComponent 代码
@code {
    <div>@Parameter</div>

    @code {
        [CascadingParameter(Name = "BodyContext")]
        private object? Parameter { get; set; }
    }
}

实战应用

本例中通过传递一个主键，在弹窗内的组件通过此主键进行数据查询，并将结果显示在弹窗内

Demo
<div class="form-inline">
    <div class="row">
        <div class="form-group col-12 col-sm-6">
            <Select @bind-Value="@DataPrimaryId" DisplayText="主键参数" ShowLabel="true">
                <Options>
                    <SelectOption Text="1" Value="1"></SelectOption>
                    <SelectOption Text="2" Value="2"></SelectOption>
                    <SelectOption Text="3" Value="3"></SelectOption>
                    <SelectOption Text="4" Value="4"></SelectOption>
                    <SelectOption Text="5" Value="5"></SelectOption>
                    <SelectOption Text="6" Value="6"></SelectOption>
                    <SelectOption Text="7" Value="7"></SelectOption>
                    <SelectOption Text="8" Value="8"></SelectOption>
                    <SelectOption Text="9" Value="9"></SelectOption>
                    <SelectOption Text="10" Value="10"></SelectOption>
                </Options>
            </Select>
        </div>
        <div class="form-group col-12 col-sm-6">
            <Button @onclick="@OnClickShowDataById">弹窗</Button>
        </div>
    </div>
</div>

@code {
    private int DataPrimaryId { get; set; }

    private Task OnClickShowDataById()
    {
        DialogService?.Show(new DialogOption()
        {
            Title = "数据查询窗口",
            BodyContext = DataPrimaryId,
            BodyTemplate = builder =>
            {
                var index = 0;
                builder.OpenComponent<DataDialogComponent>(index++);
                builder.CloseComponent();
            }
        });
        return Task.CompletedTask;
    }
}

// 组件示例代码请查看 https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/dev/src/BootstrapBlazor.Shared/Pages/Components/DataDialogComponent.razor

代码关闭弹窗

本例讲解如何通过代码打开与关闭弹窗

Demo

利用弹窗参数 DialogOption 实例，弹窗弹出后实例中的 Dialog 属性值即为当前弹窗句柄，通过调用其 Toggle/Close 方法即可关闭弹窗

<Button @onclick="@Show">Dialog</Button>

@code {
    var option = new DialogOption()
    {
        Title = "利用代码关闭弹出框",
    };
    option.BodyTemplate = DynamicComponent.CreateComponent<Button>(new KeyValuePair<string, object>[]
    {
        new KeyValuePair<string, object>(nameof(Button.Text), "点击关闭弹窗"),
        new KeyValuePair<string, object>(nameof(Button.OnClick), EventCallback.Factory.Create<MouseEventArgs>(this, () => {
            option.Dialog?.Close();
        }))
    }).Render();
    DialogService.Show(option);
}

模态对话框

通过 ShowModal 方法弹出线程阻塞模式的对话框

Demo

功能介绍

  • 点击按钮弹出模态弹窗
  • 更改模态弹窗内数值点击 确认 按钮时数值 更新
  • 更改模态弹窗内数值点击 取消 或者 关闭 按钮时数值 不更新
  • 再次点击弹出模态弹窗时，数值保持一致
<p>功能介绍</p>
<ul class="ul-demo">
    <li>点击按钮弹出模态弹窗</li>
    <li>更改模态弹窗内数值点击 <code>确认</code> 按钮时数值 <b>更新</b></li>
    <li>更改模态弹窗内数值点击 <code>取消</code> 或者 <code>关闭</code> 按钮时数值 <b>不更新</b></li>
    <li>再次点击弹出模态弹窗时，数值保持一致</li>
</ul>
<Button @onclick="@OnResultDialogClick">点击打开 Dialog</Button>

@code {
    // 源码地址 https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/dev/src/BootstrapBlazor.Shared/Pages/Components/ResultDialogDemo.razor.cs
    var result = await DialogService.ShowModal<ResultDialogDemo>
    (new ResultDialogOption()
    {
    Title = "带返回值模态弹出框",
    ComponentParamters = new KeyValuePair<string, object>
        []
        {
        new(nameof(ResultDialogDemo.Value), DemoValue1),
        new(nameof(ResultDialogDemo.ValueChanged), EventCallback.Factory.Create<int>
            (this, v => DemoValue1 = v))
            }
            });
            }

实战演练

模拟一个邮件应用，弹窗选择收件人后填入下方的收件人框。

Demo

功能介绍

  • 点击按钮弹出模态弹窗
  • 通过级联传参 BodyContext 传递 10 到弹窗中初始化数据
  • 选中 Table 组件中的行数据，通过双向绑定对 SelectedRows 数据进行 更新
  • 点击 选中 按钮通过双向绑定对 Emails 数据进行 更新
  • 点击 取消 或者 关闭 按钮时 Emails 值 不更新
  • 再次点击弹出模态弹窗时，组件内行选中状态保持一致
  • 弹窗中未选择用户时禁止关闭弹窗
<div class="form-inline">
    <label class="control-label">收件人：</label>
    <div class="input-group">
        <BootstrapInput placeholder="请输入 ..." Value="@InputValue"></BootstrapInput>
        <div class="input-group-append">
            <Button Icon="fa fa-vcard-o" OnClick="@OnEmailButtonClick"></Button>
        </div>
    </div>
</div>

@code {
    // 源码地址 https://gitee.com/LongbowEnterprise/BootstrapBlazor/blob/dev/src/BootstrapBlazor.Shared/Pages/Components/ResultDialogDemo2.razor.cs

    private string? InputValue { get; set; }
    private IEnumerable<string>
    Emails { get; set; } = Array.Empty<string>
        ();

        private async Task OnEmailButtonClick()
        {
        var result = await DialogService.ShowModal<ResultDialogDemo2>
            (new ResultDialogOption()
            {
            Title = "选择收件人",
            BodyContext = 10,
            ButtonYesText = "选择",
            ButtonYesIcon = "fa fa-search",
            ComponentParamters = new KeyValuePair<string, object>
                []
                {
                // 用于初始化已选择的用户邮件
                new(nameof(ResultDialogDemo2.Emails), Emails),
                new(nameof(ResultDialogDemo2.EmailsChanged), EventCallback.Factory.Create<IEnumerable<string>>(this, v => Emails = v))
            }
        });

        if (result == DialogResult.Yes)
        {
            InputValue = string.Join(";", Emails);
        }
    }
}

<Dialog />

DialogOption 属性
An error has occurred. This application may no longer respond until reloaded. Reload