Post
Ask Question

List Of Notification Libraries And Plugins For JavaScript And JQuery Used In ASP.NET MVC Razor

Introduction

JavaScript is a programming language whereas jQuery is a framework to help make writing in JavaScript easier. It's particularly useful for simply traversing the DOM in an HTML page. jQuery was written using JavaScript, and is a library to be used by JavaScript.

 
Top most used notification libraries and plugins for JavaScript and jQuery -
  • Normal JavaScript
  • Bootbox
  • Noty
  • Toastr
  • AmaranJS
  • Notific8
  • Notie.js
  • iziToast
  • VEX
  • Sweet Alert
  • Alertify.js
  • ohSnap! 
Description

I have collected the list of the most useful and beautiful notification plugins in JavaScript and jQuery for ASP.NET web applications.

Project Solution File Download Link

Click Here>>

Steps to be followed

Create an MVC web application named "SatyaprakashTop10Javascript".
 
 
 
1. Normal notification library and plugin.

This library is used for normal notification purposes as it was used in earlier projects.

I created a Controller class file named "HomeController.cs". Inside, I created one action result method named "Normal()".
  1. public ActionResult Normal()  
  2.         {  
  3.             return View();  
  4.         } 
Using that, I created one View named "Normal.cshtml". Here, I used some script and css.

By using solution file, you can see details about the codes. I have just described the most major part. 
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 alert("User Name Should Not Be Empty !!");  
  6.             }  
  7.             else if ($("#ValidatePwdtextbox").val() == "") {  
  8.                 alert("Password Should Not Be Empty !!");  
  9.             }  
  10.             else {  
  11.                 alert("Registration Successful.");  
  12.             }  
  13.         });  
  14.     });  
  15. </script>  
OUTPUT

If isername and password fields are empty.



If both inputs are valid.

 
 
2. Bootbox notification library and plugin.

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing, or removing any of the required DOM elements or JS event handlers.

In HomeController.cs,
  1. public ActionResult Bootbox()  
  2.         {  
  3.             return View();  
  4.         } 
In Bootbox.cshtml,
  1. In Bootbox.cshtml :  
  2.   
  3. <script type="text/javascript">  
  4.         $(document).ready(function () {  
  5.             $("#SubmitProject").click(function () {  
  6.                 if ($("#ValidateNametextbox").val() == "") {  
  7.                     bootbox.alert("User Name Should Not Be Empty !!");  
  8.                 }  
  9.                else if ($("#ValidatePwdtextbox").val() == "") {  
  10.                    bootbox.alert("Password Should Not Be Empty !!");  
  11.                }  
  12.                else  
  13.                {  
  14.                    bootbox.alert("Registration Successful.");  
  15.                }  
  16.             });  
  17.         });  
  18.     </script> 
OUTPUT

If Username and Password fields are empty.



If both inputs are valid.

 
3. toastr notification library and plugin.

Toastr is a jQuery plugin, the goal is to create a simple core library that can be easily customized and extended.
The notifications are non-blocking, the position, animation and theme are customizable.

In HomeController.cs,
  1. public ActionResult toastr()  
  2.         {  
  3.             return View();  
  4.         } 
In toastr.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 toastr.warning('User Name Should Not Be Empty !!')  
  6.             }  
  7.             else if ($("#ValidatePwdtextbox").val() == "") {  
  8.                 toastr.warning('Password Should Not Be Empty !!')  
  9.             }  
  10.             else {  
  11.                 toastr.success('Registration Successful.')  
  12.             }  
  13.         });  
  14.     });  
  15. </script> 
OUTPUT

If Username and Password fields are empty.



If both Inputs are Valid.

 
4. Notie notification library and plugin.

Notie.js has an interesting design and is very flexible and customizable. It includes confirm and input features.

In HomeController.cs,
  1. public ActionResult Notie()  
  2.         {  
  3.             return View();  
  4.         } 
In Note.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 notie.alert({ type: 3, text: 'User Name Should Not Be Empty !!' })  
  6.             }  
  7.             else if ($("#ValidatePwdtextbox").val() == "") {  
  8.                 notie.alert({ type: 3, text: 'Password Should Not Be Empty !!' })  
  9.             }  
  10.             else {  
  11.                 notie.alert({ type: 1, text: 'Registration Successful.' })  
  12.             }  
  13.         });  
  14.     });  
  15. </script> 
OUTPUT

If Username and Password fields are empty.



If both Inputs are valid.

 
 
5. iziToast notification library and plugin.

Elegant, responsive, flexible, and lightweight notification plugin that supports Drag/Touch support with no dependencies. It is supported by all modern browsers (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge). iziToast provides an useful events API (global and per instance) and more than 60 options.

In HomeController.cs,
  1. public ActionResult iziToast()  
  2.         {  
  3.             return View();  
  4.         } 
In iziToast.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 iziToast.error({  
  6.                     title: 'Error',  
  7.                     message: 'User Name Should Not Be Empty !!',  
  8.                 });  
  9.             }  
  10.             else if ($("#ValidatePwdtextbox").val() == "") {  
  11.                 iziToast.error({  
  12.                     title: 'Error',  
  13.                     message: 'Password Should Not Be Empty !!',  
  14.                 });  
  15.             }  
  16.             else {  
  17.                 iziToast.success({  
  18.                     title: 'OK',  
  19.                     message: 'Registration Successful.',  
  20.                 });  
  21.             }  
  22.         });  
  23.     });  
  24. </script> 
OUTPUT

If Username and Password fields are empty.



If both inputs are valid.

 
 
6. VEX notification library and plugin.

VEX is a modern dialog library which is highly configurable and easy to style, developed by HubSpot.
With a cool design, good performance this plugin gets the third place in the top.
It has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.

In HomeController.cs,
  1. public ActionResult VEX()  
  2.         {  
  3.             return View();  
  4.         } 
In VEX.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 vex.dialog.alert({  
  6.                     message: 'User Name Should Not Be Empty !!',  
  7.                     className: 'vex-theme-flat-attack'  
  8.                 });  
  9.             }  
  10.             else if ($("#ValidatePwdtextbox").val() == "") {  
  11.                 vex.dialog.alert({  
  12.                     message: 'Password Should Not Be Empty !!',  
  13.                     className: 'vex-theme-flat-attack'  
  14.                 });  
  15.             }  
  16.             else {  
  17.                 vex.dialog.alert({  
  18.                     message: 'Registration Successful.',  
  19.                     className: 'vex-theme-os'  
  20.                 });  
  21.             }  
  22.         });  
  23.     });  
  24. </script>  
OUTPUT

If Username and Password fields are empty.



If both inputs are valid.

 
 
7. SweetAlert notification library and plugin.

Sweet Alert is a beautiful and really sweet replacement for the default alert function of JavaScript. With a smooth animation, cool design, and easy implementation, Sweet Alert has the second place from the top.

A special feature of sweet alert is that we can trigger any AJAX call and await till it is finished. This allows us to make the asynchronous handle with the user very easy and comfortable. SweetAlert can easily be themed to fit your site's design.

In HomeController.cs,
  1. public ActionResult SweetAlert()  
  2.         {  
  3.             return View();  
  4.         } 
In SweetAlert.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 sweetAlert("User Name Is Empty !!", "Please Mention", "error");  
  6.             }  
  7.             else if ($("#ValidatePwdtextbox").val() == "") {  
  8.                 sweetAlert("Password Is Empty !!", "Please Mention", "error");  
  9.             }  
  10.             else {  
  11.                 sweetAlert("Congratulations!!", "Registration Successful.", "success");  
  12.             }  
  13.         });  
  14.     });  
  15. </script> 
OUTPUT
 
If Username and Password fields are empty.



If both inputs are valid.

 
8. Alertify notification library and plugin.

In the first place, we have Alertify.js, this plugin is in our opinion one of the most complete, useful, optimized and cool notification plugin that you will find on the internet for free. However, this is not only a plugin but a JavaScript framework for developing pretty browser dialogs and notifications. The code is pretty easy to understand and the implementation is a piece of cake,
the plugin is very straightforward.

Alertify.js have i18n and RightToLeft Support, have many themes and is customizable to the core.

In HomeController.cs,
  1. public ActionResult Alertify()  
  2.        {  
  3.            return View();  
  4.        } 
In Alertify.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 alertify.error('User Name Is Empty !!');  
  6.             }  
  7.             else if ($("#ValidatePwdtextbox").val() == "") {  
  8.                 alertify.error('Password Is Empty !!');  
  9.             }  
  10.             else {  
  11.                 alertify.success('Registration Successful.');  
  12.             }  
  13.         });  
  14.     });  
  15. </script> 
OUTPUT
 
If Username and Password fields are empty.



If both inputs are valid.

 
 
 
 
9. OhSnap notification library and plugin.

ohSnap is a simple notification jQuery/Zepto library designed to be used in mobile apps. Really simplistic but with good performance.

In HomeController.cs,
  1. public ActionResult OhSnap()  
  2.         {  
  3.             return View();  
  4.         } 
In OhSnap.cshtml,
  1. <div id="ohsnap">  
  2.     <script type="text/javascript">  
  3.         $(document).ready(function () {  
  4.             $("#SubmitProject").click(function () {  
  5.                 if ($("#ValidateNametextbox").val() == "") {  
  6.                     ohSnap('User Name Is Empty !!', { color: 'red' });  
  7.                 }  
  8.                 else if ($("#ValidatePwdtextbox").val() == "") {  
  9.                     ohSnap('Password Is Empty !!', { color: 'red' });  
  10.                 }  
  11.                 else {  
  12.                     ohSnap('Registration Successful.', { color: 'green' });  
  13.                 }  
  14.             });  
  15.         });  
  16.     </script>  
  17. </div> 
OUTPUT
 
If Username and Password fields are empty.



If both Inputs are Valid.
 
10. NOTY notification library and plugin.

NOTY is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.

Each notification is added to a queue. (Optional) The notifications can be positioned at the: top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight

In HomeController.cs,
  1. public ActionResult NOTY()  
  2.         {  
  3.             return View();  
  4.         } 
In NOTY.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 //const Noty = require('noty');  
  6.                 new Noty({  
  7.                     type: 'error',  
  8.                     text: 'User Name Is Empty !!'  
  9.                 }).show();  
  10.             }  
  11.             else if ($("#ValidatePwdtextbox").val() == "") {  
  12.                 //const Noty = require('noty');  
  13.                 new Noty({  
  14.                     type: 'error',  
  15.                     text: 'Password Is Empty !!'  
  16.                 }).show();  
  17.             }  
  18.             else {  
  19.                 //const Noty = require('noty');  
  20.                 new Noty({  
  21.                     type: 'success',  
  22.                     text: 'Registration Is Successful.'  
  23.                 }).show();  
  24.             }  
  25.         });  
  26.     });  
  27. </script>  
OUTPUT
 
If Username and Password fields are empty.


If both Inputs Are Valid.
11. AmaranJS notification library and plugin.

AmaranJS is a minimalist notification library. It's easy to create notification animations and includes many themes, and it's easy to adapt your own themes and have callbacks. Highly customizable.

In HomeController.cs,
  1. public ActionResult AmaranJS()  
  2.         {  
  3.             return View();  
  4.         } 
In AmaranJS.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 amaran({  
  6.                     content: 'User Name Is Empty !!',  
  7.                     position: 'top left',  
  8.                     sticky: true,  
  9.                     color:'red'  
  10.                 }).run();  
  11.             }  
  12.             else if ($("#ValidatePwdtextbox").val() == "") {  
  13.                 amaran({  
  14.                     content: 'Password Is Empty !!',  
  15.                     position: 'top left',  
  16.                     sticky: true,  
  17.                     color:'red'  
  18.                 }).run();  
  19.             }  
  20.             else {  
  21.                 amaran({  
  22.                     content: 'Registration Is Successful.',  
  23.                     position: 'top left',  
  24.                     sticky: true,  
  25.                     color:'green'  
  26.                 }).run();  
  27.             }  
  28.         });  
  29.     });  
  30. </script> 
OUTPUT
 
If Username and Password fields are empty.



If both Inputs are Valid.

 
 
 
12. Notific8 notification library and plugin.

Notific8 is a JavaScript plug-in for easily displaying toast-style notifications on a web page.

It is designed to be easily customizable and comes with several themes (colors) and styles (theme families) baked in with an easy ability to create new ones.

The metro style gives a cool touch specially for asp.net developers.

The alert messages will appear on the top-right of the screen (windows 8 style).

In HomeController.cs,
  1. public ActionResult Notific8()  
  2.         {  
  3.             return View();  
  4.         } 
In Notific8.cshtml,
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#SubmitProject").click(function () {  
  4.             if ($("#ValidateNametextbox").val() == "") {  
  5.                 notific8('User Name Is Empty !!', {  
  6.                     color: 'amethyst',  
  7.                     heading: 'Satyapraksh Notification',  
  8.                     sticky: true,  
  9.                     closeText: 'Close'  
  10.                 });  
  11.             }  
  12.             else if ($("#ValidatePwdtextbox").val() == "") {  
  13.                 notific8('Password Is Empty !!', {  
  14.                     color: 'amethyst',  
  15.                     heading: 'Satyapraksh Notification',  
  16.                     sticky: true,  
  17.                     closeText: 'Close'  
  18.                 });  
  19.             }  
  20.             else {  
  21.                 notific8('Registration Successful.', {  
  22.                     heading: 'Satyapraksh Notification',  
  23.                     sticky: true,  
  24.                     closeText: 'Close'  
  25.                 });  
  26.             }  
  27.         });  
  28.     });  
  29. </script> 
OUTPUT
 
If Username and Password fields are empty.



If both Inputs Are Valid.

SUMMARY
  1. The top 12 most used notification libraries and plugins for JavaScript and jQuery.
  2. These can be implemented in ASP.NET MVC RAZOR.
  3. Project solution file describes codes easily.
  4. Mostly innovative and stylish notification libraries and plugins in today's market.


Similar Articles