Monday, February 22, 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.

25 comments:

Unknown 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

Unknown 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

Unknown 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

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 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

Unknown said...

useful blog to read

dotnet training and placements

Unknown 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

Unknown said...
This comment has been removed by the author.
Unknown 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

Unknown 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

Unknown said...

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

Unknown 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

Unknown said...

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

Dot Net Online Training Hyderabad

for ict 99 said...

This is an amazing blog,it gives very helpful messages to us.Besides that Wisen has established as Best Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

Ancy merina said...
This comment has been removed by the author.
Jaweed Khan said...

This is an best post. It is Really very informative concept.I like it and help me to development very well.Thanks alot for this brief explanation and very nice information.
C#.NET Course In Hyderabad

Unknown said...

Worthful C#.Net tutorial. Appreciate a lot for taking up the pain to write such a quality content on C#.Net tutorial. Just now I watched this similar C#.Net tutorial and I think this will enhance the knowledge of other visitors for suretableau online training C#.Net Online Course

htop said...

this is a nice post, thank you so much for sharing to us
best hadoop training in chennai
best hadoop training in omr
best java training in chennai
best python training in chennai
selenium training in chennai
selenium training in omr
best python training in sholinganallur

arturitohop said...

Good post, but can use inside a updatepanel. I try but not have results.
Somebody have any solution???

cheap erectile dysfunction pills online said...

I'd like to find out more? I'd want to find out some additional information.

Yasodha Varman said...

Get the answer for the query “ How To Get a Job in Infosys as a Fresher? ” with the real-time examples and best interview questions and answers from the best software training institute in Chennai, Infycle Technologies. Get the best software training and placement with the free demo and great offers, by calling +91-7504633633, +91-7502633633.