Razor SweetAlert2 使用教程

Razor SweetAlert2 使用教程

Razor.SweetAlert2A Razor class library for interacting with SweetAlert2项目地址:https://gitcode.com/gh_mirrors/ra/Razor.SweetAlert2

项目介绍

Razor SweetAlert2 是一个用于 Blazor 服务器和 WebAssembly 应用程序的 Razor 组件库，它提供了一个美观、响应式、可定制和无障碍（WAI-ARIA）的 JavaScript 弹出框替代方案。该项目基于 SweetAlert2，并将其封装为 Razor 组件，方便在 Blazor 项目中使用。

项目快速启动

安装

首先，通过 NuGet 安装 Razor SweetAlert2 包：

dotnet add package CurrieTechnologies.Razor.SweetAlert2 --version 2.8.1

注册服务

在 Startup.cs 或 Program.cs 文件中注册 SweetAlert2 服务：

// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
    services.AddSweetAlert2();
}

// Program.cs (for .NET 6 minimal project templates)
builder.Services.AddSweetAlert2();

使用组件

在需要使用 SweetAlert2 的 Razor 页面或组件中，引入命名空间并调用 SweetAlert2 方法：

@page "/example"
@using CurrieTechnologies.Razor.SweetAlert2
@inject SweetAlertService Swal

<button @onclick="ShowAlert">Show Alert</button>

@code {
    private async Task ShowAlert()
    {
        await Swal.FireAsync("Hello World!", "This is a SweetAlert2 alert.", "success");
    }
}

应用案例和最佳实践

基本用法

以下是一个基本的 SweetAlert2 弹窗示例：

<button @onclick="ShowBasicAlert">Show Basic Alert</button>

@code {
    private async Task ShowBasicAlert()
    {
        await Swal.FireAsync("Basic Alert", "This is a basic SweetAlert2 alert.", "info");
    }
}

确认对话框

以下是一个带有确认按钮的 SweetAlert2 对话框示例：

<button @onclick="ShowConfirmAlert">Show Confirm Alert</button>

@code {
    private async Task ShowConfirmAlert()
    {
        bool result = await Swal.FireAsync(new SweetAlertOptions
        {
            Title = "Are you sure?",
            Text = "You won't be able to revert this!",
            Icon = SweetAlertIcon.Warning,
            ShowCancelButton = true,
            ConfirmButtonText = "Yes, delete it!",
            CancelButtonText = "No, cancel!"
        });

        if (result.IsConfirmed)
        {
            await Swal.FireAsync("Deleted!", "Your file has been deleted.", "success");
        }
        else if (result.IsDismissed)
        {
            await Swal.FireAsync("Cancelled", "Your file is safe :)", "error");
        }
    }
}

典型生态项目

Blazor Server 应用

Razor SweetAlert2 适用于 Blazor Server 应用，可以轻松集成到现有的 Blazor Server 项目中，提供美观的弹窗和对话框功能。

Blazor WebAssembly 应用

对于 Blazor WebAssembly 应用，Razor SweetAlert2 同样适用，可以在客户端应用中提供丰富的用户交互体验。

其他 Blazor 组件库

Razor SweetAlert2 可以与其他 Blazor 组件库结合使用，例如 MudBlazor、Blazorise 等，以增强应用的用户界面和交互功能。

通过以上教程，您可以快速上手并使用 Razor SweetAlert2 在 Blazor 项目中实现美观且功能强大的弹窗和对话框。

Razor.SweetAlert2A Razor class library for interacting with SweetAlert2项目地址:https://gitcode.com/gh_mirrors/ra/Razor.SweetAlert2