CurrieTechnologies.Razor.SweetAlert2 0.1.3

A Razor class library for interacting with SweetAlert2.
Use in Server-side Blazor apps.

There is a newer version of this package available.
See the version list below for details.
Install-Package CurrieTechnologies.Razor.SweetAlert2 -Version 0.1.3
dotnet add package CurrieTechnologies.Razor.SweetAlert2 --version 0.1.3
<PackageReference Include="CurrieTechnologies.Razor.SweetAlert2" Version="0.1.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add CurrieTechnologies.Razor.SweetAlert2 --version 0.1.3
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

🙌 Includes themes from the Official SweetAlert2 Themes project 🙌

This package is for Server-side Blazor only. For Client-side Blazor use CurrieTechnologies.Blazor.SweetAlert2

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 &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt; 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(), and OnAfterCloseAsync() 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 an InputValidatorCallback created like so:
new SweetAlertOptions {
	...
	InputValidator = new InputValidatorCallback(this, (string input) => input.Length == 0 ? "Please provide a value" : null),
	...
}

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.
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 EventCallbacks only return generic Tasks.

🙌 Includes themes from the Official SweetAlert2 Themes project 🙌

This package is for Server-side Blazor only. For Client-side Blazor use CurrieTechnologies.Blazor.SweetAlert2

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 &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt; 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(), and OnAfterCloseAsync() 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 an InputValidatorCallback created like so:
new SweetAlertOptions {
	...
	InputValidator = new InputValidatorCallback(this, (string input) => input.Length == 0 ? "Please provide a value" : null),
	...
}

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.
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 EventCallbacks only return generic Tasks.

Release Notes

- Improve IE11 compatability
- Update Nuget description

  • .NETCoreApp 3.0

    • No dependencies.

NuGet packages (4)

Showing the top 4 NuGet packages that depend on CurrieTechnologies.Razor.SweetAlert2:

Package Downloads
OneLine
OneLine is a project that can be used on a server backend as well on client side application that support net standard like xamarin or blazor.
OneLine.Blazor
OneLine.Blazor is a set of components and utilities to be used in blazor context.
Necnat.Client
Package Description
Necnat.Authorization.Client.Shared.ptbr
Package Description

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
4.3.1 799 11/20/2020
4.3.0 1,323 11/5/2020
4.2.0 636 11/2/2020
4.1.0 243 10/22/2020
4.0.0 383 10/14/2020
3.0.0 784 9/17/2020
2.10.1 1,432 8/10/2020
2.10.0 919 7/14/2020
2.9.1 114 7/14/2020
2.9.0 938 6/26/2020
2.8.2 708 6/16/2020
2.8.1 679 6/8/2020
2.8.0 176 6/5/2020
2.7.0 1,252 5/21/2020
2.6.7 340 5/13/2020
2.6.6 726 4/20/2020
2.6.5 1,193 4/6/2020
2.6.4 283 4/1/2020
2.6.3 210 3/25/2020
2.6.2 264 3/23/2020
2.6.1 178 3/19/2020
2.6.0 1,018 3/9/2020
2.5.4 697 2/24/2020
2.5.3 219 2/19/2020
2.5.2 493 2/7/2020
2.5.1 294 1/30/2020
2.5.0 291 1/22/2020
2.4.1 164 1/21/2020
2.4.0 256 1/15/2020
2.3.2 161 1/15/2020
2.3.1 251 12/31/2019
2.3.0 476 12/12/2019
2.2.2 177 12/10/2019
2.2.1 355 12/6/2019
2.2.0 243 12/3/2019
2.1.14 161 12/3/2019
2.1.13 156 12/3/2019
2.1.12 158 12/2/2019
2.1.11 169 11/25/2019
2.1.10 155 11/21/2019
2.1.9 143 11/19/2019
2.1.8 162 11/19/2019
2.1.7 142 11/18/2019
2.1.6 163 11/15/2019
2.1.5 185 11/15/2019
2.1.4 147 11/15/2019
2.1.3 145 11/14/2019
2.1.2 154 11/13/2019
2.1.1 380 11/12/2019
2.1.0 145 11/11/2019
2.0.2 166 11/8/2019
2.0.1 211 11/6/2019
2.0.0 160 11/5/2019
1.2.4 151 11/4/2019
1.2.3 157 11/1/2019
1.2.2 185 10/23/2019
1.2.1 211 10/18/2019
1.2.0 161 10/17/2019
1.1.1 164 10/16/2019
1.1.0 182 10/11/2019
1.0.4 181 10/10/2019
1.0.3 178 10/9/2019
1.0.2 168 10/7/2019
1.0.1 215 9/30/2019
1.0.0 206 9/23/2019
0.10.2 112 9/19/2019
0.10.1 116 9/17/2019
0.10.0 115 9/16/2019
0.9.1 111 9/16/2019
0.9.0 123 9/4/2019
0.8.5 109 9/4/2019
0.8.0 110 9/3/2019
0.7.1 121 8/22/2019
0.7.0 129 8/19/2019
0.6.1 133 8/16/2019
0.6.0 122 8/13/2019
0.5.0 124 8/12/2019
0.4.5 129 8/9/2019
0.4.4 134 8/5/2019
0.4.3 137 8/2/2019
0.4.2 133 8/2/2019
0.4.1 127 7/29/2019
0.4.0 123 7/23/2019
0.3.1 227 7/18/2019
0.3.0 209 7/18/2019
0.2.9 208 7/17/2019
0.2.2 212 7/15/2019
0.2.1 224 7/9/2019
0.2.0 226 6/17/2019
0.1.3 230 6/14/2019
0.1.2 229 6/14/2019
0.1.0 224 6/14/2019
Show less