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
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Syncfusion.AspNetCore.Notifications" Version="34.1.31" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="Syncfusion.AspNetCore.Notifications" Version="34.1.31" />
                    
Directory.Packages.props
<PackageReference Include="Syncfusion.AspNetCore.Notifications" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add Syncfusion.AspNetCore.Notifications --version 34.1.31
                    
#r "nuget: Syncfusion.AspNetCore.Notifications, 34.1.31"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package Syncfusion.AspNetCore.Notifications@34.1.31
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=Syncfusion.AspNetCore.Notifications&version=34.1.31
                    
Install as a Cake Addin
#tool nuget:?package=Syncfusion.AspNetCore.Notifications&version=34.1.31
                    
Install as a Cake Tool

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 showProgressBar and progressDirection (Ltr/Rtl)
  • Auto Dismiss: Configurable timeOut and extendedTimeout for automatic close
  • Close Button: Optional showCloseButton to 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-danger styles

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 variant property
  • Show Icon: Toggle the severity icon visibility with showIcon
  • Visibility Control: Show or hide the message programmatically via the visible property
  • 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 width and height per 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

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET

Product 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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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.

Version Downloads Last Updated
34.1.31 92 7/14/2026
34.1.30 288 7/9/2026
34.1.29 487 7/6/2026