使用 jQuery UI 对话框的 ASP.Net 图像按钮删除确认答案

【问题标题】：ASP.Net Image Button Delete confirmation using jQuery UI Dialog使用 jQuery UI 对话框的 ASP.Net 图像按钮删除确认
【发布时间】：2012-05-16 03:43:25
【问题描述】：

我正在使用转发器来显示数据行。每行都有一个删除图像按钮。我想使用 jQuery UI 添加一个确认对话框。单击删除图像按钮时，对话框正确显示。我不确定的是，当单击对话框上的 OK 按钮时，如何从 jQuery 调用 Image 按钮的事件处理程序。

【问题讨论】：

标签： jquery asp.net jquery-ui webforms

【解决方案1】：

你可以做这样的事情，检查Jquery Dialogbox的例子，在绑定中继器时，您将事件处理程序附加到它。像这样

yourbutton.Attributes.Add("onclick","Deletbox('" + yourDeleteID + "'))";

javascript函数：

var deleteId;//this the global variable to hold the value 


function Deletebox(ID)
{
  ( "#YourDialog" ).data('DeleteID',ID).dialog('open');
}

这是用于对话框初始化程序的

     $( "#YourDialog" ).dialog({
                    modal: true, //this will make a modal form
                                open:function()
                                {
                                      deleteId=$(this).data('DeleteID'); 
                                },
                    buttons: { // this is the buttons which you are going to show in box
                        "Delete all items": function() {
                            CallYourdeletionMethodFromServer(deleteId)// by using $.Ajax function
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

【讨论】：

我连接了一个 repeater_ItemCommand 事件处理程序，它从 CommandArgument 获取要删除的 ID，然后调用该方法来删除记录。如何直接从 jQuery 调用此事件处理程序。

【解决方案2】：

您可以在 OK 按钮单击处理程序中调用 __doPostBack 函数。您需要保留最初单击以打开对话框并将其作为第一个参数传递的按钮的 ID。

【讨论】：

【解决方案3】：

<div class="Parent">
        <div>
            test1
        </div>
        <div>
            <input type="button" value="Delete" onclick="Deletemessage(1,this);" />
        </div>
    </div>
    <div class="Parent">
        <div>
            test2
        </div>
        <div>
            <input type="button" value="Delete" onclick="Deletemessage(1,this);" />
        </div>
    </div>


function Deletemessage(id, obj) {
            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you want to delete this part?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Ok: function () {
                                $(obj).removeAttr('onclick');

                                //                                $.ajax({
                                //                                    url: '/yourPath', type: 'Post', dataType: 'json',
                                //                                    data: { 'id': id },
                                //                                    success: function (data) {
                                $(obj).parents('.Parent').remove();

                                //Or

                                //window.location.reload();

                                //                                    }
                                //                                });

                                $(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
        };

现场演示见此链接：http://jsfiddle.net/nanoquantumtech/9NKXq/

【讨论】：

function Deletemessage(id, name, obj) -> Deletemessage(1, 'test name', this);