ASP.NET MVC 5 Tutorial :: How To Make ASP.NET MVC 5 SweetAlert

ASP.NET MVC 5 Tutorial – ASPDOTNET5Hosting.Com | Alert is notification that a threshold has been reached an incident has occurred which may develop into a disaster,  an interruption may occur due to planned events such as repairs or a system upgrade or, an interruption may occur due to uncontrollable but expected events such as a hurricane warning. Sweet alert is a beautiful replacement for

Sweet alert is a beautiful replacement for java script alert message box.It adds styles to the alert messages make alert look great.And also we can customize the alert with custom icons and custom styles etc.It is more user friendly and user experience very good.All this can be achieved by less code. The following is normal java script alert in browser.

javascript-alertbox

It looks normal to us.But sweet alert look like below with customizable styles.
68747470733a2f2f7261772e6769746875622e636f6d2f743474352f7377656574616c6572742f6d61737465722f7377656574616c6572742e676966

That’s why we in many of the websites to drag the user attention many of developers use this sweet alert.Now i am going to teach you how to integrate this sweet alert in out MVC application.

ASP.NET MVC 5 – Sweet Alert in MVC 5

As like previous i going to explain this in step by step manner.
Step 1:

Create MVC application

1.Open Visual studio.
2.Goto File Menu–>New–>Project–>Select ASP.NET Webproject.
3.Give name as SweetAlertExample and click ok button.
creating-new-project-in-mvc5

4.In after clicking on Ok button another project wizard will opened like below.Select Empty template and check the MVC checkbox to add the default folders for MVC application.And click ok to add those to project.

creating-new-project-in-mvc 5

Step 2:

Create a Controller

1.Right click Controllers folder–>Add–>Controller and name it as HomeController.cs

creating-new-controller-in-mvc

2.Right click on Index Action method and add Index View and click on Add.

adding-view-to-actionmethod

Step 3:

Installing Sweet Alert in MVC

We can install sweet alert in mvc application in two ways
Using package manager console:
Goto Menubar–>Tools–>Nuget Package Manager–>Package Manager Console.And use                     following command to install Sweet alert.
 Install-Package SweetAlert
folder structure look like below

sweet-alert-folder-structure

 By downlading and adding folder to the project:
You can directly add folders to the solution by downlaoding from following link.

Note : Add Bootstrap to project using either nuget package manager or using CDN.
Step 4:

Replace Index view code with below code.
 
Step 5: 
Add following Script to Index page
Also add styles in index page

Finally run the application Press F5.

sweet-alert-demo

A sample Success alert will come like this…

sweet-alert-success

 

HostForLIFE.eu
HostForLIFE.eu revolutionized hosting with Plesk Control Panel, a Web-based interface that provides customers with 24×7 access to their server and site configuration tools. Plesk completes requests in seconds. It is included free with each hosting account. Renowned for its comprehensive functionality – beyond other hosting control panels – and ease of use, Plesk Control Panel is available only to HostForLIFE’s customers. They offer a highly redundant, carrier-class architecture, designed around the needs of shared hosting customers.

image

Leave a Reply

Your email address will not be published. Required fields are marked *