Toastr is a popular JavaScript library for displaying non-blocking notifications. You can integrate Toastr with a Blazor Web App. Here are the steps:
Install Toastr Library:
Include the Toastr CSS and JavaScript files in your Blazor project. You can use a CDN or download the files.
Using CDN
Add the following references to the <head> and <body> sections of your wwwroot/index.html (for Blazor WebAssembly) or Pages/_Host.cshtml (for Blazor Server):
<!-- Add Toastr CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" /> <!-- Add Toastr JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
Create a JavaScript Wrapper:
Blazor can interact with JavaScript through JavaScript interop. Create a JavaScript file (e.g., toastrInterop.js) in the wwwroot folder and define a wrapper for Toastr:
window.toastrInterop = { showSuccess: function (message, title) { toastr.success(message, title); }, showError: function (message, title) { toastr.error(message, title); }, showWarning: function (message, title) { toastr.warning(message, title); }, showInfo: function (message, title) { toastr.info(message, title); } };
index.html or _Host.cshtml :<script src="toastrInterop.js"></script>
Use JavaScript Interop in Blazor:
Call the JavaScript functions from your Blazor components.
Example:
Create a Razor component (e.g., ToastrDemo.razor):
@inject IJSRuntime JSRuntime <h3>Toastr Demo</h3> <button @onclick="ShowSuccess">Show Success</button> <button @onclick="ShowError">Show Error</button> <button @onclick="ShowWarning">Show Warning</button> <button @onclick="ShowInfo">Show Info</button> @code { private async Task ShowSuccess() { await JSRuntime.InvokeVoidAsync("toastrInterop.showSuccess", "Operation completed successfully!", "Success"); } private async Task ShowError() { await JSRuntime.InvokeVoidAsync("toastrInterop.showError", "An error occurred while processing your request.", "Error"); } private async Task ShowWarning() { await JSRuntime.InvokeVoidAsync("toastrInterop.showWarning", "This action might have unintended consequences.", "Warning"); } private async Task ShowInfo() { await JSRuntime.InvokeVoidAsync("toastrInterop.showInfo", "Here is some important information.", "Info"); } }
Customize Toastr:
You can customize Toastr by setting options. Add a script block in your index.html or _Host.cshtml :
<script> toastr.options = { "closeButton": true, "debug": false, "newestOnTop": true, "progressBar": true, "positionClass": "toast-top-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }; </script>
Common service for Toastr:
Create a Toastr Service (e.g., ToastrService.cs) and Register the ToastrService in the Program.cs file or Startup.cs:
public class ToastrService { private readonly IJSRuntime _jsRuntime; public ToastrService(IJSRuntime jsRuntime) { _jsRuntime = jsRuntime; } public async Task ShowSuccess(string message, string title = "") { await _jsRuntime.InvokeVoidAsync("toastrInterop.showSuccess", message, title); } public async Task ShowError(string message, string title = "") { await _jsRuntime.InvokeVoidAsync("toastrInterop.showError", message, title); } public async Task ShowWarning(string message, string title = "") { await _jsRuntime.InvokeVoidAsync("toastrInterop.showWarning", message, title); } public async Task ShowInfo(string message, string title = "") { await _jsRuntime.InvokeVoidAsync("toastrInterop.showInfo", message, title); } }
Use the Service in a Component:
Inject the ToastrService into your Blazor component:
@inject ToastrService ToastrService <button @onclick="ShowSuccess">Show Success</button> @code { private async Task ShowSuccess() { await ToastrService.ShowSuccess("This is a success message!", "Success"); } }