在删除操作中创建确认弹出窗口

Question

当用户单击“删除”时，我想打开简单的弹出窗口（也许以后可以使用CSS进行扩展），如果用户单击“是”，则该文本带有诸如“是否要删除此条目”之类的文本，我将调用该操作删除，如果“取消”，则什么也不会发生。 我该怎么办？

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

这是删除代码的行：

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

Answer 1

使用重载Html.ActionLink(string linkText, string actionName, string controllerName, object RouteValues, object HtmlAttributes)和一些javascript可以实现。

尝试这个：

<%= 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?');" }) 
%>

这将添加HTML属性onclick，该属性将在单击链接时执行指定的javascript。 如果链接（或表单的提交按钮）上的onclick事件返回false，则不会发生操作（跟随链接，发布表单）。 confirm(message)函数向用户显示带有指定消息的确认对话框，并根据用户的响应返回true或false。

重载方法：

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确认对话框：

<%= 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代码：

<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

只需添加一个confirm弹出窗口：

$('#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);
    }
}

---

更新

如果要设置确认弹出窗口的样式，则可以使用jQuery UI对话框。 看到这个小提琴 。

HTML代码如下：

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

javascript如下：

 // "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);