CurrieTechnologies.Razor.SweetAlert2
0.2.1
See the version list below for details.
dotnet add package CurrieTechnologies.Razor.SweetAlert2 --version 0.2.1
NuGet\Install-Package CurrieTechnologies.Razor.SweetAlert2 -Version 0.2.1
<PackageReference Include="CurrieTechnologies.Razor.SweetAlert2" Version="0.2.1" />
paket add CurrieTechnologies.Razor.SweetAlert2 --version 0.2.1
#r "nuget: CurrieTechnologies.Razor.SweetAlert2, 0.2.1"
// Install CurrieTechnologies.Razor.SweetAlert2 as a Cake Addin
#addin nuget:?package=CurrieTechnologies.Razor.SweetAlert2&version=0.2.1
// Install CurrieTechnologies.Razor.SweetAlert2 as a Cake Tool
#tool nuget:?package=CurrieTechnologies.Razor.SweetAlert2&version=0.2.1
<p align="center"> <span style="font-size:x-large">Server-side Blazor</span> <br> + <br> <a href="https://sweetalert2.github.io/"> <img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/swal2-logo.png" alt="SweetAlert2"> </a> </p>
<p align="center"> A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. </p>
<p align="center"> <a href="https://sweetalert2.github.io/"> <img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/sweetalert2.gif" width="562"><br> See SweetAlert2 in action ↗ </a> </p>
This package is for Server-side Blazor only. For Client-side Blazor use CurrieTechnologies.Blazor.SweetAlert2
🙌 Includes themes from the Official SweetAlert2 Themes project 🙌
Installation
Install-Package CurrieTechnologies.Razor.SweetAlert2
Or grab from Nuget
Usage
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;
});
...
}
Add this script tag in your root html file (Likely _Host.cshtml), right under the <script src="_framework/blazor.server.js"></script>
tag.
<script src="_content/currietechnologiesrazorsweetalert2/sweetalert2.min.js"></script>
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!",
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
);
}
});
More examples can be found on the SweetAlert2 project site
Notable differences from the JavaScript library
- 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.)- 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.
Browser compatibility
IE11* | Edge | Chrome | Firefox | Safari | Opera | UC Browser |
---|---|---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
* ES6 Promise polyfill should be included, see usage example.
Related projects
- SweetAlert2 - Original SweetAlert2 project
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp3.0 is compatible. netcoreapp3.1 was computed. |
-
.NETCoreApp 3.0
- No dependencies.
NuGet packages (4)
Showing the top 4 NuGet packages that depend on CurrieTechnologies.Razor.SweetAlert2:
Package | Downloads |
---|---|
OneLine.Blazor
OneLine.Blazor is a set of components and utilities to be used in blazor context. |
|
NecnatLibrary.Abp.Blazor
Package Description |
|
Zoy.Core.App.Web
Package Description |
|
MoonlightPluginBase
Use this package to install all dependencies a moonlight plugins needs |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
5.6.0 | 5,891 | 3/19/2024 |
5.5.0 | 69,246 | 3/29/2023 |
5.4.0 | 24,872 | 12/14/2022 |
5.3.0 | 9,089 | 10/11/2022 |
5.2.1 | 40,230 | 4/13/2022 |
5.2.0 | 9,440 | 3/16/2022 |
5.1.0 | 60,615 | 11/8/2021 |
5.0.3 | 7,431 | 10/6/2021 |
5.0.2 | 2,734 | 9/10/2021 |
5.0.1 | 8,062 | 6/23/2021 |
5.0.0 | 4,004 | 6/16/2021 |
5.0.0-preview.1 | 148 | 6/16/2021 |
4.5.0 | 7,563 | 5/7/2021 |
4.4.0 | 4,224 | 4/7/2021 |
4.3.1 | 22,266 | 11/20/2020 |
4.3.0 | 7,944 | 11/5/2020 |
4.2.0 | 7,959 | 11/2/2020 |
4.1.0 | 1,978 | 10/22/2020 |
4.0.0 | 5,819 | 10/14/2020 |
3.0.0 | 2,781 | 9/17/2020 |
2.10.1 | 5,575 | 8/10/2020 |
2.10.0 | 5,572 | 7/14/2020 |
2.9.1 | 1,835 | 7/14/2020 |
2.9.0 | 2,667 | 6/26/2020 |
2.8.2 | 2,525 | 6/16/2020 |
2.8.1 | 2,967 | 6/8/2020 |
2.8.0 | 1,948 | 6/5/2020 |
2.7.0 | 4,323 | 5/21/2020 |
2.6.7 | 2,109 | 5/13/2020 |
2.6.6 | 29,853 | 4/20/2020 |
2.6.5 | 3,579 | 4/6/2020 |
2.6.4 | 2,132 | 4/1/2020 |
2.6.3 | 1,983 | 3/25/2020 |
2.6.2 | 1,970 | 3/23/2020 |
2.6.1 | 1,873 | 3/19/2020 |
2.6.0 | 3,502 | 3/9/2020 |
2.5.4 | 2,501 | 2/24/2020 |
2.5.3 | 1,980 | 2/19/2020 |
2.5.2 | 2,404 | 2/7/2020 |
2.5.1 | 2,046 | 1/30/2020 |
2.5.0 | 1,968 | 1/22/2020 |
2.4.1 | 1,960 | 1/21/2020 |
2.4.0 | 2,032 | 1/15/2020 |
2.3.2 | 1,961 | 1/15/2020 |
2.3.1 | 1,971 | 12/31/2019 |
2.3.0 | 4,429 | 12/12/2019 |
2.2.2 | 1,909 | 12/10/2019 |
2.2.1 | 2,130 | 12/6/2019 |
2.2.0 | 2,054 | 12/3/2019 |
2.1.14 | 1,866 | 12/3/2019 |
2.1.13 | 1,939 | 12/3/2019 |
2.1.12 | 1,886 | 12/2/2019 |
2.1.11 | 1,964 | 11/25/2019 |
2.1.10 | 1,837 | 11/21/2019 |
2.1.9 | 1,862 | 11/19/2019 |
2.1.8 | 1,892 | 11/19/2019 |
2.1.7 | 1,887 | 11/18/2019 |
2.1.6 | 1,860 | 11/15/2019 |
2.1.5 | 1,885 | 11/15/2019 |
2.1.4 | 1,821 | 11/15/2019 |
2.1.3 | 1,887 | 11/14/2019 |
2.1.2 | 1,861 | 11/13/2019 |
2.1.1 | 2,170 | 11/12/2019 |
2.1.0 | 1,910 | 11/11/2019 |
2.0.2 | 1,947 | 11/8/2019 |
2.0.1 | 1,922 | 11/6/2019 |
2.0.0 | 1,992 | 11/5/2019 |
1.2.4 | 1,964 | 11/4/2019 |
1.2.3 | 1,922 | 11/1/2019 |
1.2.2 | 1,934 | 10/23/2019 |
1.2.1 | 1,953 | 10/18/2019 |
1.2.0 | 1,900 | 10/17/2019 |
1.1.1 | 1,894 | 10/16/2019 |
1.1.0 | 1,922 | 10/11/2019 |
1.0.4 | 1,891 | 10/10/2019 |
1.0.3 | 1,842 | 10/9/2019 |
1.0.2 | 1,925 | 10/7/2019 |
1.0.1 | 1,962 | 9/30/2019 |
1.0.0 | 1,930 | 9/23/2019 |
0.10.2 | 315 | 9/19/2019 |
0.10.1 | 342 | 9/17/2019 |
0.10.0 | 306 | 9/16/2019 |
0.9.1 | 293 | 9/16/2019 |
0.9.0 | 320 | 9/4/2019 |
0.8.5 | 303 | 9/4/2019 |
0.8.0 | 297 | 9/3/2019 |
0.7.1 | 320 | 8/22/2019 |
0.7.0 | 315 | 8/19/2019 |
0.6.1 | 312 | 8/16/2019 |
0.6.0 | 311 | 8/13/2019 |
0.5.0 | 305 | 8/12/2019 |
0.4.5 | 323 | 8/9/2019 |
0.4.4 | 321 | 8/5/2019 |
0.4.3 | 320 | 8/2/2019 |
0.4.2 | 320 | 8/2/2019 |
0.4.1 | 312 | 7/29/2019 |
0.4.0 | 319 | 7/23/2019 |
0.3.1 | 1,935 | 7/18/2019 |
0.3.0 | 1,979 | 7/18/2019 |
0.2.9 | 1,973 | 7/17/2019 |
0.2.2 | 1,891 | 7/15/2019 |
0.2.1 | 1,987 | 7/9/2019 |
0.2.0 | 1,966 | 6/17/2019 |
0.1.3 | 2,007 | 6/14/2019 |
0.1.2 | 1,965 | 6/14/2019 |
0.1.0 | 1,992 | 6/14/2019 |
- Update to SweetAlert2 v8.13.3
- Allow parameterless PreConfirm callbacks