Ajax Modal pop up appears twice

Question

I have a linkbutton inside the gridview and when I click on that linkbutton a modal pop up should appear. But when I click,the modal popup appears twice and below is my code.

ASPX:

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table>
                <asp:GridView ID="gvAppIssue" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                    ForeColor="#333333" GridLines="Both" OnRowCommand="gvAppIssue_RowCommand"
                    PageSize="100" ShowHeaderWhenEmpty="true" EmptyDataText="No Records Found" EmptyDataRowStyle-Font-Bold="true"
                    EmptyDataRowStyle-HorizontalAlign="Center" CsssClass="contentfont">
                    <Columns> 
                        <asp:TemplateField HeaderText="App ID">
                            <ItemTemplate>
                                <asp:Label ID="lblAppID" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>                            
                        <asp:TemplateField HeaderText="App Name">
                            <ItemTemplate>
                                <asp:Label ID="lblAppName" runat="server" Text='<%# Eval("App") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>                   
                        <asp:TemplateField HeaderText="Issue" ItemStyle-HorizontalAlign="Center">
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkbtnIssue" runat="server" ForeColor="Black" 
                                    Text='<%# Eval("App_Iss") %>' CommandName="checkAppIss" />                                    
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <RowStyle BackColor="White" />
                    <PagerStyle HorizontalAlign="Center" BackColor="#5B95CF" ForeColor="White" />
                    <HeaderStyle BackColor="#5B95CF" Font-Bold="True" ForeColor="White" Width="80%" />
                </asp:GridView>
                <asp:Panel ID="pnlIssue" runat="server" BackColor="Gainsboro" CssClass="contentfont">                        
                <table align="center">
                        <tr>
                            <th valign="middle" colspan="2" align="center" bgcolor="#1E4265" style="font-weight: bold;
                                font-size: medium; font-family: Arial; color:white;">
                                Issue Details
                                <asp:ImageButton ID="btnWarning" runat="server" ImageUrl="Images/Close.PNG" ImageAlign="Right"
                                    Height="20px" Width="20px" />
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label runat="server" Text="App ID" Font-Bold="true"></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="lblAppID" runat="server"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label runat="server" Text="AppName" Font-Bold="true"></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="lblAppName" runat="server"></asp:Label>
                            </td>
                        </tr>                         
                    </table>
                </asp:Panel>
                <asp:HiddenField ID="hfpop" runat="server"  />
                <cc1:ModalPopupExtender ID="popup" CancelControlID="btnWarning" runat="server" PopupControlID="pnlIssue"
                    TargetControlID="hfpop" >
                </cc1:ModalPopupExtender>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Code Behind:

protected void gvAppIssue_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        try
        {
            if (e.CommandName == "checkAppIss")
            {
                 GridViewRow gvRow = (GridViewRow)((LinkButton)e.CommandSource).NamingContainer;
                 string strID = ((Label)gvRow.FindControl("lblAppID")).Text;
                 if(strID == "Yes")
                 {
                    int appID = "1";
                    ShowPopup(appID);
                 }   
             }
         }
     }    

Based on the strID value I need to check certain rows in a table and then I populate values to the label in ShowPopup method.

public void ShowPopup(int appID)
    {
        DataTable dtGetID = AppData.GetID(appID);
        if (dtGetID.Rows.Count > 0)
        {
            lblAppID.Text = dtGetID.Rows[0]["Id"].ToString();
            lblAppName.Text = dtGetID.Rows[0]["Name"].ToString();               
            popup.Show();
        }
    }

Now I'm able to get the right values in the labels and the only problem is that the popup appears twice. One popup has whole values and it's perfect and the other one has only the first td values and not the label from the showpopup method. So I had to close one pop up in order to see the other modal which is just perfect.

Can anyone suggest or assist me to solve this?

Answer 1

This could be due to a postback issue. Perhaps try placing "pnlIssue", the modul popup extender and hidden field outside of the gridView update panel and in their own update panel, set UpdateMode="Conditional" on the panel's update panel and call updatepanelName.Update in show popup.

E.g.

<asp:UpdatePanel ID="upPopup" ChildrenAsTriggers="false" RenderMode="Inline" UpdateMode="Conditional" runat="server">
<ContentTemplate>
    <asp:Panel ID="pnlIssue" runat="server" BackColor="Gainsboro" CssClass="contentfont">                        
            <table align="center">
                    <tr>
                        <th valign="middle" colspan="2" align="center" bgcolor="#1E4265" style="font-weight: bold;
                            font-size: medium; font-family: Arial; color:white;">
                            Issue Details
                            <asp:ImageButton ID="btnWarning" runat="server" ImageUrl="Images/Close.PNG" ImageAlign="Right"
                                Height="20px" Width="20px" />
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label runat="server" Text="App ID" Font-Bold="true"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lblAppID" runat="server"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label runat="server" Text="AppName" Font-Bold="true"></asp:Label>
                        </td>
                        <td>
                            <asp:Label ID="lblAppName" runat="server"></asp:Label>
                        </td>
                    </tr>                         
                </table>
            </asp:Panel>
            <asp:HiddenField ID="hfpop" runat="server"  />
            <cc1:ModalPopupExtender ID="popup" CancelControlID="btnWarning" runat="server" PopupControlID="pnlIssue"
                TargetControlID="hfpop" >
            </cc1:ModalPopupExtender>
</ContentPanel>
</UpdatePanel>

And code behind:

public void ShowPopup(int appID)
{
    DataTable dtGetID = AppData.GetID(appID);
    if (dtGetID.Rows.Count > 0)
    {
        lblAppID.Text = dtGetID.Rows[0]["Id"].ToString();
        lblAppName.Text = dtGetID.Rows[0]["Name"].ToString();               
        popup.Show();
        upPopup.Update();
    }
}