ToastNotificationJs 1.0.1

There is a newer version of this package available.
See the version list below for details. 
dotnet add package ToastNotificationJs --version 1.0.1
                    


                    

                
NuGet\Install-Package ToastNotificationJs -Version 1.0.1
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="ToastNotificationJs" Version="1.0.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="ToastNotificationJs" Version="1.0.1" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="ToastNotificationJs" />
                    


                            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 ToastNotificationJs --version 1.0.1
                    


                    

                
#r "nuget: ToastNotificationJs, 1.0.1"
#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. 
#addin nuget:?package=ToastNotificationJs&version=1.0.1
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=ToastNotificationJs&version=1.0.1
                    


                            Install as a Cake Tool

ToastNotificationJs

A reusable toast notification component for ASP.NET Core and Classic ASP.NET MVC projects, designed to show beautiful, customizable notifications with simple JavaScript and CSS.

Features

  • Display toast notifications at any screen position (bottom-center by default).
  • Multiple types of notifications: success, error, info, warning, or custom colors.
  • Smooth slide-in/out animations from different directions.
  • Progress bar with timeout countdown.
  • Close button to manually dismiss notifications.
  • Compatible with both ASP.NET Core and classic MVC projects.
  • Easy to integrate with minimal setup.

Installation

You can install via NuGet package manager:

Install-Package ToastNotificationJs

Or download the source from GitHub repository.

Usage

For ASP.NET Core

  1. Include CSS and JS files from wwwroot/toastnotification/ in your layout:
<link rel="stylesheet" href="~/toastnotification/ToastNotification.css" />
<script src="~/toastnotification/ToastNotification.js"></script>
  1. Add a container div anywhere in your layout or page:
<div id="toastContainer" class="toast-container"></div>
  1. Call the showToast JavaScript function to display notifications:
showToast('Hello from ASP.NET Core!', 'success', 'Success', 4000);

For Classic ASP.NET MVC

  1. Reference CSS and JS files from the content/toastnotification/ folder in your _Layout.cshtml:
<link href="@Url.Content("~/content/toastnotification/ToastNotification.css")" rel="stylesheet" />
<script src="@Url.Content("~/content/toastnotification/ToastNotification.js")"></script>
  1. Add the container div:
<div id="toastContainer" class="toast-container"></div>
  1. Use showToast as above. A reusable toast notification component for ASP.NET Core and Classic ASP.NET MVC projects, designed to show beautiful, customizable notifications with simple JavaScript and CSS.

Features

  • Display toast notifications at any screen position (bottom-center by default).
  • Multiple types of notifications: success, error, info, warning, or custom colors.
  • Smooth slide-in/out animations from different directions.
  • Progress bar with timeout countdown.
  • Close button to manually dismiss notifications.
  • Compatible with both ASP.NET Core and classic MVC projects.
  • Easy to integrate with minimal setup.

Installation

You can install via NuGet package manager:

Install-Package ToastNotificationJs

Or download the source from GitHub repository.

Usage

For ASP.NET Core

  1. Include CSS and JS files from wwwroot/toastnotification/ in your layout:
<link rel="stylesheet" href="~/toastnotification/ToastNotification.css" />
<script src="~/toastnotification/ToastNotification.js"></script>
  1. Add a container div anywhere in your layout or page:
<div id="toastContainer" class="toast-container"></div>
  1. Call the showToast JavaScript function to display notifications:
showToast('Hello from ASP.NET Core!', 'success', 'Success', 4000);

For Classic ASP.NET MVC

  1. Reference CSS and JS files from the content/toastnotification/ folder in your _Layout.cshtml:
<link href="@Url.Content("~/content/toastnotification/ToastNotification.css")" rel="stylesheet" />
<script src="@Url.Content("~/content/toastnotification/ToastNotification.js")"></script>
  1. Add the container div:
<div id="toastContainer" class="toast-container"></div>
  1. Use showToast as above.

API

showToast(message, color = 'info', title = null, duration = 5000, position = 'bottom-center')
  • message (string): Text to show.
  • color (string): One of 'success', 'error', 'info', 'warning', or any valid CSS color.
  • title (string | null): Optional title text.
  • duration (number): Duration in milliseconds before toast auto hides.
  • position (string): Position on screen. Options:
    • 'bottom-center' (default)
    • 'bottom-left'
    • 'bottom-right'
    • 'top-center'
    • 'top-left'
    • 'top-right'

Demo

Demo Screenshot

Check the live demo for examples.

License

MIT License © 2025 Kaveh Norozi

راهنمای استفاده (فارسی)

ToastNotificationJs یک کامپوننت اعلان توست قابل استفاده مجدد برای پروژه‌های ASP.NET Core و MVC کلاسیک است.

امکانات

  • نمایش اعلان‌ها در هر جای صفحه با حالت پیش‌فرض پایین وسط.
  • انواع اعلان‌ها: موفقیت، خطا، اطلاع، هشدار یا رنگ دلخواه.
  • انیمیشن روان ورود و خروج اعلان‌ها.
  • نوار پیشرفت زمان‌بندی.
  • دکمه بستن دستی اعلان.
  • سازگار با ASP.NET Core و MVC کلاسیک.
  • راه‌اندازی سریع و آسان.

نصب

با استفاده از NuGet:

Install-Package ToastNotificationJs

یا از گیت‌هاب دانلود کنید:

https://github.com/kavehnorozi/ToastNotificationJs

استفاده

در ASP.NET Core
  1. لینک کردن CSS و JS:
<link rel="stylesheet" href="~/toastnotification/ToastNotification.css" />
<script src="~/toastnotification/ToastNotification.js"></script>
  1. اضافه کردن کانتینر:
<div id="toastContainer" class="toast-container"></div>
  1. استفاده از تابع جاوااسکریپت:
showToast('سلام از ASP.NET Core!', 'success', 'موفقیت', 4000);
در MVC کلاسیک
  1. اضافه کردن فایل‌ها در _Layout.cshtml:
<link href="@Url.Content("~/content/toastnotification/ToastNotification.css")" rel="stylesheet" />
<script src="@Url.Content("~/content/toastnotification/ToastNotification.js")"></script>
  1. اضافه کردن کانتینر:
<div id="toastContainer" class="toast-container"></div>
  1. استفاده مانند قبل.

API فارسی

showToast(پیام, رنگ = 'info', عنوان = null, مدت = 5000, موقعیت = 'bottom-center')
  • پیام: متن اعلان
  • رنگ: success، error، info، warning یا رنگ CSS دلخواه
  • عنوان: متن عنوان اختیاری
  • مدت: زمان به میلی‌ثانیه برای نمایش اعلان
  • موقعیت: محل نمایش اعلان، گزینه‌ها:
    • پایین وسط (پیش‌فرض)
    • پایین چپ
    • پایین راست
    • بالا وسط
    • بالا چپ
    • بالا راست

تماس

برای سوالات، پیشنهادات و مشکلات به GitHub Issues مراجعه کنید.

امیدوارم این پروژه برای شما مفید باشد!


یا از گیت‌هاب دانلود کنید:

[https://github.com/kavehnorozi/ToastNotificationJs](https://github.com/kavehnorozi/ToastNotificationJs)

### استفاده

#### در ASP.NET Core

1. لینک کردن CSS و JS:

```html
<link rel="stylesheet" href="~/toastnotification/ToastNotification.css" />
<script src="~/toastnotification/ToastNotification.js"></script>
  1. اضافه کردن کانتینر:
<div id="toastContainer" class="toast-container"></div>
  1. استفاده از تابع جاوااسکریپت:
showToast('سلام از ASP.NET Core!', 'success', 'موفقیت', 4000);
در MVC کلاسیک
  1. اضافه کردن فایل‌ها در _Layout.cshtml:
<link href="@Url.Content("~/content/toastnotification/ToastNotification.css")" rel="stylesheet" />
<script src="@Url.Content("~/content/toastnotification/ToastNotification.js")"></script>
  1. اضافه کردن کانتینر:
<div id="toastContainer" class="toast-container"></div>
  1. استفاده مانند قبل.

API فارسی

showToast(پیام, رنگ = 'info', عنوان = null, مدت = 5000, موقعیت = 'bottom-center')
  • پیام: متن اعلان
  • رنگ: success، error، info، warning یا رنگ CSS دلخواه
  • عنوان: متن عنوان اختیاری
  • مدت: زمان به میلی‌ثانیه برای نمایش اعلان
  • موقعیت: محل نمایش اعلان، گزینه‌ها:
    • پایین وسط (پیش‌فرض)
    • پایین چپ
    • پایین راست
    • بالا وسط
    • بالا چپ
    • بالا راست

تماس

برای سوالات، پیشنهادات و مشکلات به GitHub Issues مراجعه کنید.

امیدوارم این پروژه برای شما مفید باشد!

There are no supported framework assets in this package.

Learn more about Target Frameworks and .NET Standard.

This package has no dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.0.1 119 6/2/2025
2.0.0 119 6/2/2025
1.0.1 121 5/29/2025
1.0.0 126 5/29/2025

Initial release: supports both ASP.NET Core (wwwroot-based projects) and ASP.NET MVC Classic (Script and Content folders). Includes CSS animations and simple configuration.