Blazor 自定义可重用基础组件之 Dialog (Bootstrap Modal)

最新推荐文章于 2024-05-10 09:51:33 发布

落单枫叶

最新推荐文章于 2024-05-10 09:51:33 发布

阅读量1.1k

点赞数

分类专栏： Blazor C# 自定义信息框文章标签： c# Blazor 自定义可重用基础组件 Dialog

本文链接：https://blog.csdn.net/luwq168/article/details/131757269

版权

C# 同时被 3 个专栏收录

61 篇文章

订阅专栏

Blazor

19 篇文章

订阅专栏

自定义信息框

2 篇文章

订阅专栏

文章展示了一种无需JS交互的BootstrapModal对话框实现方式，通过Razor组件控制显示和隐藏。对话框支持不同尺寸，并提供了标题、内容和按钮自定义功能。示例代码中，对话框的打开和关闭通过C#方法处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对话框是常用的组件之一，可以提供信息提示，也可以设置表单录入数据等。但是，Bootstrap Modal需要JS互操作，这个不太懂，只能绕过。这里没有一句JS代码，非常好用。

以下是具体代码：

@if (showDialog)
{
    <div class="modal-window modal @(DialogSize == Size.FitScreen ? "fit-screen" : "")" tabindex="-1" role="dialog" aria-labelledby="title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered @(DialogSize == Size.Large ? "modal-lg" : "")" role="document">
            <div class="modal-content " style="background-color:white;">
                <div class="modal-header">
                    <h5 class="modal-title" id="title">@Title</h5>
                    @if (CloseButton)
                    {
                        <button type="button" class="close" @onclick="Hide">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    }
                </div>
                <div class="modal-body">
                    @BodyContent
                </div>
                <div class="modal-footer">
                    @FootContent
                </div>
            </div>
        </div>
    </div>
}
@code
{
    public bool showDialog { get; set; }
    public enum Size { Normal, Large, FitScreen }
    [Parameter]
    public string Title { get; set; } = "信息";
    [Parameter]
    public Size DialogSize { get; set; } = Size.Normal;
    [Parameter]
    public RenderFragment? BodyContent { get; set; }
    [Parameter]
    public RenderFragment? FootContent { get; set; }
    [Parameter] public bool CloseButton { get; set; } = true;

    public void Show() => showDialog = true;

    public void Hide() => showDialog = false;
}

Dialog.razor.css：

.modal-window {
    background-color: rgba(240, 240, 240, 0.75);
    display: block !important;
}

.fit-screen .modal-dialog {
    width: 99% !important;
    height: 99% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 99% !important;
}

.fit-screen .modal-content {
    height: auto !important;
    min-height: 99% !important;
    border-radius: 0 !important;
}

使用：

<Dialog @ref="dialog" Title="信息提示"  DialogSize="Dialog.Size.Normal">
    <BodyContent>
        欢迎使用Bootstrap Modal的对话框！
    </BodyContent>
    <FootContent>
        <button type="button" class="btn btn-primary" @onclick="closeDialog">保存</button>
        <button type="button" class="btn btn-secondary" @onclick="closeDialog">关闭</button>
    </FootContent>
</Dialog>
<button class="btn btn-info" @onclick="openDialog">打开对话框</button>
@code {

    Dialog? dialog;
    void openDialog()
    {
        if (dialog != null)
        {
            dialog.Show();
        }
    }
    void closeDialog()
    {
        if (dialog != null)
        {
            dialog.Hide();
        }
    }

效果：