Confirmation before proceed

There are some basic rule of UI development. One of them is take confirmation from the user before doing something permanently. For example suppose there is a delete option in our UI. When the user click on this option then we should ask for a confirmation from the user that if they really want to delete the record or they click on this option by accidently. It is like giving a second chance to the user.

The most basic option to take confirmation from the user is using the standard confirmation box in browser. We can use it with some JavaScript.

confirm("Are you sure?");

It will show a small modal popup in the browser with a OK and CANCEL button. After showing the confirmation box we can take our decision according the user interaction. In other words we can track the user choice. weather they click on OK button or CANCEL button. For OK it will return true and for CANCEL return false.

var isConfirmed = confirm("Are you sure?");
if (isConfirmed) {
    // Continue with the operation.
}
else {
    // Cancel the operation.
}

As a demo, I am working on a ASP.NET MVC application, on which I am showing all the ‘Customer’ data from ‘Northwind’ database inside one of a view.

//
// GET: /Customer/

public ActionResult Index()
{
    // Get all 'Customer' data using 'ADO.NET Entity Framework'.
    NorthwindEntities entities = new NorthwindEntities();
    IList<Customer> customers = entities.Customers.ToList();

    return View(customers);
}

Now I am creating a view to show all the ‘Customer’ data. I am using html table in my view. Also I am including some links for basic operation like edit, delete etc in the table.

<table>
    <tr>
        <th></th>
        <th>CustomerID</th>
        <th>CompanyName</th>
        <th>ContactName</th>
        <th>ContactTitle</th>
        <th>Address</th>
        <th>City</th>
        <th>Region</th>
        <th>PostalCode</th>
        <th>Country</th>
        <th>Phone</th>
        <th>Fax</th>
    </tr>
    <% foreach (var item in Model)
        { %>
    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) %> |
            <%: Html.ActionLink("Details", "Details", new { id = item.CustomerID })%> |      
                          
            <!-- 
                Give a css class to the 'delete' link so that we 
                can get the 'delete' link using jQuery easily. 
                'new { @class = "deleteLink" }' this is the syntax 
                to add css class. 
            -->
            <%: Html.ActionLink("Delete", "Delete", new { id = item.CustomerID }, new { @class = "deleteLink" })%> 
        </td>
        <td><%: item.CustomerID %></td>
        <td><%: item.CompanyName %></td>
        <td><%: item.ContactName %></td>
        <td><%: item.ContactTitle %></td>
        <td><%: item.Address %></td>
        <td><%: item.City %></td>
        <td><%: item.Region %> </td>
        <td><%: item.PostalCode %></td>
        <td><%: item.Country %></td>
        <td><%: item.Phone %></td>
        <td><%: item.Fax %></td>
    </tr>
    <% } %>
</table>

When the user click on the delete link then we should show a confirmation popup because this operation will remove the record permanently from the database. For that I am using some JavaScript and jQuery code.

$("document").ready(function () {
    $(".deleteLink").click(function () {                
        // Show the confirm box when delete link is clicked.
        var isConfirmed = confirm("Are you sure?");

        // Check the user decision and take action 
        // according to that.
        if (isConfirmed) {
            return true; // Yes, delete the record.
        }
        else {
            return false; // No, cancel the delete operation.
        }
    });
});

So if user click on the OK button then we can continue with the delete operation otherwise cancel it. In the case of OK button I am returning true that means it will submit to the server to continue with the delete operation and in the case of CANCEL I am returning false that means it will not submit to the server and the delete operation can not be able to continue.

So the full code of the view is:

<%@ Page 
    Title="" 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Customer>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    
    
    <!-- Attach jQuery library. -->
    <script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>        
    
    <script language="javascript" type="text/javascript">
        $("document").ready(function () {
            $(".deleteLink").click(function () {                
                // Show the confirm box when delete link is clicked.
                var isConfirmed = confirm("Are you sure?");

                // Check the user decision and take action 
                // according to that.
                if (isConfirmed) {
                    return true; // Yes, delete the record.
                }
                else {
                    return false; // No, cancel the delete operation.
                }
            });
        });
    </script>

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>CustomerID</th>
            <th>CompanyName</th>
            <th>ContactName</th>
            <th>ContactTitle</th>
            <th>Address</th>
            <th>City</th>
            <th>Region</th>
            <th>PostalCode</th>
            <th>Country</th>
            <th>Phone</th>
            <th>Fax</th>
        </tr>
        <% foreach (var item in Model)
            { %>
        <tr>
            <td>
                <%: Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) %> |
                <%: Html.ActionLink("Details", "Details", new { id = item.CustomerID })%> |      
                          
                <!-- 
                    Give a css class to the 'delete' link so that we 
                    can get the 'delete' link using jQuery easily. 
                    'new { @class = "deleteLink" }' this is the syntax 
                    to add css class.
                -->
                <%: Html.ActionLink("Delete", "Delete", new { id = item.CustomerID }, new { @class = "deleteLink" })%> 
            </td>
            <td><%: item.CustomerID %></td>
            <td><%: item.CompanyName %></td>
            <td><%: item.ContactName %></td>
            <td><%: item.ContactTitle %></td>
            <td><%: item.Address %></td>
            <td><%: item.City %></td>
            <td><%: item.Region %> </td>
            <td><%: item.PostalCode %></td>
            <td><%: item.Country %></td>
            <td><%: item.Phone %></td>
            <td><%: item.Fax %></td>
        </tr>
        <% } %>
    </table>

    <p><%: Html.ActionLink("Create New", "Create") %></p>
</asp:Content>
Confirmation Box
Confirmation Box

Happy coding.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s