同じaspxページの2つの入れ子になった更新パネル

Question

私は、apsxページに2つの入れ子になったUpdatePanelコントロールを持っています。外側は1ページ全体で、 "Loading Page ..."というメッセージが表示されます。内側の目的はドロップダウンリストでグリッドをロードすることです。selectedIndexChanged

JavaScriptランタイムエラー：Sys.InvalidOperationException：同じid 'cphMainContent_Updprog3'を持つ2つのコンポーネントをアプリケーションに追加できません。

ご案内しています。ここでは、コードの構造は次のとおりです。

 <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>