同一aspx页面上的两个嵌套更新面板

Question

I have two nested UpdatePanel controls on apsx page. The outer one is for the whole page and displays "Loading Page..." img, while the purpose of inner one is to load a grid on dropdownlist selectedIndexChanged

I get this error while both have different names: JavaScript runtime error: Sys.InvalidOperationException: Two components with the same id 'cphMainContent_Updprog3' can't be added to the application.

Please guide. Here is the code structure:

     <asp:content id="HeaderContent" runat="server" contentplaceholderid="head">

    <script language="javascript" type="text/javascript">
            function showProgress() {
                var updateProgress = $get("<%=Updprog3.ClientID %>");
                updateProgress.style.display = "block";
            }

        </script>
    </asp:content>

    <asp:content id="BodyContent" runat="server" contentplaceholderid="cphMainContent">
        <div style="padding-left:36px; padding-top:10px;">
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <ContentTemplate>
    <table align="left">

           <tr>
                <td style="border: none; width:120px">
                    Call Category Group:
                </td>
                <td>
                    <asp:DropDownList ID="ddlGroup" runat="server" 
                        onChange="javascript:showProgress()"
                        OnSelectedIndexChanged="ddlGroup_SelectedIndexChanged" Width="400px">
                        <asp:ListItem Value="-1">--- Select Group ---</asp:ListItem>
                        <asp:ListItem Value="Group 1"> Group 1</asp:ListItem>
                        <asp:ListItem Value="Group 2">Group 2</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>

      <!--2nd update panel-->
    <asp:UpdatePanel ID="UpdPnl" runat="server" UpdateMode="Conditional">
       <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlCallCategoryGroup" EventName="SelectedIndexChanged"/>
        </Triggers>
    <ContentTemplate>

    <asp:GridView ID="gridView1" runat="server">
    </asp:GridView>
    </ContentTemplate>
    </asp:UpdatePanel>

    <asp:Panel runat="server" ID="pnlgvSecondLevelLoading" CssClass="modalwindow">
    <asp:UpdateProgress ID="Updprog3" runat="server" AssociatedUpdatePanelID="UpdPnl">
        <ProgressTemplate>
                        <table>
                        <tr>
                            <td align="right" width="35%">
                                <asp:Image ID="imgSubCallCategory_Wait3" runat="server" ImageUrl="ProjectImages/Wait_Small.gif" />
                            </td>
                            <td width="2%">
                            </td>
                            <td align="center" width="73%">
                                Loading data . . .
                            </td>
                        </tr>
                    </table>

        </ProgressTemplate>
    </asp:UpdateProgress>
    </asp:Panel>

    <asp:Panel runat="server" ID="pnlLoading" CssClass="modalwindow">
        <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <div class="container2">
                    <div class="content">
                        <br />
                        <table>
                            <tr>
                                <td align="right" width="35%">
                                    <asp:Image ID="imgSubCallCategory_Wait2" runat="server" ImageUrl="ProjectImages/30-1.gif" />
                                </td>
                                <td width="2%">
                                </td>
                                <td align="center" width="73%">
                                    Loading Page . . .
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </asp:Panel>
         </ContentTemplate>
        </asp:UpdatePanel> 
    </div>
</asp:content>

Answer 1

<asp:ScriptManager ID="WebApp" runat="server" AsyncPostBackTimeout="36000" ScriptMode="Release"></asp:ScriptManager>