toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable. It is mostly used to show notification and its outlook is very nice and responsive. It allows you to create simple toasts with HTML5 and JavaScript like following:
Let’s use toastr in a simple asp.net MVC application.
Step 1: Create a ASP.NET MVC application with basic template
Open visual studio, Go to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET MVC 4 Web application and click OK
Select Basic Template and Razor as view engine
Step 2: Install required packages
Run the following command in package manager console to install packages
PM> Install-Package toastr
Step 3: Create HomeController and index view
Create a Home controller by right click on controller folder. Create an index view in Views -> Home -> Index.cshtml by right clicking in index action of Home controller.
HomeController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace Toastr.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } } }
Index.cshtml
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; }Toastr Implimentation
Step 5: Modify BundleConfig.cs
BundleConfig.cs
using System.Web; using System.Web.Optimization; namespace Toastr { public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); //Added for toaster bundles.Add(new ScriptBundle("~/bundles/toastr").Include( "~/Scripts/toastr.js*", "~/Scripts/toastrImp.js")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); //Modify for toastr bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Content/toastr.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); BundleTable.EnableOptimizations = false; } } }
Add toastrImp.js in Scripts folder. Modify BundleConfig.cs to add toastr.js, toastrImp.js and toastr.css add bundle reference in Views->Shared->_Layout.cshtml. toastrImp.js is my created javascript file to implement toastr.
toastrImp.js
$(document).ready(function () { displayToastr(); }); function displayToastr() { //alert('yes'); // Display a info toast, with no title toastr.info('Hi Mahedee, This information for you.') // Display a warning toast, with no title toastr.warning('Hi Mahedee, This the first warning for you!') // Display a success toast, with a title toastr.success('Yes! You have successfully completed your task!', 'Congratulation for you, Mahedee!') // Display an error toast, with a title toastr.error('An error occured in the solution!', 'Please contact with system administrator.') }
_Layout.cshtml
@ViewBag.Title @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @RenderBody() @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/toastr") @RenderSection("scripts", required: false)
Now run the program, you will see some notification nicely like below.
Some option need to know:
The position of toastr can be
1. toast-top-right
2. toast-top-left
3. toast-bottom-right
4. toast-bottom-left
5. toast-top-full-width
6. toast-bottom-full-width
You can change it in toastr.js like following.
toastr.options = { "closeButton": false, "debug": false, "positionClass": "toast-top-full-width", "onclick": null, "showDuration": "200", "hideDuration": "1500", "timeOut": "6000", "extendedTimeOut": "1200", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }
wonderful post.
It was helpful
it’s grate brother………………..!!!!!
Hi you do not show how to send the toast from the controller to the view, I am not understanding how to send the message to the user.
Hi, the download source is not working.
I was wondering if you could share
– how to do the spinning cloud on the right
– how to get an realtime update from something like a work order approved from DB, and send to front user via toastr
thanks
Anna