How to implement a toastr.js notifications system in ASP.NET MVC 5
Hello and welcome!
Today we are going to learn how to implement a server side generated notification system using the following:
- MVC 5
- C#
- ASP.NET
- Toastr.js
Setup
To get this set up you can do a couple different things. jQuery is a requirement for this set up but a default MVC project comes with that out of the box so I won’t go over how to set that up here.
First you’ll need to add a reference to toastr.js. You can do so by installing the nuget package for toastr or by clicking here and using the cnd versions. I went with the nuget install and added the references where they were needed.
Your bundle config should look something like this with a reference to toastr:
bundles.Add(new ScriptBundle("~/bundles/toastr").Include( "~/Scripts/toastr.js"));bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/toastr.css"));
Then add the render call for your script and css files in your layout page (or where ever you need this script to be firing):
@Styles.Render("~/Content/css")//body code and other stuff pertaining to layout@Scripts.Render("~/bundles/toastr")
The Fun Stuff
Ok so now that the boring setup stuff is out of the way. Let’s get down to business.
I first created a new folder for this helper to live in. I called it “Helpers” ( I know, clever). Inside that I made a class called NotificationsHelper.cs. This class is a view method calls and a model. We will utilize ASP.NET session variables to gather up a list of notifications to process as your code runs then process and render them in the layout with another method call. Ideally only one or two notifications at most would be toasted to the user but you can go crazy and get a list of 10+ if you want to drive your users mad!
Alright, back to business. Here is the class I’ve set up.
I’ll link the source here.
We can analyze the workflow of things below.
Render Notifications
The render notifications method does exactly that. You call this on your layout page, and any time the layout page is rendered this system will auto populate any toasts that need to send.
It pulls the data from a Session variable that I’ve chosen to call “Notifications” that takes in a List of type Notification that were collected during any Controller calls. It serializes this list to json and stores that in the session.
If there is anything to render is generates basic toastr.js code to pop up an error or success message.
Clear
The clear method just empties the session object once it’s been processes by RenderNotifications();
Add Notification
The add notification method takes in a Notification object that consists of a string message, a string title, and an enum notification type.
This method can be called in any controller and it will store the notification in the session object. Which is then serialized and stored.
Definitions
Notification type. This is an enum that lists out four notification types that we have access to for toastr.js.
Notification. This is a class that holds our properties that we can modify for a notification.
Back to the layout page
Adding this snippet to your _Layout.cshtml page will handle the rendering of any pending notifications. I added mine at the very bottom.
@Html.Raw(NotificationsHelper.RenderNotifications())Expanding this example
Toastr.js can take in a variety of information for a notification. Use this example as a base and continue onward with their sample docs here (Toastr.js).
Try building some custom html notifications, storing and rendering that using this guide as a base.
