DEV Community

Cover image for How to use toast notification with ASP .Net Core
Jenry Mazariegos
Jenry Mazariegos

Posted on

How to use toast notification with ASP .Net Core

Before start with the tutorial, make shore u already have jQuery installed, cause this library use jQuery, in this case I will use the latest version.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>
Enter fullscreen mode Exit fullscreen mode

Let start!

We're going to use the toastr library, so go to the repositorie here.

Before make something else, first we create a directory in your project like this.

Image description

As u can see, we have a folder named toastr where we have 2 files.
Now let's create this 2 files(JS and CSS).

So go to the repository that you opened before, enter the file toast.js in the repository, copy the code, and paste in your file project.

Image description

Now we'll do the same with the .scss file.

Image description

After this, put the references in your HTML.

Image description

NOTE: make shore you put the script after the jQuery script.

Image description

Now, we'll use the toast

<input 
  onclick="test()"
  type="button"
/>

 <script type="text/javascript">

   const test = () => {        
     toastr.success('Have fun storming the castle!', 'Miracle Max Says')
    }

  </script>
Enter fullscreen mode Exit fullscreen mode

we'll get this result

Image description

Very easy right? toastr have a demo where u can personalize with some click and see the result, here u have.

See you soon.

Top comments (0)