Syncfusion.AspNetCore.Notifications
34.1.31
Prefix Reserved
dotnet add package Syncfusion.AspNetCore.Notifications --version 34.1.31
NuGet\Install-Package Syncfusion.AspNetCore.Notifications -Version 34.1.31
<PackageReference Include="Syncfusion.AspNetCore.Notifications" Version="34.1.31" />
<PackageVersion Include="Syncfusion.AspNetCore.Notifications" Version="34.1.31" />
<PackageReference Include="Syncfusion.AspNetCore.Notifications" />
paket add Syncfusion.AspNetCore.Notifications --version 34.1.31
#r "nuget: Syncfusion.AspNetCore.Notifications, 34.1.31"
#:package Syncfusion.AspNetCore.Notifications@34.1.31
#addin nuget:?package=Syncfusion.AspNetCore.Notifications&version=34.1.31
#tool nuget:?package=Syncfusion.AspNetCore.Notifications&version=34.1.31
Syncfusion® ASP.NET Core Notifications Components
A comprehensive suite of ASP.NET Core notification and feedback components for delivering user notifications and status updates. Includes Toast, Message, and Skeleton components.
Supported Components
This package includes the following components:
ASP.NET Core Toast Component
The ASP.NET Core Toast Component provides non-blocking notification pop-ups that appear temporarily to inform users of events, actions, or status changes.
Key Features:
- Predefined Types: Built-in Info, Success, Warning, and Error toast variants via
ToastUtility - Positioning: Configurable X/Y position on screen (e.g., Top Right, Bottom Center)
- Progress Bar: Visual countdown bar with
showProgressBarandprogressDirection(Ltr/Rtl) - Auto Dismiss: Configurable
timeOutandextendedTimeoutfor automatic close - Close Button: Optional
showCloseButtonto allow manual dismissal - Newest on Top: Stack new toasts above existing ones using
newestOnTop - Custom Template: Render any HTML content inside the toast via
template - Action Buttons: Add interactive action buttons directly inside the toast
- Show/Hide API: Programmatically control toasts via
.show()and.hide()methods - CSS Class Types: Apply
e-toast-info,e-toast-success,e-toast-warning,e-toast-dangerstyles
Documentation
ASP.NET Core Message Component
The ASP.NET Core Message Component displays inline contextual alert messages with distinct severity levels to communicate status or guidance to the user.
Key Features:
- Severity Levels: Normal, Success, Info, Warning, and Error — each with distinct icon and colour
- Variants: Three display variants — Text, Outlined, and Filled — via the
variantproperty - Show Icon: Toggle the severity icon visibility with
showIcon - Visibility Control: Show or hide the message programmatically via the
visibleproperty - Close Button: Allow users to dismiss the message with
showCloseIcon - Custom Template: Render rich HTML content inside the message body
- Accessible: Built-in ARIA roles and keyboard accessibility
Documentation
ASP.NET Core Skeleton Component
The ASP.NET Core Skeleton Component renders animated placeholder shapes that simulate page layout while actual content is loading, improving perceived performance.
Key Features:
- Shapes: Supports Circle, Square, Text, and Rectangle placeholder shapes
- Shimmer Effects: Three built-in animation effects — Wave, Fade, and Pulse
- Configurable Size: Set
widthandheightper skeleton element - Composable: Combine multiple skeleton shapes to mirror complex UI layouts
- Accessible: Communicates loading state to screen readers via ARIA attributes
- Theme Support: Adapts automatically to Fluent, Bootstrap, Material, and other themes
Documentation
Common Setup
All Syncfusion ASP.NET Core controls share the same foundational setup steps.
1. Install NuGet Package
Install-Package Syncfusion.AspNetCore.Notifications
2. Register Tag Helper
Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.AspNetCore.Notifications
3. Add Stylesheet & Script References
In your layout file (~/Pages/Shared/_Layout.cshtml):
<head>
<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
<script src="_content/Syncfusion.AspNetCore.Notifications/scripts/sf-message.min.js"></script>
<script src="_content/Syncfusion.AspNetCore.Notifications/scripts/sf-skeleton.min.js"></script>
<script src="_content/Syncfusion.AspNetCore.Notifications/scripts/sf-toast.min.js"></script>
</head>
4. Register Script Manager
In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:
<ejs-scripts></ejs-scripts>
Quick Start
Step 1: Create a PageModel
Create ~/Pages/Index.cshtml.cs:
using Microsoft.AspNetCore.Mvc.RazorPages;
public class IndexModel : PageModel
{
public void OnGet() { }
}
Step 2: Create the View
Create ~/Pages/Index.cshtml:
@page
@model IndexModel
<div class="container mt-5">
<h2>Notifications Components Demo</h2>
<div class="mb-5">
<h5>Toast Notification</h5>
<ejs-toast id="toast">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<div class="d-flex gap-2">
<ejs-button id="infoToast" content="Info" cssClass="e-btn e-info"></ejs-button>
<ejs-button id="successToast" content="Success" cssClass="e-btn e-success"></ejs-button>
<ejs-button id="warningToast" content="Warning" cssClass="e-btn e-warning"></ejs-button>
<ejs-button id="errorToast" content="Error" cssClass="e-btn e-danger"></ejs-button>
</div>
<script>
var toasts = [
{ title: 'Information!', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' },
{ title: 'Success!', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success' },
{ title: 'Warning!', content: 'There was a problem with your connection.', cssClass: 'e-toast-warning' },
{ title: 'Error!', content: 'A problem occurred while submitting data.', cssClass: 'e-toast-danger' }
];
document.addEventListener('DOMContentLoaded', function () {
var toastObj = document.getElementById('toast').ej2_instances[0];
toastObj.target = document.body;
document.getElementById('infoToast').onclick = function () { toastObj.show(toasts[0]); };
document.getElementById('successToast').onclick = function () { toastObj.show(toasts[1]); };
document.getElementById('warningToast').onclick = function () { toastObj.show(toasts[2]); };
document.getElementById('errorToast').onclick = function () { toastObj.show(toasts[3]); };
});
</script>
</div>
<div class="mb-5">
<h5>Message Alerts</h5>
<ejs-message id="msgInfo" content="Your session will expire in 10 minutes." severity="Info" showIcon="true"></ejs-message>
<ejs-message id="msgSuccess" content="Profile updated successfully." severity="Success" showIcon="true"></ejs-message>
<ejs-message id="msgWarning" content="Storage is running low (90% used)." severity="Warning" showIcon="true"></ejs-message>
<ejs-message id="msgError" content="Failed to save changes. Please try again." severity="Error" showIcon="true" showCloseIcon="true"></ejs-message>
</div>
<div class="mb-5">
<h5>Skeleton Loading Placeholder</h5>
<div class="d-flex align-items-center gap-3 mb-3">
<ejs-skeleton id="avatarSkeleton" shape="Circle" width="48px"></ejs-skeleton>
<div>
<ejs-skeleton id="nameSkeleton" shape="Text" width="160px" height="15px"></ejs-skeleton>
<ejs-skeleton id="emailSkeleton" shape="Text" width="220px" height="12px"></ejs-skeleton>
</div>
</div>
<ejs-skeleton id="line1" shape="Rectangle" width="100%" height="16px"></ejs-skeleton>
<ejs-skeleton id="line2" shape="Rectangle" width="80%" height="16px"></ejs-skeleton>
<ejs-skeleton id="line3" shape="Rectangle" width="90%" height="16px"></ejs-skeleton>
</div>
</div>
Step 3: Run the Application
Press Ctrl+F5 to run the application in your browser.
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.
About Syncfusion®
Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
sales@syncfusion.com | Toll Free: 1-888-9-DOTNET
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net8.0 is compatible. 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. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net8.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
-
net9.0
- Newtonsoft.Json (>= 13.0.4)
- Syncfusion.AspNetCore.Base (>= 34.1.31)
- Syncfusion.AspNetCore.Buttons (>= 34.1.31)
- Syncfusion.Licensing (>= 34.1.31)
NuGet packages (2)
Showing the top 2 NuGet packages that depend on Syncfusion.AspNetCore.Notifications:
| Package | Downloads |
|---|---|
|
Syncfusion.AspNetCore.DropDowns
Syncfusion® ASP.NET Core DropDowns package provides a comprehensive set of dropdown input controls including DropDownList, ComboBox, AutoComplete, MultiSelect, ListBox, DropDownTree, and Mention. These controls support data binding from local and remote data sources, virtualization for large datasets, grouping, filtering, templates, cascading DropDowns, checkbox selection, tagging, and accessibility. They are designed to deliver a rich and consistent selection experience in forms and data-driven ASP.NET Core web applications. |
|
|
Syncfusion.AspNetCore.PdfViewer
Syncfusion® ASP.NET Core PDF Viewer control enables developers to embed a fully featured PDF viewing and annotation experience directly in web applications. It supports features like text selection and search, zoom, page navigation, bookmarks, thumbnails, form filling, digital signatures, annotation tools (sticky notes, highlight, underline, strikethrough, shapes, stamps, free text), and printing. The control renders PDFs natively in the browser without any third-party plugins and is ideal for document review, form submission, and content management scenarios in ASP.NET Core applications. |
GitHub repositories
This package is not used by any popular GitHub repositories.