How to show Sweet Alert in JavaScript

April 1, 2022 rashid@rashicode.com

Sweet Alert JavaScript Alert in Asp Net web Form

In this video, we will see how to create a JavaScript alert using Sweet Alert in .NET. The obvious reason for creating an alert is to show an informational message to the user. This is especially useful if you want to show a Success , Info, Error or Warning message to the user.

Tools Required:

Visual Studio 2012 or later.

Introduction:

When it comes to creating a user experience that is informative and positive, JavaScript is often the first tool in the developer’s toolbox. Whether it is adding a new feature to an already existing website, or creating a showcase for a JavaScript framework, there is a lot that can be done with JavaScript and a little time. One of the most common functionalities is the alert box. This is a common way to get the attention of a user when you need to make a small announcement or to show a short message. One of the easiest ways to accomplish this is with a JavaScript alert.

Now days in asp net we are using sweet alert script for pop up and display alert message to user in same way we can use JavaScript for same. JavaScript is a strong programming language for web advancement. It is a client-side scripting language that can be used to add interactivity. It is the single most popular language for web-based client-side scripting. The JavaScript language was initially designed by Netscape to enable web developers to create interactive web pages. Now, JavaScript is a standard component of most web browsers. In fact, it is a part of HTML5 standard.

Steps to use Sweet Alert:

Open Visual Studio and create a new empty web Application in Visual C#.

Go to Solution Explorer, right-click the project file and click Add -> web Form

Add the code below in header Section of web Form

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

OR

Open Solution Explorer, then right-click the project and click Manage Nuget Packages.

Click the Browse tab and search for Sweet Alert and install the SweetAlert.Base library. After Successfully install open WebForm. open solution explorer and open Scripts folder you can find sweetalert.min,js file drag and drop in header section. Now open styles Folder you can find sweetalert.css file drag and drop in header section.

Add 4 button in Body of web form. (success ,info ,warning ,error).

Paste the Code below in Button Click Event.

Success Alert:

 ClientScript.RegisterClientScriptBlock(this.GetType(), "alert",
                "swal('Good job!', 'You clicked Success button!', 'success')",true);

Info Alert:

ClientScript.RegisterClientScriptBlock(this.GetType(), "alert",
                "swal('Information!', 'You clicked Info button!', 'info')", true);

Warning Alert:

ClientScript.RegisterClientScriptBlock(this.GetType(), "alert",
                "swal('Warning!', 'You clicked Warning button!', 'warning')", true);

Error Alert:

 ClientScript.RegisterClientScriptBlock(this.GetType(), "alert",
                "swal('Error!', 'You clicked Error button!', 'error')", true);

for more information you can read Sweet Alert guide.

Video Tutorial:

Watch a full video to learn how to use sweet alert in .Net webform in Visual Studio.

Source Code:

Thank you for reading this article. Leave a comment if you have any question about this article. Please don’t forget to subscribe our official YouTube Channel RashiCode

Rashi Code