Razor.SweetAlert2

[删除（380066935@qq.com或微信通知）]

Basaingeal/Razor.SweetAlert2: A Razor class library for interacting with SweetAlert2 (github.com)

A Razor class library for interacting with SweetAlert2

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.
All wrapped inside a Razor Component Library for use in Blazor Server and WebAssembly applications.

Register the service in your Startup file.

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

NB: For newer .NET 6 minimal project templates, this will actually be in Program.cs

// Program.cs
...
builder.Services.AddSweetAlert2();

OR

If you want to use one of the Official SweetAlert2 themes:

// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
 services.AddSweetAlert2(options => {
   options.Theme = SweetAlertTheme.Dark;
 });
...
}

See Configuration for more information.

Add the script tag

Add this script tag in your root html file (Likely _Host.cshtml for Blazor Server or index.html for Blazor WebAssembly), right under the framework script tag. (i.e <script src="_framework/blazor.server.js"></script> for Blazor Server or <script src="_framework/blazor.webassembly.js"></script> for Blazor WebAssembly)

NB: In newer templates, this will be towards the bottom of Pages/_Layout.cshtml for Blazor Server or wwwroot/index.html for Blazor WebAssembly.

<script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>

If you need to support IE11, this script tag is different. See IE Compatibility.

_Imports.razor

Recommended: Add @using CurrieTechnologies.Razor.SweetAlert2 to your _Imports.razor file, to avoid having to put the using call in every component that requires it.

Inject the SweetAlertService into any Blazor component.

// Sample.razor
@inject SweetAlertService Swal;
<button class="btn btn-primary"
   @onclick="@(async () => await Swal.FireAsync("Any fool can use a computer"))">
 Try me!
</button>

Examples

The most basic message:

await Swal.FireAsync("Hello world!");

A message signaling an error:

await Swal.FireAsync("Oops...", "Something went wrong!", "error");

Handling the result of SweetAlert2 modal:

// async/await
SweetAlertResult result = await Swal.FireAsync(new SweetAlertOptions
 {
   Title = "Are you sure?",
   Text = "You will not be able to recover this imaginary file!",
   Icon = SweetAlertIcon.Warning,
   ShowCancelButton = true,
   ConfirmButtonText = "Yes, delete it!",
   CancelButtonText = "No, keep it"
 });

if (!string.IsNullOrEmpty(result.Value))
{
 await Swal.FireAsync(
   "Deleted",
   "Your imaginary file has been deleted.",
   SweetAlertIcon.Success
   );
}
else if (result.Dismiss == DismissReason.Cancel)
{
 await Swal.FireAsync(
   "Cancelled",
   "Your imaginary file is safe :)",
   SweetAlertIcon.Error
   );
}

// Promise/Task based
Swal.FireAsync(new SweetAlertOptions
 {
   Title = "Are you sure?",
   Text = "You will not be able to recover this imaginary file!",
   Icon = SweetAlertIcon.Warning,
   ShowCancelButton = true,
   ConfirmButtonText = "Yes, delete it!",
   CancelButtonText = "No, keep it"
 }).ContinueWith(swalTask =>
 {
   SweetAlertResult result = swalTask.Result;
   if (!string.IsNullOrEmpty(result.Value))
   {
     Swal.FireAsync(
       "Deleted",
       "Your imaginary file has been deleted.",
       SweetAlertIcon.Success
       );
   }
   else if (result.Dismiss == DismissReason.Cancel)
   {
     Swal.FireAsync(
       "Cancelled",
       "Your imaginary file is safe :)",
       SweetAlertIcon.Error
       );
   }
 });