A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.
This package is deprecated. Use CurrieTechnologies.Razor.SweetAlert2
🙌 Includes themes from the Official SweetAlert2 Themes project 🙌
Install-Package CurrieTechnologies.Blazor.SweetAlert2 --IncludePrerelease
Or grab from Nuget
Register the service in your Startup file.
// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
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;
});
...
}
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>
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!",
Type = SweetAlertType.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.",
SweetAlertType.Success
);
}
else if (result.Dismiss == DismissReason.Cancel)
{
await Swal.FireAsync(
"Cancelled",
"Your imaginary file is safe :)",
SweetAlertType.Error
);
}
// Promise/Task based
Swal.FireAsync(new SweetAlertOptions
{
Title = "Are you sure?",
Text = "You will not be able to recover this imaginary file!",
Type = SweetAlertType.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.",
SweetAlertType.Success
);
}
else if (result.Dismiss == DismissReason.Cancel)
{
Swal.FireAsync(
"Cancelled",
"Your imaginary file is safe :)",
SweetAlertType.Error
);
}
});
- No methods that return an HTMLElement are included (e. g.
Swal.getContainer()
) - The value of a
SweetAlertResult
(result.Value
) can only be a string (or a collection of strings if returned from a queue request). Numbers and booleans must be converted. Object must be parsed to/from JSON in your code. OnOpenAsync()
,OnCloseAsync()
,OnBeforeOpenAsync()
, andOnAfterCloseAsync()
can all take asynchronous callbacks. 🎉 (none will return an HTMLElement though.)- All SweetAlert2 non-Promise returning methods are available through synchronous or asynchronous methods. (e.g.
Swal.ShowLoading()
andSwal.ShowLoadingAsync()
) - Callbacks must be passed inside of objects specifically designed for the given callback property. e.g. the
InputValidator
property takes anInputValidatorCallback
created like so:
new SweetAlertOptions {
...
InputValidator = new InputValidatorCallback((string input) => input.Length == 0 ? "Please provide a value" : null, this),
...
}
this
is passed in so that the Blazor EventCallback
used behind the scenes can trigger a re-render if the state of the calling component was changed in the callback. If the callback does not require the calling component to re-render, passing in this
is optional.
These callbacks are necessary because there is currently no way to create an EventCallback
in Blazor that isn't a component parameter without using the EventCallbackFactory
which is clunky. It also allows the callback to return a value that can be used by the SweetAlert2 library. (e.g. A validation message to show if input validation fails.) Native Blazor EventCallback
s only return generic Task
s.
Compatible with all browsers than can run WebAssembly and Blazor.
IE11 | Edge | Chrome | Firefox | Safari | Opera | UC Browser |
---|---|---|---|---|---|---|
❌ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ |
- SweetAlert2 - Original SweetAlert2 project