Question

当用户点击删除时，我想打开一个简单的弹出窗口（也许我可以稍后用CSS扩展），其中有一些文本像＆＃34;你想要删除这个条目＆＃34;如果用户按下＆＃34;是＆＃34;如果＆＃34;取消＆＃34;我将调用要删除的操作。什么都不会发生我该怎么做？

 $('#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对话框。请参阅此fiddle。

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

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

2 个答案: