Sunday, February 21, 2016

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.

image

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.

image

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

Another sample below is for success,

image

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.

31 comments:

Priya Tamil said...


This technical post helps me to improve my skills set, thanks for this wonder article I expect your upcoming blog, so keep sharing..

SEO Training in Chennai

Priscilla said...

Thank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care.As always, we appreciate your confidence and trust in us..SAP Training in chennai

Jeeshi said...

Thanks, I really appreciate the kind words thanks for sharing that valuable information.


Java training in Chennai

Dhiya L said...

Superb i really enjoyed very much with this article here. Really its a amazing article i had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.


Dotnet Training in Chennai

Nainika Joseph said...



Really very nice blog information for this one and more technical skills are improve,i like that kind of post.



SAP training in Chennai

Jeeshi said...

The Great technical content on this post that can be order of step by step procedure in output successful submit post.Thanks to share this post.

dotnet training in chennai

Aasha said...

I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon.

Digital Marketing For Small Business in Chennai

sindhu said...

It is really a great and useful piece of info. I’m glad that you shared this helpful info with us. Please keep us informed like this. Thank you for sharing.

CRO Agency in Chennai

Suseela Susiee said...



This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.

Online Reputation Management

Sowmiya said...

thus your information are really nice and very much implementive and useful too. it is really awesome and very much exclusive too.Thanks for sharing those valuable information.


Informatica Training in Chennai

Vignesh PV said...

This blog is having the general information. Got a creative work and this is very different one.We have to develop our creativity mind.This blog helps for this. Thank you for this blog. This is very interesting and useful.
iOS Training in Chennai

Rajapriya R said...

useful blog to read

dotnet training and placements

dhivya priya said...

Thank you for sharing such a nice and interesting blog with us. I have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information. I would like to suggest your blog in my dude circle.
Isoft Innovations Company Address
Isoft Innovations Adyar
Isoft Innovations Reviews
Isoft Innovation Chennai
Isoft Innovation

Evangeline Mitul said...

Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have Keep up the good work you are doing here.Well, got a good knowledge.

Best Dental Clinic In Vellore

sathya said...

A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.

Informatica Training in Chennai

Dataware Housing Training in Chennai

Evangeline Mitul said...

Great articles, first of all Thanks for writing such lovely Post! Earlier I thought that posts are the only most important thing on any blog. But here a Shout me loud found how important other elements are for your blog.Keep update more posts..

Painless Dental Treatment In Chennai

Best Dental Clinic In Adyar

Lucky Srivastava said...
This comment has been removed by the author.
Nandhini said...

Somebody necessarily help to make severely posts I might state. This is the first time I frequented your website page and to this point? I surprised with the research you made to create this particular post extraordinary. Well done admin..
Security Services in Chennai

Shalini said...

I just see the post i am so happy the post of information's.So I have really enjoyed and reading your blogs for these posts.Any way I’ll be subscribing to your feed and I hope you post again soon.

Digital Marketing Company in Chennai

Stepherd said...

I am not sure the place you are getting your information, however good topic.I needs to spend some time studying more or understanding more.Thank you for wonderful information I was in search of this info for my mission.

HR Consultancy in Chennai
Recruitment Consultancy in Chennai
Manpower Consultancy in Chennai

sathya said...

Excellent post, some great resources. Styling your blog the right way is key. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic. After reading your post,thanks for taking the time to discuss this, I feel happy about and I am eager to learn more about this topic.

MSBI Training in Chennai

Informatica Training in Chennai

Evangeline Mitul said...

Truely a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic. keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.

Laser Root Canal Treatment In Chennai

Best Dental Clinic In Velachery

Lucky Srivastava said...
This comment has been removed by the author.
Mahalyasree said...

It’s the best time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I want to suggest you few interesting things or suggestions.You can write next articles referring to this article. I desire to read even more things about it..
Best Interior Designers in Chennai
Interior Designers in Chennai

Rekha J said...

Really a good technical site,keep on writing good stuffs
dot net training in chennai

Philips Huges said...



Thanks admin for sharing the unique content, you have done a great job

Installment loans in Mississippi
Payday loans in Mississippi
Title loans in Mississippi

Radley Co Tad said...

I have read your blog its very attractive and impressive. I like it your blog.

Digital Marketing Company in Chennai Digital Marketing Agency

Vamshi Krishna said...



very useful info, and please keep updating........

deeksha said...


very very amazing explaintion....many things gather about yourself...yes realy i enjoy it
Base SAS Training in Chennai

sandhosh said...

Really Good blog post.provided a helpful information.keep updating...
Digital marketing company in Chennai

It Guru said...

Nice Blog, you are doing a great job!!!

Dot Net Online Training Hyderabad