Blazor 自定义组件 模态框

在Blazor应用程序中，模态框（Modal）是一个常见的UI元素，用于在用户交互时显示重要信息或需要用户确认的操作。
本文将介绍如何创建一个自定义的Blazor模态框组件，并使用它。

创建Modal组件

首先，我们创建一个名为Modal.razor的组件文件。这个组件继承了ComponentBase类，并定义了模态框的HTML结构和C#代码。

@inherits ComponentBase

<div class="modal" style="display: @(IsVisible ? "block" : "none")">
    <div class="modal-content">
        <h3>@Title</h3>
        <p>@Message</p>
        <button class="btn btn-primary" @onclick="OnConfirm">确认</button>
        <button class="btn btn-danger" @onclick="OnCancel">取消</button>
    </div>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public string Message { get; set; }

    [Parameter]
    public EventCallback OnConfirm { get; set; }

    [Parameter]
    public EventCallback OnCancel { get; set; }

    private bool IsVisible { get; set; }

    public void Show()
    {
        IsVisible = true;
    }

    public void Hide()
    {
        IsVisible = false;
    }
}

在这个组件中，我们定义了四个参数：
Title：模态框的标题。
Message：模态框显示的消息内容。
OnConfirm：当用户点击“确认”按钮时触发的事件回调。
OnCancel：当用户点击“取消”按钮时触发的事件回调。
我们还定义了一个私有变量IsVisible来控制模态框的显示与隐藏，并提供了Show和Hide两个公共方法来控制这个变量的值。

创建Modal的CSS样式

接下来，我们创建一个名为Modal.razor.css的CSS文件，用于定义模态框的样式。

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

    .modal.show {
        display: block;
    }

.modal-dialog {
    margin: 15px;
}

.modal-content {
    background-color: #fff;
    border: 1px solid #888;
    border-radius: 5px;
    padding: 20px;
}

.modal-header {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.modal-footer {
    padding: 10px;
    border-top: 1px solid #eee;
    text-align: right;
}

.btn-close {
    /* 使用合适的样式来显示关闭按钮 */
}

这个CSS文件定义了模态框的整体布局、背景色、边框样式等。通过.show类来控制模态框的显示。

使用Modal组件

现在，我们在ModalExample.razor页面中使用刚才创建的Modal组件。

@page "/modal-example"
@rendermode @(new InteractiveServerRenderMode(prerender: true))

@using Microsoft.AspNetCore.Components

<h1>Blazor 模态框示例</h1>

<button class="btn btn-primary" @onclick="ShowModal">打开模态框</button>

<Modal Title="模态框标题" Message="这是一个模态框示例" OnConfirm="ConfirmModal" OnCancel="CancelModal" @ref="modalRef" />

@code {
    Modal modalRef;

    void ShowModal()
    {
        modalRef.Show();
    }

    async Task ConfirmModal()
    {
        // 处理确认逻辑
        await Task.Delay(500);
        modalRef.Hide();
    }

    async Task CancelModal()
    {
        // 处理取消逻辑
        await Task.Delay(500);
        modalRef.Hide();
    }
}

button按钮：当用户点击时，会触发ShowModal方法。@onclick是Blazor中用于绑定事件处理器的指令。
Modal组件：它接收几个参数：
Title: 模态框的标题。
Message: 模态框中显示的消息。
OnConfirm: 当用户点击确认按钮时调用的方法。
OnCancel: 当用户点击取消按钮时调用的方法。
@ref: 用于获取Modal组件的引用，以便在@code块中调用其方法。

@code块包含了页面的C#代码逻辑。
Modal modalRef: 定义了一个Modal类型的变量modalRef，用于在C#代码中引用模态框组件。
void ShowModal(): 这是一个方法，当按钮被点击时，会调用modalRef的Show方法，显示模态框。
async Task ConfirmModal(): 当用户点击模态框的确认按钮时，会调用这个方法。它首先等待500毫秒（模拟处理逻辑），然后调用modalRef的Hide方法，隐藏模态框。
async Task CancelModal(): 与ConfirmModal类似，但用于处理用户点击取消按钮的逻辑。它也等待500毫秒后隐藏模态框。

示例代码

Modal.razor
Modal.razor.css
ModalExample.razor