ASP.NET GridView: Confirm button click postback with jQueryUI dialog

Question

I'm hoping someone can help me figure this out. I've looked all around have yet to find an example that will help me. I have a feeling that I'm super close on this...

I have an asp:gridview with a linkbutton at the end of each row. I need to do a confirmation dialog before running the onrowcommand. Here is the code I have to do it... What am I missing?

function confirmProcessing(event) {
    event.preventDefault();

    $("#dialog")
        .dialog({
            title: "Confirm Transaction",
            buttons: {
                "Process": function () {                                        
                    $("#dialog").dialog('close');

                },
                Cancel: function() {
                    $("#dialog").dialog('close');
                    return false;
                }
            },
            close: function() {                            
                return false;
            },
            modal: true,
            appendTo: "form"

        })
        .parent()
        .css('z-index', '1005');

}

aspx code

<div class="row">
    <asp:GridView runat="server" ID="ccList" CssClass="table table-striped table-responsive" ShowHeader="True" AutoGenerateColumns="False" OnRowDataBound="ccList_OnRowDataBound" OnRowCommand="ccList_OnRowCommand">
        <Columns>
            <asp:BoundField DataField="Street" ItemStyle-CssClass="Street" HeaderText="Street"/>
            <asp:BoundField DataField="ZipCode" ItemStyle-CssClass="ZipCode" HeaderText="Zip"/>
            <asp:BoundField DataField="MB4P" ItemStyle-CssClass="MB4P" HeaderText="MB4P"/>
            <asp:BoundField DataField="MB4S" ItemStyle-CssClass="MB4S" HeaderText="MB4S"/>
            <asp:BoundField DataField="BAL" ItemStyle-CssClass="BAL" HeaderText="BAL"/>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton runat="server" ID="btnProcess" OnClientClick="confirmProcessing(event);" Text="Process Payment" CommandName="Process" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"/>    
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

<div id="dialog" style="display:none">        
    <b>Are you sure you want to process this record?</b>
</div>

OnRowCommand code

protected void ccList_OnRowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "Process")
    {
        //Do the processing stuff here after confirm dialog.
    }        
}

If I remove the preventDefault it fires through to the OnRowCommand which is expected. I just don't know how to get the Process button in the modal dialog to fire off the command... what am I missing here?

Thanks in advance.

The aspx code is not showing up. I do not get an editor toolbar when trying to edit it so I am at a loss on why it won't pass the format validation if I change anything... — Bryce Martin, Jul 27 '16 at 23:51

ConnorsFan · Accepted Answer · 2016-07-28T05:15:36.213

The OnClientClick property of the LinkButton can be set in the RowDataBound event handler of the GridView, with the UniqueID of the button as the argument to confirmProcessing:

protected void ccList_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        LinkButton btnProcess = e.Row.FindControl("btnProcess") as LinkButton;
        btnProcess.OnClientClick = string.Format("return confirmProcessing('{0}');", btnProcess.UniqueID);
        ...
    }
}

The Javascript event handler can then be modified as follows:

function confirmProcessing(btnUniqueID) {
    $("#dialog").dialog({
        title: "Confirm Transaction",
        buttons: {
            "Process": function () {
                $("#dialog").dialog('close');
                __doPostBack(btnUniqueID, '');
            },
            Cancel: function () {
                $("#dialog").dialog('close');
                return false;
            }
        },
        close: function () {
            return false;
        },
        modal: true,
        appendTo: "form"

    }).parent().css('z-index', '1005');

    return false;
}

When the LinkButton is clicked, the dialog is displayed and the function returns false to cancel the initial postback. If the dialog is then closed by clicking on Process, __doPostBack is called with the UniqueID of the LinkButton to cause the postback.

Note: I thought that the UniqueID could be retrieved in client code with the help of the name attribute. It works for the Button control but not for the LinkButton. That is why I suggest setting the OnClientClick property in code-behind.

I didn't realize that I couldn't get the UniqueID of the LinkButton. That is why the editor was giving me an error saying it didn't recognize my btnProcess.UniqueId reference. I couldn't not figure out why and it really threw me off. I will test this right now and see if it work. PS: Thanks for fixing up the code in my formatting above. — Bryce Martin, Jul 28 '16 at 10:30

ASP.NET GridView: Confirm button click postback with jQueryUI dialog

1 Answers1