Sweet Alert With MVC

Before this we were using traditional alert, what it is?. It is a JavaScript alert and now let’s replace it with Sweet Alert.

As you can see there are many articles of sweet alert but all are with html pages, none of them with MVC or ASP.NET. I had written simple article on this to understand easily and use it in your Projects.



Let’s start with creating basic MVC project first and then we are going add Sweet Alert inside it.

Creating Application

Open Visual Studio IDE on start page and select New Project.


Figure 1: Start page

After selecting a New Project dialog will appear inside that select Templates Visual C# inside this select Web. After selecting you will see various Project Templates ( Webforms, MVC, ASP.NET AJAX Server control). In this select “ASP.NET MVC 4 Web Application” after selecting just name your Project as “SweetAlertSite” and finally click on OK button to create project.


Figure 2: Selecting Template

After clicking OK button another project template selection wizard will pop up with name “New ASP.NET MVC 4 Project”. In this template select Basic template and set view engine as Razor and we are not going to create Unit testing for this project hence do not check this option and finally click on OK button and done.


Figure 3: Selecting MVC 4 Project

After selecting all option as told above now click OK button and your project will be created.


Figure 4: Project structure

Installing Package SweetAlert to Project

After creating project we are going to add Sweet Alert for Bootstrap in our project. To install it from package manager console we are going to select Tools in Visual Studio IDE inside that we are going to select Library package manager and in that select package manager console and type
[ Install-Package SweetAlert ]


Figure 5: Package manager console

After successful installation it adds a Controller with name [SweetController] and View with name [Alert] with some css files in Content folder.



Downloading package of bootstrap and adding to project

After installing Sweet alert we need to download and add bootstrap to project URL of it.


Figure 6: After adding bootstrap folder to project

After adding bootstrap to SweetAlertSite project now we are going to add Model in Models folder.

Adding Model (OrderFood)

For adding model in Solution Explorer just right click on Model folder and select Add, then inside that select class and then name class as OrderFood and finally click on Add button to create Model.



Adding Property to (OrderFood) Model

After adding model let us add property to this Model.

Adding (Home) Controller

To add controller just right click on Controller folder then select Add from list and inside that select controller.


Figure 7: Adding Controller (Home Controller)

After selecting controller a new dialog will pop up with name Add Controller.



Now let’s name Controller to HomeController. In template we are going to select empty MVC controller. Finally, click on Add button to create HomeController. After adding HomeController you will see Index Action Method created by default.

Adding 2 New Action Method with Name Create to Home Controller

Let’s add 2 new Action with name and create one for POST and other for Get.
After adding Action Method now let us add View to this Action Method.
 
Adding View for creating Action Method

For adding View just right click inside Controller Action Method (Create) then select option Add View.


Figure 8: Adding View (Create [Home Controller])

After selecting Add View option a new wizard will pop up with Name (Add View).

It will have View Name same name as Action Method inside which you right click to add View.

In this example we are going to create strongly typed view for that I have check this option and in Model class I have selected OrderFood model class.

After selecting required option now finally click on Add button.

After that a View will be created inside Views folder and in that we will have folder with name of controller inside that your view will be placed.


Figure 9: After adding Create View

Now let’s add script reference to this Page to use Sweet Alert.

Adding Script Reference to View (Create View)


Figure 10: Scripts to add for using sweet alert.
After adding script now let’s add validation.

Adding Sweet Alert Simple alert Validation on Create View

We are going to validate 2 textbox they must not be blank - use sweet alert.

Javascript alert	Sweet alert
alert("Please enter OrderCode !");	swal("Please enter OrderCode !");
Alert starts with alert keyword.	Sweet Alert starts with Swal keyword.

Figure 11: Different between Sweet alert and Javascript alert.

Code snippet of Sweet Alert Validation on Create View
Snapshot of Sweet Alert Validation on Create View


Figure 12: Sweet alert Error message.

Code snippet of Complete Create View

Here's the complete code snippet for it.
After adding simple Validation now let us learn how to add confirmation message in Sweet Alert.

Adding Sweet Alert Confirmation Validation

We have already done with simple sweet alert validations now let’s work on confirmation validation. We are going to call this Confirmation alert as user click on save button and going to ask do you want to save form and there will be 2 buttons [Save] and [Cancel]. If user click on Save then form will be submitted else it will cancel.

Adding (Confirmation) Controller

For adding Confirmation message let add another Controller for understanding with name “Confirmation Controller” and in this controller we are going to add 2 Action Method with same name Create.


Figure 13: Adding Confirmation Controller.

Adding View for Create Action Method

After adding Action method now let’s add View to this action methods in similar as we have added above.

For adding View just right click inside Controller Action Method (Create) and then select option Add View.


Figure 14: Adding View (Create) of Confirmation Controller

After selecting Add View option a new wizard will pop up with Name (Add View).

It will have View Name same (name ) as Action Method inside which you right click to add View.

In this example we are going to create strongly typed view for that I have check this option and in Model class I have selected OrderFood model class.

After selecting required option now finally click on Add button.

After that a View will be created inside Views folder and in that we will have a folder with name of controller inside that your view will be placed.

Adding Script Reference to View (Create View)
After adding script now let’s add validation.

Adding Sweet Alert Confirmation Validation on Create View

This script will first ask “Do you want to save it?” then there are 2 buttons “Save” and “Cancel”. If you click on Save then it will be saved else cancelled.