First ModalPopupExtender example and some problems I run into

Just start to learn Ajax, and I start to use ModalPopupExtender for the first time.

Here are the essential code behind, it will show you how to update and insert record by using gridview and formview with ModalPopupExtender:

-----------------------------------------------------------------------------------------------------------------------------------

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="upOffice" runat="server">
            <ContentTemplate>
            <asp:Panel ID="pnSearch" runat="server">

            ....................

            <--In gridview we have a edit button to call edit mode --/>
                    <asp:GridView ID="gvOffice" runat="server">
                        <Columns>

                            .............
                            <asp:TemplateField HeaderText="Action" ShowHeader="False">
                                <ItemTemplate>
                                    <asp:ImageButton ID="IBTEditOffice" runat="server" CommandArgument='<%# Eval("ID") %>' CommandName="IBTEdit_Click" CausesValidation="false" />
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>

        <%

 

        protected void gvOffice_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.ToString() == "IBTEdit_Click" )
            {
                Session["sesOfficeID"] = e.CommandArgument.ToString();
                fvOffice.ChangeMode(FormViewMode.Edit);
                fvOffice.DataBind();
                mpeModalPopup .Show();
            }

        }

        %>

 

            <asp:Button ID="btnCreateOffice" runat="server"
                                Text="Create New Office" CssClass="button" CausesValidation="false"
                                οnclick="btnCreateOffice_Click " />

            <%

                    protected void btnCreateOffice_Click (object sender, EventArgs e)
                    {
                        fvOffice.ChangeMode(FormViewMode.Insert);
                        fvOffice.DataBind();
                        mpeModalPopup .Show();
                    }

            %>

            ....................

            </asp:Panel>
            <asp:Panel ID="pnModalPopup " runat="server" CssClass="modalPopup" Style="display: none" Width="540px">

                    <asp:FormView ID="fvOffice" runat="server">

                       <EditItemTemplate>  

                       .................
                       <asp:Button ID="btnUpdate" runat="server" CommandName="Update" Text="Update" />

                       ...................

                       </EditItemTemplate>      

                       <InsertItemTemplate>

                       ...................

   
                       <asp:Button ID="btnInsert" runat="server" CommandName="Insert" Text="Insert" />

                       ...................

                   </InsertItemTemplate>

                   </asp:FormView>

            </asp:Panel>
            <asp:HiddenField ID="hdnField " runat="server" />
            <asp:ModalPopupExtender ID="mpeModalPopup" runat="server"
                        TargetControlID="hdnField"
                        PopupControlID="pnModalPopup"
                        BackgroundCssClass="modalBackground"/>

        </ContentTemplate>
    </asp:UpdatePanel>

 

----------------------------------------------------------------------------------------------------------------------------------

 

And ModalPopupExtender will prevent button triger Click function if you set the button as TargetControlID , that's why we have to use a hiddenfield.