Почему Update Progress не запускается, когда установлен AssociatedUpdatePanelId?

Question

Когда я назначаю AssociatedUpdatePanelId, прогресс не отображается, когда я выбираю состояние, но когда я оставляю его пустым, он отображает прогресс.

Вот разметка aspx:

<div>
    <asp:ListBox ID="lstStates" runat="server" AutoPostBack="True"
    OnSelectedIndexChanged="lstStates_SelectedIndexChanged" SelectionMode="Multiple">
    </asp:ListBox>
</div>
<div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Panel ID="pnlCounty" runat="server">
    <asp:ListBox ID="lstCounties" runat="server" SelectionMode="Multiple">
    </asp:ListBox>
    </asp:Panel>
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="lstStates" EventName="SelectedIndexChanged" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress2" runat="server" DisplayAfter="1"
                        AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
    <img src="../images/loader2.gif" />
    Loading Counties...
    </ProgressTemplate>
    </asp:UpdateProgress>
</div>

Answer 1

Согласно этой статье внешние триггеры для UpdatePanel не запускают связанный UpdateProgress, так как реализация включения элемента управления UpdateProgress выполняет поиск в иерархии элементов управления для вызывающего элемента управления; внешний триггер не будет присутствовать в иерархии элементов управления.

Однако в статье предлагается ввести немного JavaScript, чтобы исправить эту ошибку; Я изменил его, чтобы (надеюсь) соответствовать вашим потребностям:

<script type="text/JavaScript" language="JavaScript">
    function pageLoad()
    {      
       var manager = Sys.WebForms.PageRequestManager.getInstance();
       manager.add_endRequest(endRequest);
       manager.add_beginRequest(OnBeginRequest);
    }
    function OnBeginRequest(sender, args)
    {
      var postBackElement = args.get_postBackElement();
      if (postBackElement.id == 'lstStates')
      { 
     $get('UpdateProgress2').style.display = "block";  
      }
   }
</script>

Answer 2

Не забудьте вместо

$get('UpdateProgress2').style.display = "block"; 

использовать

$get('<%=UpdateProgress2.ClientID%>').style.display = "block";  

, так как .NET создает собственное имя для контроллера (фактически добавляет «MainContent» или что-то еще).