jQuery UI对话框中的回发

Question

I've a gridview with some rows. On each row I have an imagebutton on the right side of the grid that offer the possibility to delete a record.

Clicking on the imagebutton is show a dialog created with jQuery UI.

jQuery code is:

$("[name*='btn_check']").click(function() {
    event.preventDefault();
    $("#dialog-confirm").dialog({
        autoOpen: true,
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Accept": function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
});

Code is quite simple and common for jQuery UI dialog.

So, now I wan to execute code when "Accept" button is clicked and I though __doPostBack could be a good solution.

So, I've created an hidden button in my gridview (near the imagebutton), then I've added this code to "Accept" function, as I found on another StackOverflow question:

__doPostBack('btn_hidden', '');

I've also tried to use this:

__doPostBack('<%= btn_hidden.UniqueID %>', '');

But without success.

So, which is the right way to execute a postback and how can I send the ID of the record to delete this record with code behind?

Answer 1

First of all you should have a correct CommandName and CommandArgument set on your ImageButton . Then call dialog from the OnClientClick . As I understood you have only one dialog element hidden somewhere so there should be no problems with ids:

<asp:ImageButton runat="server"
    CommandName="Delete" 
    CommandArgument='<%# Eval("YourKeyFieldNameHere") %>'
    OnCommand="ImageButton_Command"
    OnClientClick="javascript:return showConfirmDialog(this.name)"
/>

function showConfirmDialog(uniqueId) {
    $("#dialog-confirm").dialog({
        autoOpen: true,
        resizable: false,
        height: 200,
        modal: true,
        buttons: {
            "Accept": function() {
                $(this).dialog("close");
                __doPostBack(uniqueId, '');
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });

    return false; // this is to prevent default click handler to cause a postback
}

Codebehind:

protected void ImageButton_Command(object sender, CommandEventArgs e) 
{
    // e.CommandArgument will contain the record key and 
    // e.CommandName will be equal to "Delete" or whatever you'll set on aspx
}