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

Question

当用户点击删除时，我想打开一个简单的弹出窗口(也许我可以稍后用 CSS 扩展)，如果用户点击"is"，我会显示一些文本，比如“你想删除这个条目吗”调用删除操作，如果“取消”则什么都不会发生。 我应该怎么做？

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