Dynamic Bootstrap Toasts in ASP.NET Core: A Configuration-Driven Approach

ASP .NET Core Bootstrap toast

Bootstrap toasts provide lightweight, mobile-style notifications for web applications. By merging C# code with toast components, developers can create flexible, configuration-driven notification systems.

Why This Matters

Static UI components often lead to code duplication and lack of flexibility in production environments. Using dependency injection to read notification settings from configuration files allows for centralized management of UI alerts without redeploying application logic, addressing the technical reality of maintaining complex notification states across a distributed system.

Key Insights

• JSON-based configuration allows for multiple named toast profiles such as DatabaseError with custom titles and delays.
• The ToastOptions and ToastMessageOptions classes enable type-safe parsing of application settings.
• Dependency Injection in Program.cs via builder.Services.Configure facilitates scoped access to UI configurations.
• Razor Page handlers like OnPostShowToast utilize [TempData] to persist notification state across page redirects.
• Bootstrap 5 integration requires minimal JavaScript, focusing on the DOMContentLoaded event to initialize the toast instance.

Working Examples

Appsettings.json configuration for database error toast

{
"ToastOptions": {
"DatabaseError": {
"ToastMessage": "Failed to open database!",
"ToastTitle": "Error",
"ToastDelay": 10000
}
}
}

C# POCO classes for mapping JSON configuration

public class ToastOptions
{
public ToastMessageOptions DatabaseError { get; set; } = new();
}
public class ToastMessageOptions
{
public string ToastMessage { get; set; } = string.Empty;
public string ToastTitle { get; set; } = string.Empty;
public int ToastDelay { get; set; }
}

Razor Page backend handling the toast trigger and data persistence

public IActionResult OnPostShowToast()
{
var options = readToast.GetToastOptions();
ToastTitle = options.DatabaseError.ToastTitle;
ToastMessage = options.DatabaseError.ToastMessage;
ToastDelay = options.DatabaseError.ToastDelay;
return RedirectToPage();
}

Practical Applications

• Error Notification System: Using the DatabaseError configuration to alert users of backend failures with a 10-second persistent toast.
• Maintenance Pitfall: Avoid hard-coding notification strings in HTML; use configuration-driven models to prevent redeployment for simple text changes.

References:

• https://dev.to/karenpayneoregon/asp-net-core-bootstrap-toast-570