Showing messages to users with Toastr and SignalR, the perfect match.

Sending updates/messages to users can sometimes be a pain in the butt, but using signalR can provide an enormous relief to exactly this matter.
Often times one would have a controller method which would return some sort of JsonResult (or View) containing whether or not the transaction went well. Using SignalR in conjunction with Toasts, we can write an a single implementation that will work for all of your future actions as well.
No more coding ajax success/failure for every single action.


  1. An MVC Project
  2. A BaseController
  3. SignalR package from nuget
    • Install-Package Microsoft.AspNet.SignalR
  4. A Toast implementation
    • //
  5. A razor _layout

Once you have everything installed and up and running you are ready to implement SignalR

SignalR Backend implementation

Once the package is installed it should create a startup.cs file – if it doesn’t go create one.
It should look like this

Now we are ready to create the Hub. In SignalR the hub is what ties together connections and messages sent.

Once done, create a MessageEmitter – this will send Toasts through SignalR

Notice I’m using an enum for ToastType

Now we are about ready to send Toasts to our users.

SignalR Frontend implementation

Now for the razor layout page.
Standard SignalR connection and then showing the toast when it is received.

Using this whole ordeal

To actually send a toast message to the user.
simply call the BaseController method from earlier ShowToastMessage()

What now?

You could implement a GlobalErrorHandler attribute and a custom ToastException to throw on controller errors.
it could look something like this

it would then be used by throwing a new ErrorToast, which in turn would send an error HTTP status code (500) to the client AND show an error Toast.
You can now handle ajax errors, along with successes.

jquery – cycle through classes on click

Imagine this

we have a nice little bootstrap panel, or maybe a few of them…
ermahgerd bootstrap
now let’s imagine that we’d like to change the width of the panel according to bootstrap standards.
you would do this by changing the col-* to something else.
One thing we could do is to use jquery’s toggleClass function.

the above basically just switches between 2 classes (and ONLY 2 classes)
What if we want to cycle through say col-lg-4 then col-lg-8 then col-lg-12?
I started googling a bit and fell upon the following answer on stackoverflow.
What this basically does is get the current class from the array of cyclable classes then pick the next item in the array or the first. Usage:
Basic example
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”xgwdLj” default_tab=”js,result” user=”visualbean”]See the Pen xgwdLj by Alex (@visualbean) on CodePen.[/codepen_embed]
Advanced panel example fiddle [codepen_embed height=”265″ theme_id=”0″ slug_hash=”NdGgrg” default_tab=”html,result” user=”visualbean”]See the Pen NdGgrg by Alex (@visualbean) on CodePen.[/codepen_embed]
Full credits to Aupajo