Create confirmation pop-up in delete operation

Question

When user click on delete I want to open simple pop-up (which maybe I can extend later on with CSS) which having some text like "Do you want to delete this entry" if user press on "yes" I will invoke the action to delete, if "cancel" then nothing will happen. How should I do that?

 $('#data-table').on('click', '.btnCustomDelete', function () {
            nCurrentDel = $(this).data("id");

This is the line of the delete code :

  @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { @class = "btnCustomDelete", @data_id = item.Id })

Answer 1

Using the overload Html.ActionLink(string linkText, string actionName, string controllerName, object RouteValues, object HtmlAttributes) and some javascript , you can achieve.

Try this:

<%= Html.ActionLink(
    "Delete", 
    "Delete", 
    new { id = item.Id }, 
    new { @class = "btnCustomDelete", @data_id = item.Id },
    new { onclick = "return confirm('Are you sure you wish to delete this article?');" }) 
%>

This will add the HTML attribute onclick, which will execute the specified javascript when the link is clicked. If an onclick event on a link (or a form's submit button) returns false, the action (following the link, posting the form) doesn't happen. The confirm(message) function shows the user a confirmation dialog with the specified message, and returns either true or false depending on the user's response.

The overloaded method:

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    Object routeValues,
    Object htmlAttributes
)

http://msdn.microsoft.com/en-us/library/dd492124.aspx

JQuery UI Confirm Dialog:

<%= Html.ActionLink(
    "Delete", 
    "Delete", 
    new { id = item.Id }, 
    new { @class = "btnCustomDelete", @data_id = item.Id }) 
%>

Javascript/Jquery:

$(document).ready(function(){
    $("#dialog-confirm").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        height:180,
    });

    $(".btnCustomDelete").click(function(e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");

        $("#dialog-confirm").dialog({
           buttons : {
                     "Confirm" : function() {
                           window.location.href = targetUrl;
                        },
                     "Cancel" : function() {
                           $(this).dialog("close");
                        }
                    }
        });

        $("#dialog-confirm").dialog("open");
    });
 });

HTML Code:

<div id="dialog-confirm" title="Delete the item?" > 
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p> 
</div> 

Answer 2

Just add a confirm popup :

$('#data-table').on('click', '.btnCustomDelete', function () {
    var $this = $(this),
        $row = $this.closest("tr"); // row containing this button

    if(confirm("Do you want to delete this entry")) {
        // User has answered "yes", so we remove the current row
        $row.parent().remove($row);
    }
}

---

UPDATE

If you want to style the confirmation popup, you can use jQuery UI dialog. See this fiddle .

The HTML code is the following :

<!-- Create the markup for the dialog -->
<div id="dialog-form" title="Create new user">
    <p>Do you want to delete this entry?</p>
</div>

The javascript is the following :

 // "Transform" the dialog-form element into a jQuery UI dialog
 $("#dialog-form").dialog({
     autoOpen: false,  // don't show at startup
     modal: true,      // create as modal (adds an overlay on the page)
     buttons: {        // create the 2 buttons
         Delete: function (evt) {
             // on delete, remove the current row
             $(this).data("row").remove();
             $(this).dialog("close");
         },
         Cancel: function () {
             // on cancel, only close the modal
             $(this).dialog("close");
         }
     }
 });


 // Code to open the modal (called below)
 function openDialog() {
     // here we set the current row into the modal
     $("#dialog-form").data("row", $(this).closest("tr"));

     // open the modal
     $("#dialog-form").dialog("open");         
 }

 // When any element with the class "delete" is clicked, show the modal
 $('#data-table').on('click', '.btnCustomDelete', openDialog);