Orchard CMS — Convert Orchard messages to Toastr notifications with JavaScript

Orchard messages appear as text messages in the Messages Zone. But sometimes we need something fancier than a simple text.

In this example, I will use non-blocking notifications.

First install to your Orchard Site the Toastr library.

After this hide the messages with CSS, with this:
.zone-messages .message { display: none; }

Now we will get all the Orchard CMS messages and we will appear each message as a Toastr notification with the correct type.

var messageElement;
$('.zone-messages .message').each(function () {
  messageElement = $(this);
  if(messageElement.hasClass('message-Information')) {
    toastr.success(messageElement.html());
  } else if(messageElement.hasClass('message-Warning')) {
    toastr.warning(messageElement.html());
  } else if(messageElement.hasClass('message-Error')) {
    toastr.error(messageElement.html());
  }
});

If you want you can download the messages.js from here.

This feature is already installed in this head start Orchard CMS theme.

Originally published at https://orchardtricks.dotnest.com.