How to use Toastr.js in ASP.NET

First let me ask you a question, what is Toastr.js and what is the use of it?

Toastr is a simple JavaScript library which can be used along with jQuery to show a simple and appealing notification in your web application. Good thing about Toasr is, since it is a JavaScript library it won’t create any performance issue and the coding looks very simple.

Lets start with a very simple .net application with one label, textbox and a button. Then on click of the button we will show the Toastr alert.

First we need to add the Toastr library like below in your .aspx page.

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
   <Link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css" rel="stylesheet" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js" type="text/javascript"></script>

Here you might have noticed that I am referring the path directly from the online URL. In your case you may download the toast.js and toastr.css and also the jQuery and refer it internally.

Now we will write the code to show the alert.

protected void Button1_Click(object sender, EventArgs e)
       {
           Page.ClientScript.RegisterStartupScript(this.GetType(),"toastr_message", "toastr.error('Please Enter Name', 'Error')", true);
       }

On click of the button Toastr message will be shown like below. You can have a condition based on your requirement to show the alert.

Here I didn’t show that because everyone got their on requirement.

You have many option to show different color, different title and different icon depends on the message.

Another sample below is for success,

Similarly you have toastr.info and toastr.warning to show the alert.

Another useful option you may require is the position where you want to show the alert.

Below are some of the options available in toastr,

toastr.options = {
  "closeButton": false,
  "debug": true,
  "newestOnTop": true,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

I hope you enjoyed reading this article. Please try this in your project and let me know your client feedback. I am sure they will definitely like this.