Smart Alert With MVC - Part 2

I have already written an article about Sweet Alert, which is also used to display alert in ways other than the traditional one. You can have a look at it here:

• Sweet Alert With MVC - Part 1

Let’s start with creating a basic MVC project, and then we are going to add and use Smart Alert in it.

Creating Application

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


                                                              Figure 1. Start page

After selecting New Project, a dialog will appear. Inside that select Templates, then under Visual C# select Web. After selecting you will see various Project Templates (Webforms , MVC , ASP.NET AJAX Server control). Select “ASP.NET MVC 4 Web Application ” and name your project “SmartAlertSite” and finally click onthe OK button to create project.


                                                           Figure 2. Selecting Template

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


                                          Figure 3. Selecting MVC 4 Project

After selecting all the options as mentioned above now click the OK button and your project will be created.


               Figure 4. Project structure

Downloading package of Smart alert and adding to project

To download the Smart Slert Script and css folder to add in the project just download from the following URL.

After downloading zip file extract it and add these files to MVC project.



Add a folder in the SmartAlertSite project with the name “SmartAlertFiles”. Inside this we are going to add all files which we have downloaded.


Figure 5. Adding Smart folder and files to project

After adding “SmartAlertFiles” folder.


Figure 6. After adding Smart folder and files to project

After adding Bootstrap to theSmartAlertSite Project now we are going to add Model in Models folder.

Adding Model (OrderFood)

For adding model in Solution Explorer just right click on the 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.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace SmartAlertSite.Models
{
    public class OrderFood
    {
        [Key]
        public int OrderID
        {
            get;
            set;
        }
        [Required(ErrorMessage = "Please enter OrderCode")]
        public string OrderCode
        {
            get;
            set;
        }
        [Required(ErrorMessage = "Please enter OrderPrice")]
        public string OrderPrice
        {
            get;
            set;
        }
    }
}

Adding (Home) Controller

To add controller just right click on the Controllers folder and 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 DemoHomeController.

Inthe  template we are going to select Empty MVC controller.

Finally, click on the Add button to create DemoHomeController.

After adding DemoHomeController you will see Index Action Method created by default.

Adding 2 New Action Method with name created to DemoHomeController

Let’s add two new Actions with names created; one for POST and the other for Get.

using SmartAlertSite.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SmartAlertSite.Controllers
{
    public class DemoHomeController: Controller
    {
        //
        // GET: /DemoHome/
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult Create()
        {
            return View(new OrderFood());
        }
        [HttpPost]
        public ActionResult Create(OrderFood OrderFood)
        {
            if (ModelState.IsValid)
            {}
            else
            {}
            return View(OrderFood);
        }
    }
}

After adding Action Method now let us Add View to this Action Method.

Adding View for Create Action Method

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


         Figure 8. Adding View (Create [DemoHome Controller])

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

It will have View Name with the same name as Action Method inside which you right click to add View.
In this example we are going to create a strongly-typed view; for that I have checked this option and in Model class I have selected OrderFood model class.

After selectingthe Required option now click on Add button.

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


Figure 9. After adding Create View

Now let’s add Script Reference to this page to use Smart Alert.

Adding Script Reference to View (Create View)


                                                  Figure 10. Scripts to add for using smart alert

<link href="~/SmartAlertFiles/alert/css/alert.min.css" rel="stylesheet" />

<link href="~/SmartAlertFiles/alert/themes/dark/theme.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script src="~/SmartAlertFiles/alert/js/alert.js"></script>

After adding Script now let’s add validation.

Adding Smart Alert Simple alert Validation on Create View

We are going to validate 2 textboxes (and they must not be blank) using Smart Alert.

JavaScript alert	Smart alert
alert("Please enter OrderCode !");	$.alert.open('Please enter OrderCode !');
Alert starts with alert keyword.	Smart Alert starts with $.alert.Open keyword.

                                 Figure 11. Different between Smart alert and JavaScript alert

Code snippet of Sweet Alert Validation on Create View

<script type="text/javascript">

    function validateData() {
        if ($("#OrderCode").val() == "") {
            $.alert.open('Please enter OrderCode !');
            return false;
        }
        else if ($("#OrderPrice").val() == "") {
            $.alert.open('Please enter OrderPrice !');
            return false;
        }
        else {
            return true;
        }
    }

</script>
<input id="btnCreate" type="button" onclick="return validateData();" value="Create" />

Screenshot of Smart Alert Validation on Create View


                                   Figure 12. Smart alert Error message

Code snippet of Complete Create View

Here is the complete code snippet:

@model SmartAlertSite.Models.OrderFood
@
{
    Layout = null;
}
< !DOCTYPE html > < html > < head > < meta name = "viewport" content = "width=device-width" / >
< title > Create < /title> < link href = "~/SmartAlertFiles/alert/css/alert.min.css" rel = "stylesheet" / >
< link href = "~/SmartAlertFiles/alert/themes/dark/theme.min.css" rel = "stylesheet" / >
< script src = "~/Scripts/jquery-1.7.1.min.js" > < /script> < script src = "~/Scripts/jquery.validate.min.js" > < /script>
< script src = "~/Scripts/jquery.validate.unobtrusive.min.js" > < /script>
< script src = "~/SmartAlertFiles/alert/js/alert.js" > < /script>
< script type = "text/javascript" > function validateData()
{
    if ($("#OrderCode").val() == "")
    {
        $.alert.open('Please enter OrderCode !');
        return false;
    }
    else if ($("#OrderPrice").val() == "")
    {
        $.alert.open('Please enter OrderPrice !');
        return false;
    }
    else
    {
        return true;
    }
} < /script> < /head> < body > @using(Html.BeginForm())
{
    @Html.ValidationSummary(true) < fieldset > < legend > OrderFood < /legend> < div class = "editor-label" > @Html.LabelFor(m => m.OrderCode) < /div> < div class = "editor-field" > @Html.EditorFor(m => m.OrderCode)
    @Html.ValidationMessageFor(m => m.OrderCode) < /div> < div class = "editor-label" > @Html.LabelFor(m => m.OrderPrice) < /div> < div class = "editor-field" > @Html.EditorFor(m => m.OrderPrice)
    @Html.ValidationMessageFor(m => m.OrderPrice) < /div> < p > < input id = "btnCreate"
    type = "button"
    onclick = "return validateData();"
    value = "Create" / > < /p> < /fieldset>
} < div > @Html.ActionLink("Back to List", "Index") < /div> < /body> < /html>

After adding Simple Validation now let us learn how to add Confirmation message in Smart Alert.

Adding Smart Alert Confirmation Validation

We have already finished simple Smart Alert validations, and now let’s work on Confirmation validation. We are going to call this Confirmation Alert as the user clicks on the save button and we are going to ask, "Do you want to save form?" There will be two buttons: [Save] and [Cancel]. If he/she clicks on Save, then form will be submitted, else it will be cancelled.

Adding (Confirmation) Controller

For adding the Confirmation message let us add another Controller for understanding with the name “Confirmation Controller.” In this controller we are going to add two Action Methods with the same name, Create.


                                   Figure 13. Adding Confirmation Controller

Adding View for Create Action Method

After adding Action methods now let’s add View to these action methods in similar way 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 the Add View option a new wizard will pop up with Name (Add View).

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

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

After selectingthe required option now finally click on the Add button. After that a View will be created inside the Views folder, and in that we will have a folder with the name of the controller, inside which your view will be placed.

Adding Script Reference to View (Create View)

<link href="~/SmartAlertFiles/alert/css/alert.min.css" rel="stylesheet" />

<link href="~/SmartAlertFiles/alert/themes/dark/theme.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script src="~/SmartAlertFiles/alert/js/alert.js"></script>

After adding script now let’s add validation.

Adding Smart 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 it will be cancelled.

<script type="text/javascript">
    function validateData()
    {
        if ($("#OrderCode").val() == "")
        {
            $.alert.open('Please enter OrderCode !');
            return false;
        }
        else if ($("#OrderPrice").val() == "")
        {
            $.alert.open('Please enter OrderPrice !');
            return false;
        }
        else
        {
            return true;
        }
    }

    function Validate()
    {
        $.alert.open('confirm', 'Are you sure you want to save this data?', function(button)
        {
            if (button == 'yes')
            {
                if (validateData() == true)
                {
                    $("#CreateForm").submit();
                }
            }
            else if (button == 'no')
            {
                $.alert.open('You pressed the "No" button.');
            }
            else
            {
                $.alert.open('Alert was canceled.');
            }
        });
    }
</script>
<input id="btnCreate" type="button" onclick="return Validate();" value="Create" />

Screenshot of Smart Alert Confirmation onclick of Create button


                               Figure 15. Smart Alert Confirmation onclick of Create button

Screnshot of Smart Alert Confirmation on Cancellation:



Code snippet of Complete Create View of (Confirmation)

@model SmartAlertSite.Models.OrderFood
@
{
    Layout = null;
}
< !DOCTYPE html > < html > < head > < meta name = "viewport"
content = "width=device-width" / > < title > Create < /title>
< link href = "~/SmartAlertFiles/alert/css/alert.min.css"  rel = "stylesheet" / >
< link href = "~/SmartAlertFiles/alert/themes/dark/theme.min.css"  rel = "stylesheet" / >
< script src = "~/Scripts/jquery-.7.1.min.js" > < /script>
< script src = "~/Scripts/jquery.validate.min.js" > < /script>
< script src = "~/Scripts/jquery.validate.unobtrusive.min.js" > < /script>
< script src = "~/SmartAlertFiles/alert/js/alert.js" > < /script> <
 script type = "text/javascript" > function validateData()
{
    if ($("#OrderCode").val() == "")
    {
        $.alert.open('Please enter OrderCode !');
        return false;
    }
    else if ($("#OrderPrice").val() == "")
    {
        $.alert.open('Please enter OrderPrice !');
        return false;
    }
    else
    {
        return true;
    }
}

function Validate()
{
    $.alert.open('confirm', 'Are you sure you want to save this data?', function(button)
    {
        if (button == 'yes')
        {
            if (validateData() == true)
            {
                $("#CreateForm").submit();
            }
        }
        else if (button == 'no')
        {
            $.alert.open('You pressed the "No" button.');
        }
        else
        {
            $.alert.open('Alert was canceled.');
        }
    });
} < /script> < /head> < body > @using(Html.BeginForm(null, null, FormMethod.Post, new
{
    id = "CreateForm"
}))
{
    @Html.ValidationSummary(true) < fieldset > < legend > OrderFood < /legend> < div class = "editor-label" > @Html.LabelFor(model => model.OrderCode) < /div> < div class = "editor-field" > @Html.EditorFor(model => model.OrderCode)
    @Html.ValidationMessageFor(model => model.OrderCode) < /div> < div class = "editor-label" > @Html.LabelFor(model => model.OrderPrice) < /div> < div class = "editor-field" > @Html.EditorFor(model => model.OrderPrice)
    @Html.ValidationMessageFor(model => model.OrderPrice) < /div> < p > < input id = "btnCreate"
    type = "button"
    onclick = "return Validate();"
    value = "Create" / > < /p> < /fieldset>
} < /body> < /html>

After adding the Confirmation on the Create button now let us move forward to add Confirmation while deleting records.

Adding (DeleteConfirmation) Controller

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

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


                           Figure 16. Adding DeleteConfirmationController

After adding Controller we are going to add two Action Methods in this controller. One will return View with List and other will return JSON result.

Code snippet of DeleteConfirmation Controller

public class DeleteConfirmationController: Controller
{
    [HttpGet]
    public ActionResult Details()
    {
        List < OrderFood > objlistorderfd = new List < OrderFood > ();
        OrderFood OF1 = new OrderFood();
        OF1.OrderID = 1;
        OF1.OrderCode = "FD0001";
        OF1.OrderPrice = "2000";
        OrderFood OF2 = new OrderFood();
        OF1.OrderID = 2;
        OF1.OrderCode = "FD0002";
        OF1.OrderPrice = "600";
        OrderFood OF3 = new OrderFood();
        OF1.OrderID = 3;
        OF1.OrderCode = "FD0003";
        OF1.OrderPrice = "3000";
        objlistorderfd.Add(OF1);
        objlistorderfd.Add(OF2);
        objlistorderfd.Add(OF3);
        return View(objlistorderfd);
    }
    public ActionResult Delete(string OrderID)
    {
        return Json("Delete", JsonRequestBehavior.AllowGet);
    }
}

Code snippet of DeleteConfirmation Controller

After adding Action Method now we are going to add View to this Action Method (Details).

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


Figure 17. Adding View with name Details [DeleteConfirmationController]

After selecting Add View option a new wizard will pop up with the name Add View.

Inthe Scaffold template I have selected List because we are going to show the list of order. From that you can delete if you don’t want any.

It will have View Name with the same name as Action Method inside which you right click to add View.
In this example we are going to create strongly typed view and for that I have checked this option and in Model class I have selected OrderFood model class.

After selecting the required option now finally click on the Add button.

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

Making changes in View removing link button and adding Single button for Delete

We have added a List page here and it will show all Order records:


                              Figure 18. View Details [DeleteConfirmationController]

From Details View we are going to remove this link button and going to add a single button here.


              Figure 19. View Details after removing action links and adding single delete button

After adding a button now we are going to add Scripts Reference.

Adding Script Reference to View (Details View)

<link href="~/SmartAlertFiles/alert/css/alert.min.css" rel="stylesheet" />
<link href="~/SmartAlertFiles/alert/themes/dark/theme.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/SmartAlertFiles/alert/js/alert.js"></script>

After adding script now let’s add validation.

This script will first ask “Are you sure that you want to delete this Order?”,  then there are 2 buttons “Delete” and “Cancel”. If you click on Delete button then it will be delete record using Ajax Post request, otherwise if you clicked on theCancel button then it does not perform anything. 

1. It will show dialog of confirmation.
   
   
2. If you click on the delete button then it will perform Ajax Post event with this URL. [/DeleteConfirmation/delete/] and pass OrderID to it for deleting record. After that it will call [window.location.href = '/DeleteConfirmation/Details'] ( to refresh this page ).

Code snippet of deleteorder function

<script type="text/javascript">
    function deleteOrder(OrderID)
    {
        $.alert.open('confirm', 'Are you sure that you want to delete this Order?', function(button)
        {
            if (button == 'yes')
            {
                $.ajax(
                {
                    url: "/DeleteConfirmation/delete/",
                    data:
                    {
                        "OrderID": OrderID
                    },
                    type: "DELETE",
                    success: function(data)
                    {
                        if (data == 'delete')
                        {
                            if (button == 'ok')
                            {
                                window.location.href = '/DeleteConfirmation/Details';
                            }
                        }
                    }
                });
            }
            else if (button == 'no')
            {
                $.alert.open('You pressed the "No" button.');
            }
            else
            {
                $.alert.open('Alert was canceled.');
            }
        });
    }
</script>

Screenshot of Smart Alert DeleteConfirmation on click of Delete button


                                          Figure 20. Confirmation while deleting records

Code snippet of Details View

@model IEnumerable < SmartAlertSite.Models.OrderFood > @
{
    Layout = null;
} < !DOCTYPE html > < html > < head > < meta name = "viewport"
content = "width=device-width" / > < title > Details < /title> < link href = "~/SmartAlertFiles/alert/css/alert.min.css"
rel = "stylesheet" / > < link href = "~/SmartAlertFiles/alert/themes/dark/theme.min.css"
rel = "stylesheet" / > < script src = "~/Scripts/jquery-1.7.1.min.js" > < /script> < script src = "~/Scripts/jquery.validate.min.js" > < /script> < script src = "~/Scripts/jquery.validate.unobtrusive.min.js" > < /script> < script src = "~/SmartAlertFiles/alert/js/alert.js" > < /script> < script type = "text/javascript" > function deleteOrder(OrderID)
{
    $.alert.open('confirm', 'Are you sure that you want to delete this Order?', function(button)
    {
        if (button == 'yes')
        {
            $.ajax(
            {
                url: "/DeleteConfirmation/delete/",
                data:
                {
                    "OrderID": OrderID
                },
                type: "DELETE",
                success: function(data)
                {
                    if (data == 'delete')
                    {
                        if (button == 'ok')
                        {
                            window.location.href = '/DeleteConfirmation/Details';
                        }
                    }
                }
            });
        }
        else if (button == 'no')
        {
            $.alert.open('You pressed the "No" button.');
        }
        else
        {
            $.alert.open('Alert was canceled.');
        }
    });
} < /script> < /head> < body > < p style = "text-align:left" > Delete Order < /p> < table style = "margin-left:20px;" > < tr > < th style = "text-align:center" > @Html.DisplayNameFor(model => model.OrderCode) | < /th>  < th style = "text-align:center" > @Html.DisplayNameFor(model => model.OrderPrice) | < /th>  < th > Action < /th> < /tr>
@foreach(var item in Model)
{ < tr > < td style = "text-align:center" > @Html.DisplayFor(modelItem => item.OrderCode) < /td> < td style = "text-align:center" > @Html.DisplayFor(modelItem => item.OrderPrice) < /td> < td style = "text-align:center" > < input id = "Delete"
    onclick = "deleteOrder('@item.OrderID')"
    type = "button"
    value = "Delete" / > < /td> < /tr>
} < /table> < /body> < /html>

Finally, we are going to see how to show a message after Saving Records.

Displaying Success Message after Saving Record

I have made a small change inthe Http Post request of the create action method of the home controller.

If thedata submitted is valid, then I am going to show a message. For that I have stored a message in TempData to display, and after this I am redirecting the request to Http Get request of create action method of the home controller.

public class DemoHomeController: Controller
{
    [HttpGet]
    public ActionResult Create()
    {
        return View(new OrderFood());
    }
    [HttpPost]
    public ActionResult Create(OrderFood OrderFood)
    {
        if (ModelState.IsValid)
        {
            TempData["Message"] = "Your Order " + OrderFood.OrderCode + "has been Saved Successfully ";
            return RedirectToAction("Create");
        }
        else
        {}
        return View(OrderFood);
    }
}

Code snippet of Create View [DemoHome Controller]

In this code snippet of Create View of the home controller, I am going to check that TempData["Message"] is not null and if it is not null, then I am going to show the message which is stored in TempData using Smart Alert.

<link href=”~/SmartAlertFiles/alert/css/alert.min.css” rel=”stylesheet” />
<link href=”~/SmartAlertFiles/alert/themes/dark/theme.min.css” rel=”stylesheet” />
<script src=”~/Scripts/jquery-1.7.1.min.js”></script>
<script src=”~/Scripts/jquery.validate.min.js”></script>
<script src=”~/Scripts/jquery.validate.unobtrusive.min.js”></script>
<script src=”~/SmartAlertFiles/alert/js/alert.js”></script>
<script type=”text/javascript”>
    @if(TempData[“Message”] != null)
    { < text > $(window).load(function()
        {
            $(document).ready(function()
            {
                $.alert.open(‘@TempData[“Message”]’);
            });
        }); < /text>
    }
</script>

Screenshot of Smart Alert on Saving Record.


                                               Figure 21. Message after saving record

Finally we have completed using Smart Alert with MVC.