Two ModalPopupExtenders used in the same way, only one works

Within a gridview, I have an "Email" button and a "Delete" button that opens up a Modal popup window using the modalpopupextender. The problem is that the Email window opens when the button is clicked, but the Delete window does not open when its button is clicked. I am using both modalpopu开发者_如何学编程pextenders in the same way.

 <asp:ButtonField ButtonType="Button" CommandName="Email" Text="Email" />
                    <asp:ButtonField ButtonType="Button"  CommandName="Delete" Text="Delete" />

<%-- Email modal--%>      
    <asp:Panel ID="pnlPopupEmail" runat="server" Width="500px" Style="display: none">
    <asp:UpdatePanel ID="updPnlEmail" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
     <asp:Button ID="btnShowEmail" runat="server" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="mdlPopupEmail" runat="server" TargetControlID="btnShowEmail"
                    PopupControlID="pnlPopupEmail" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" />
        <div class="EmailPopup">
            <table>
                <tr>
                    <td>
                        To:
                    </td>
                    <td>
                       <asp:TextBox ID="EmailTo" runat="server" Width="350"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        From:
                    </td>
                    <td>
                        <asp:TextBox ID="EmailFrom"  runat="server" Width="350"></asp:TextBox>
                    </td>
                </tr>
                 <tr>
                    <td>
                        Subject:
                    </td>
                    <td>
                        <asp:TextBox ID="Subject" runat="server" Width="350"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td></td>
                       <td> <asp:TextBox ID="EmailMessageBox" Width="350" Height="150" runat="server" TextMode="MultiLine" Wrap="true"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:LinkButton ID="SendBtn" runat="server" OnClick="SendBtn_Clicked" Text="Send" />
                        <asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
                    </td>
                    <td>
                        <asp:Label ID="theID" runat="server" Visible="false"></asp:Label>
                    </td>
                </tr>
                </table>
        </div>

    </ContentTemplate>
    </asp:UpdatePanel>
    </asp:Panel>
   <%-- -----end email modal--%>
    <%-- Start Delete Confirmation Modal --%>
    <asp:Panel ID="DelConfirmPanel" runat="server" Width="500px" Style="display: none">
        <asp:UpdatePanel ID="DelConfirmUpdatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:Label ID ="TESTLabel" runat="server" Text="Are you sure?" ></asp:Label>
                <asp:Button ID="DelModalButton" runat="server" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="modalPopUpDelConfirm" runat="server" TargetControlID="DelModalButton"
                    PopupControlID="DelConfirmPanel" CancelControlID="DeleteCancel" BackgroundCssClass="modalBackground" />
                <div class="DeletePopup">
                    <asp:LinkButton ID="DelConfirmedButton" runat="server" OnClick="DeleteConfirmation_Clicked"
                        Text="Delete" />
                    <asp:LinkButton ID="DeleteCancel" runat="server" Text="Cancel" CausesValidation="false" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
    <%-- End Delete Confirmation Modal --%>
</div>

Then in the codebehind I have a method that checks the command name and updates the updatepanel and shows the modalpopupextender.

protected void btn_Clicked(object sender, GridViewCommandEventArgs e)
{

    if (e.CommandName == "Email")
    {
        // a bunch of stuff that I am leaving out but is just changing fields in the
        //table withing the modal popup
        updPnlEmail.Update();
        mdlPopupEmail.show();
    }

    if (e.CommandName.Equals("Delete"))
    {
        int index = Convert.ToInt32(e.CommandArgument);
        String id = gvReservations.DataKeys[index].Value.ToString();    // get id
        try
        {
            DelConfirmUpdatePanel.Update();
            modalPopUpDelConfirm.Show();
        }
        catch (Exception ex)
        {
            throw new Exception(ex.Message);
        }
    }
}

Any ideas why one works and not the other? Is there a good way to debug this kind of error? Thanks a lot for any help!

Figured it out.

<asp:ButtonField ButtonType="Button"  CommandName="Delete" Text="Delete" />

This is where the problem was. I didn't realize that "Delete" was a reserved command name. So when this button was clicked an exception was being thrown saying that it couldn't delete from the table. Thus, the modal popup was never being shown. I figured it out by opening the javascript console in the chrome tools.

So to fix it, I changed the command name to something else and now everything works as expected.