AngularJS CRUD Using ASP.NET MVC5 – Add Toaster Notifications

In Previous article we learn how to add form data validations for CREATE and UPDATE Operation. In this article, we will learn how to add toaster notifications in our application.

You can download code for previous article from GitHub and start adding code for toaster notification.

So Let us start coding ??

Step-1: Download “toaster.css“, “toaster.js” and “angular-animate.min.js“

• Download “toaster.js” from https://raw.githubusercontent.com/jirikavi/AngularJS-Toaster/master/toaster.js and place it to “Scripts” folder.
• Download “toaster.css” from https://raw.githubusercontent.com/jirikavi/AngularJS-Toaster/master/toaster.css and place it to “Content” folder.
• Download “angular-animate.min.js” from https://code.angularjs.org/1.4.2/angular-animate.min.js and place it to “Scripts” folder.
• Download “angular.js” from https://code.angularjs.org/1.5.6/angular.js and place it to “Scripts” folder.

Note: we need to also update angular.js version to AngularJS v1.5.6, because latest version v1.6.4 is not working with toaster.js and we need to downgrade to make toaster works with angularJS.

Now all set. dependencies are set in the project.

Step-2: Bundle this JS and CSS files in our project

Open “App_Start –> BundleConfig.cs” file and update the angular bundle

bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                       "~/Scripts/angular.js",
                       "~/Scripts/angular-animate.min.js",
                       "~/Scripts/toaster.js"));

Similarly css bundle:

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/toaster.css"));

Step-3: Include the ‘ngAnimate‘ and ‘toaster‘ module in your AngularJS app

Open “AngularJSApp\Employee\Module.js” file and add module like

myapp = angular.module('my-employees', ['toaster', 'ngAnimate', 'ui.bootstrap.showErrors']);

Note: ngAnimate module require if you want animations during toaster notification.

Step-4: Add ‘toaster-container‘ directive in Index.cshtml

By default, toasts have a timeout setting of 5000, meaning that they are removed after 5000 milliseconds. If the timeout is set to 0, the toast will be considered “sticky” and will not automatically dismiss. The timeout can be configured at three different levels:

Globally in the config for all toast types:

<toaster-container toaster-options="{'time-out': 1000}">
</toaster-container>

Per info-class type: By passing the time-out configuration as an object instead of a number, you can specify the global behavior an info-class type should have.

<toaster-container
toaster-options="{'time-out':{ 'toast-success': 2000, 'toast-error': 0 } }">
</toaster-container>

We will add following toaster-options for our toasts to display.

<toaster-container
toaster-options="{'close-button':true, 'time-out':{ 'toast-success': 2000, 'toast-error': 0 } }">
</toaster-container>

Success toasts will fade out after 2 seconds and error toasts will be sticky, until you close it. we also used close-button property which will show close button for all our toasts, so user can manually close our error toasts using close button.

Step-5: Usage of toaster in ng-controller

Let us update our JavaScript alert messages for success and failure for ‘employee-controller‘ in “AngularJSApp –> Employee –> Controller.js” by adding toaster notifications.

First, inject toaster module in our controller:

myapp.controller('employee-controller',
function ($scope, employeeService, toaster)

Then, you can use it any where in our controller.

For Success :

toaster.success({ title: "Success", body: "Employee added successfully" });

For error :

toaster.error("Error", "Error occured while loading employee data");

Similarly, you can update all other javascript alerts will toaster notifications for UPDATE and DELETE methods.

Step-6: Run the application.

Click on Add Employee Button. Provide input values in each fields and save the data.

You can see that it will give smooth effective notifications for success and it will fade out after 2 seconds.

Kool 🙂 Isn’t it?

Update Employee

Delete Employee

Code for this article is available on GitHub: https://github.com/sandy060583/AngularJSUsingMVC5-Part4

For more details on toaster, please refer this article: https://github.com/jirikavi/AngularJS-Toaster

That’s all for this article.

Please feel free to provide your feedback and comments.