ASP.NET 4.5 - Page Lifecycle problem with UpdatePanel containing modalpopupextender form and GridView

See more:

ASP.NET

Ajax

Gridview

UpdatePanel

It sounds complex, but what I want really is SO simple, I'm surprised that I'm hitting complications upon every turn.

What I need: Almost every page I'm building will have the same UI and layout. The page must have a button to launch a modal popup, containing a form to add new records. The page also has a GridView which displays the current records. All of this is contained in an UpdatePanel (which is where the complexity becomes overwhelming.)

I have everything I need in the ModalPopupExtender...I have it working exactly as I need.

The problem I'm having is the GridView. There is a delete button next to each record, which fires a click event. There is also a checkbox next to each record which allows me to set a flag (fired on click as well.) The delete and checkbox click events work exactly as expected when NOT wrapped in an UpdatePanel. When I do wrap them in an UpdatePanel, nothing happens at all - the events aren't fired. I'm sure it's a Page Lifecycle thing but I can't spot where I went wrong.

I also need the ModalPopupExtender to refresh the GridView when either button is clicked. So, to summarize:

1. User clicks button at top, gets modal popup, submits data or cancels
2. Underlying GridView is refreshed
3. User clicks delete icon or checkbox next to a record
4. GridView is refreshed and displays change in data

#1 works...the rest does not. When I click the delete icon or the checkbox, the events are not fired. The GridView is re-bound but the RowCreated event then does not fire.

The Web Form page:

<asp:updatepanel id="ConfigSMTPUpdatepanel" runat="server">
    <contenttemplate>
        <table style="width:100%;">
            <tr>
                <td colspan="2">
                    <!-- modal popup button and div -->
                    <asp:imagebutton id="AddNewButton" runat="server" alternatetext="Add New SMTP Server" imageurl="~/Images/plus.gif" tooltip="Add New SMTP Server" />
                    <asp:modalpopupextender
                        id="AddNewModalPopupExtender"
                        targetcontrolid="AddNewButton"
                        popupcontrolid="AddNewPanel"
                        popupdraghandlecontrolid="popupTitlebar"
                        backgroundcssclass="modalPopupBg"
                      dropshadow="true"
                        drag="true"
                        runat="server">
                    </asp:modalpopupextender>
                    <div id="AddNewPanel"  runat="server" style="display: none;" class="popupConfirmation">
                        <div class="popupContainer">
                            <div id="popupTitlebar" class="popupTitlebar">
                                <div class="titlebarLeft">Popup Header</div>
                                <div class="titlebarRight"></div>
                            </div>
                            <div class="popupBody">
                                <p>
                                    <table style="width:100%;">
                                        <tr>
                                            <td colspan="2">
                                                <asp:validationsummary ID="ConfigSMTPValidationSummary" runat="server" cssclass="validation" validationgroup="ConfigSMTPGroup" ShowModelStateErrors="true" />
                                            </td>
                                        </tr>
                                        <!-- SEARCH FORM -->
                                        <tr>
                                            <td class="fieldLabel">SMTP Address<span class="required">*</span></td>
                                            <td>
                                                <asp:textbox id="SMTPServer" cssclass="input" clientidmode="Static" runat="server" width="400px"></asp:textbox>
                                                <asp:requiredfieldvalidator id="SMTPServerValidator" runat="server" controltovalidate="SMTPServer" validationgroup="ConfigSMTPGroup" errormessage="SMTP Server Required!"></asp:requiredfieldvalidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="fieldLabel">Description</td>
                                            <td>
                                                <asp:textbox id="Description" cssclass="input" clientidmode="Static" runat="server" textmode="MultiLine" columns="55" rows="5">
                                                </asp:textbox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td> </td>
                                            <td>
                                                <asp:checkbox id="IsDefault" cssclass="input" text="Set As Default" runat="server" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"> </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" class="submit">
                                                <asp:button ID="SaveButton" Text="Save Record" runat="server" validationgroup="ConfigSMTPGroup" onclick="SaveButton_Click"></asp:button>
                                                 
                                                <asp:button ID="CancelButton" Text="Cancel" runat="server" CausesValidation="False" onclick="CancelButton_Click"></asp:button>
                                            </td>
                                        </tr>
                                    </table>
                                </p>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <!-- SEARCH RESULTS -->
                    <asp:gridview
                        id="ConfigSMTPGrid"
                        runat="server"
                        autogeneratecolumns="False"
                        datakeynames="ID"
                        onrowcreated="ConfigSMTPGrid_RowCreated">
                        <alternatingrowstyle backcolor="#F3F3F3" />
                        <columns>
                            <asp:templatefield>
                                <itemtemplate>
                                    <asp:imagebutton
                                        id="DeleteButton"
                                        runat="server"
                                        causesvalidation="False"
                                        commandname="Delete"
                                        commandargument='<%# Eval("ID") %>'
                                        imageurl="~/Images/del_icon.gif"
                                        alternatetext="Delete"
                                        onclientclick="return getDeleteMessageExt();"
                                        oncommand="DeleteButton_Command" />
                                </itemtemplate>
                            </asp:templatefield>
                            <asp:boundfield datafield="SMTPServer" headertext="Address" />
                            <asp:boundfield datafield="Description" headertext="Description" />
                            <asp:boundfield datafield="CreateDate" headertext="Created" />
                            <asp:templatefield headertext="Default">
                                <itemtemplate>
                                    <asp:checkbox id="IsDefaultGridCheck" runat="server" autopostback="true" />
                                </itemtemplate>
                            </asp:templatefield>
                        </columns>
                    </asp:gridview>
                </td>
            </tr>
        </table>
    </contenttemplate>
    <triggers>
        <asp:asyncpostbacktrigger controlid="ConfigSMTPGrid" />
    </triggers>
</asp:updatepanel>

...code-behind:

using ...etc...etc...etc...

public partial class ControlCenter_ConfigSMTP : System.Web.UI.Page
{
    protected void Page_PreRender(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            this.BindData();
    }

    protected void BindData()
    {
            this.ConfigSMTPGrid.DataSource = <bound List>;
            this.ConfigSMTPGrid.DataBind();
    }

    protected void SaveButton_Click(object sender, EventArgs e)
    {
            //save entity

            //update grid?  Didn't work...
            //this.ConfigSMTPUpdatepanel.Update();
    }

    protected void CancelButton_Click(object sender, EventArgs e)
    {
        //this.ConfigSMTPUpdatepanel.Update();
    }
}