syncfusion-aspnetcore-notifications
Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options.
ソース情報
- リポジトリ
- syncfusion/aspnetcore-ui-components-skills
- ソースの最終更新活動
- 2026年7月14日 05:10
- 検出された SKILL.md の言語
- 英語
- スター
- 0
- フォーク
- 2
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
23 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- syncfusion-aspnetcore-notifications
- description
- Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options.
- metadata
- {"author":"Syncfusion Inc","version":"34.1.29","category":"Notifications"}
# Implementing Syncfusion ASP.NET Core Notifications
## Toast
The Toast component displays brief, auto-dismissing notification messages on screen. It supports positioning, animations, action buttons, progress bars, templates, timeout control, and accessibility—covering simple alerts to rich notification UIs.
**Do NOT skip this skill if users mention:** notifications, alerts, snackbar, brief messages, dismiss popup, toast utility, progress notification, action button popup.
---
### Component Overview
#### Key Capabilities
| Feature | Description |
|---------|-------------|
| **Types / cssClass** | Predefined styles: `e-toast-success`, `e-toast-info`, `e-toast-warning`, `e-toast-danger` |
| **Position** | X: Left/Center/Right, Y: Top/Bottom or custom pixel/percent values |
| **Timeout** | Auto-dismiss via `timeOut`; `extendedTimeout` for hover delay; `0` for static toast |
| **Progress Bar** | Visual countdown bar with `showProgressBar`; direction via `progressDirection` |
| **Action Buttons** | Add button models with click handlers via `buttons` / `e-toast-buttonmodelprops` |
| **Templates** | Full custom HTML via `template` property or `<e-content-template>` tag |
| **Animation** | Custom show/hide animation effects via `animation` settings |
| **Close Button** | Manual close via `showCloseButton` |
| **Multiple Toasts** | Separate toast instances per position; `newestOnTop` ordering |
| **Toast Utility** | `ToastUtility.show()` for zero-markup quick toasts |
| **Accessibility** | WAI-ARIA `role="alert"`, WCAG 2.2 AA, Section 508, RTL support |
#### NuGet Package
```
Install-Package Syncfusion.EJ2.AspNet.Core
```
#### Setup (one-time)
**`~/Pages/_ViewImports.cshtml`**
```cshtml
@addTagHelper *, Syncfusion.EJ2
```
**`~/Pages/Shared/_Layout.cshtml`** — inside `<head>`:
```cshtml
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
```
And before `</body>`:
```cshtml
<ejs-scripts></ejs-scripts>
```
---
### Documentation & Navigation Guide
#### 📖 Getting Started
📄 **Read:** [references/getting-started.md](references/toast-getting-started.md)
- Installation and NuGet setup
- Tag helper registration
- Basic toast with title and content
- Triggering toast via JavaScript `show()` method
- First working example
#### 📖 Configuration & Options
📄 **Read:** [references/configuration.md](references/toast-configuration.md)
- Title and content setup
- Custom target container
- Close button (`showCloseButton`)
- Progress bar (`showProgressBar`, `progressDirection`)
- Newest-on-top ordering (`newestOnTop`)
- Width and height customization
- HTML sanitizer (`enableHtmlSanitizer`)
#### 📖 Position & Layout
📄 **Read:** [references/position.md](references/toast-position.md)
- Predefined X/Y positions (Left, Center, Right / Top, Bottom)
- Custom pixel or percentage positions
- Multiple toasts in different positions
- Full-width toast with `width="100%"`
#### 📖 Timeout & Lifecycle
📄 **Read:** [references/timeout.md](references/toast-timeout.md)
- Auto-dismiss with `timeOut` (milliseconds)
- Extended hover timeout (`extendedTimeout`)
- Static (persistent) toast with `timeOut="0"`
- Closing toast on click/tap
- Restricting maximum visible toasts
- Preventing duplicate toasts
#### 📖 Action Buttons
📄 **Read:** [references/action-buttons.md](references/toast-action-buttons.md)
- Adding buttons with `e-toast-buttonmodelprops`
- Button click handlers
- Dismissing toast from a button click
#### 📖 Templates & Animation
📄 **Read:** [references/templates-animation.md](references/toast-templates-animation.md)
- Static HTML template via `template` property
- Dynamic content template with `<e-content-template>`
- Changing templates dynamically on `show()`
- Custom show/hide animation effects
- Playing audio before toast opens
#### 📖 Toast Types & Styling
📄 **Read:** [references/types-and-styling.md](references/toast-types-and-styling.md)
- Predefined types using `cssClass` (success, info, warning, danger)
- CSS customization for title, content, icon, background
- `ToastUtility.show()` with predefined types
- `ToastUtility.show()` with full ToastModel
- Mobile swipe-close prevention
#### 📖 Accessibility
📄 **Read:** [references/accessibility.md](references/toast-accessibility.md)
- WAI-ARIA role="alert"
- WCAG 2.2 AA compliance
- Section 508 support
- RTL rendering (`enableRtl`)
- Screen reader compatibility
#### 📖 API Reference
📄 **Read:** [references/api.md](references/toast-api.md)
- All properties with types and defaults
- All events (BeforeOpen, Open, Close, BeforeClose, Click, Created, Destroyed, BeforeSanitizeHtml)
- Sub-component types (ToastPosition, ToastAnimationSettings, ToastButtonModelProp)
---
### Quick Start Example
```cshtml
@* ~/Pages/Index.cshtml *@
<ejs-toast id="toast_default"
title="Friend Request"
content="Matt sent you a friend request."
showCloseButton="true"
showProgressBar="true"
timeOut="5000">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<ejs-button id="showBtn" content="Show Toast" cssClass="e-btn"></ejs-button>
<script>
setTimeout(function () {
var toast = document.getElementById('toast_default').ej2_instances[0];
toast.target = document.body;
toast.show();
}, 500);
document.getElementById('showBtn').addEventListener('click', function () {
var toast = document.getElementById('toast_default').ej2_instances[0];
toast.show();
});
</script>
```
---
### Common Patterns
#### Pattern 1: Show Typed Notification (Success / Error / Warning / Info)
```cshtml
<ejs-toast id="typed_toast">
<e-toast-position X="Right" Y="Top"></e-toast-position>
</ejs-toast>
<script>
var toasts = [
{ title: 'Success !', content: 'Record saved successfully.', cssClass: 'e-toast-success' },
{ title: 'Error !', content: 'Failed to save record.', cssClass: 'e-toast-danger' },
{ title: 'Warning !', content: 'Unsaved changes present.', cssClass: 'e-toast-warning' },
{ title: 'Info !', content: 'Session expires in 5 min.', cssClass: 'e-toast-info' }
];
function showToast(index) {
var toast = document.getElementById('typed_toast').ej2_instances[0];
toast.target = document.body;
toast.show(toasts[index]);
}
</script>
```
#### Pattern 2: Toast Utility (Zero Markup)
```javascript
// Predefined type — no container element needed
ejs.notifications.ToastUtility.show('Record saved successfully', 'Success', 5000);
// With full model
ejs.notifications.ToastUtility.show({
title: 'Upload Complete',
content: 'Your file has been uploaded.',
timeOut: 5000,
position: { X: 'Right', Y: 'Bottom' },
showCloseButton: true
});
```
#### Pattern 3: Action Buttons with Close Handler
```cshtml
<ejs-toast id="action_toast" title="New Message" timeOut="0">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
<e-toast-buttonmodelprops>
<e-toast-buttonmodelprop model="ViewBag.AcceptBtn" click="onAccept"></e-toast-buttonmodelprop>
<e-toast-buttonmodelprop model="ViewBag.DismissBtn"></e-toast-buttonmodelprop>
</e-toast-buttonmodelprops>
</ejs-toast>
<script>
function onAccept(e) {
var toastEle = ej.base.closest(e.target, '.e-toast');
document.getElementById('action_toast').ej2_instances[0].hide(toastEle);
}
</script>
```
```csharp
// Controller
ViewBag.AcceptBtn = new { content = "Accept" };
ViewBag.DismissBtn = new { content = "Dismiss" };
```
#### Pattern 4: Prevent Duplicate Toast
```cshtml
<ejs-toast id="dup_toast" beforeOpen="onBeforeOpen" close="onClose"
title="Alert" content="Network issue detected.">
<e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>
<script>
var isOpen = false;
function onBeforeOpen(e) {
if (isOpen) { e.cancel = true; }
else { isOpen = true; }
}
function onClose() { isOpen = false; }
</script>
```
#### Pattern 5: Restrict Maximum Toasts
```cshtml
<ejs-toast id="max_toast" beforeOpen="onBeforeOpen"
title="Notification" content="New item added.">
<e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>
<script>
var maxCount = 3;
function onBeforeOpen(e) {
var toast = document.getElementById('max_toast').ej2_instances[0];
if (toast.element.childElementCount >= maxCount) {
e.cancel = true;
}
}
</script>
```
---
## Message
The Syncfusion `Message` component displays contextual messages with visual severity indicators—icons and colors—to communicate importance and context to end users. It supports five severity levels, three visual variants, close-icon dismissal, content templates, and full accessibility compliance.
### Documentation & Navigation Guide
#### Getting Started
📄 **Read:** [references/message-getting-started.md](references/message-getting-started.md)
- NuGet installation of `Syncfusion.EJ2.AspNet.Core`
- Tag helper registration in `_ViewImports.cshtml`
- Stylesheet and script registration in `_Layout.cshtml`
- Adding the first `<ejs-message>` tag helper
- Content via `content` attribute or inner content
- First working example
#### Severity Levels
📄 **Read:** [references/message-severities.md](references/message-severities.md)
- Five severity levels: `Normal`, `Success`, `Info`, `Warning`, `Error`
- `severity` attribute usage and valid values
- Visual distinctions (icons and colors per severity)
- Choosing the right severity for your use case
- Dynamic severity from a model value
#### Display Variants
📄 **Read:** [references/message-variants.md](references/message-variants.md)
- Three variants: `Text` (default), `Outlined`, `Filled`
- `variant` attribute usage
- Combining variant with severity
- Visual trade-offs and when to use each
#### Icons and Close Icon
📄 **Read:** [references/message-icons-and-close.md](references/message-icons-and-close.md)
- Severity icon visibility: `showIcon` attribute (default `true`)
- Disabling severity icons
- Custom severity icons via `cssClass` CSS overrides
- Close icon: `showCloseIcon` attribute (default `false`)
- `closed` event handler for dismiss callbacks
- Toggling visibility with the `visible` attribute
#### Customization and Templates
📄 **Read:** [references/message-customization.md](references/message-customization.md)
- Content alignment: left (default), center (`e-content-center`), right (`e-content-right`)
- Custom appearance with `cssClass`
- CSS-only message rendering (no JS, pure HTML + CSS)
- Content templates: `<e-content-template>` child element
- RTL support via `enableRtl`
- Persistence with `enablePersistence`
#### Accessibility
📄 **Read:** [references/message-accessibility.md](references/message-accessibility.md)
- WCAG 2.2, Section 508, ADA compliance
- WAI-ARIA attributes (`role="alert"`, `aria-label`)
- Keyboard navigation (Tab, Enter/Space)
- Screen reader support
#### API Reference
📄 **Read:** [references/message-api.md](references/message-api.md)
- All properties with types, defaults, and tag attribute names
- Events: `closed`, `created`, `destroyed`
GitHubで見るこの SKILL.md は非常に大きいため、SkillsMP では最初のセクションだけを表示しています。 GitHubで見る
