Search code examples
asp.netajaxupdatepanelupdateprogress

UpdatePanel breaks after adding UpdateProgress

I have some code that contains a panel where I put an ASP chart from codebehind. Below the panel I placed a button with a postback event that changes some parameter of that chart.

Here is a simplified version of the code:

...
<asp:UpdatePanel ID="udp" runat="server">
  <ContentTemplate>
    <asp:Panel ID="pnl_chart" runat="server" />
    <asp:Button ID="btn_chart" UseSubmitBehavior="false" runat="server" />
  </ContentTemplate>
</asp:UpdatePanel>
...

And the code behind:

Private Property AltChart As Boolean
  Get
    If Me.ViewState("simulador_avanzado") Is Nothing Then
      Return False
    End If
    Return ToBool(Me.ViewState("simulador_avanzado"))
  End Get
  Set(value As Boolean)
    Me.ViewState("simulador_avanzado") = value
  End Set
End Property    

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
  ...
  If IsPostBack AndAlso ToStr(Me.Request("__EVENTTARGET")).Contains("btn_chart") Then
    AltChart = Not AltChart
  End If

  Dim cht as New Chart
  'Build the chart...'
  pnl_chart.Controls.Add(cht)
  ...
End Sub

This works like a charm, but when I add an UpdateProgress the PostBack stops working. Whenever I click the button, the UpdateProgress is shown for 2-3 seconds (exactly what it takes to do the PostBack) but then it hides and the UpdatePanel content isn't refreshed.

This is the new code:

...
<asp:UpdatePanel ID="udp" runat="server">
  <ContentTemplate>
    <asp:Panel ID="pnl_chart" runat="server" />
    <asp:Button ID="btn_chart" UseSubmitBehavior="false" runat="server" />
  </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="udpro" AssociatedUpdatePanelID="udp" DynamicLayout="false" runat="server">
  <ProgressTemplate>
    <div class="udp_progress">
    </div>
  </ProgressTemplate>
</asp:UpdateProgress>
...

I debugged the partial postbacks and the code behind is working as intended, it updates the AltChart variable and the chart itself.

To put it simple: UpdatePanel partial postback works perfectly, but when I add an UpdateProgress bound to it, its content isn't updated on partial postbacks.

Update: I'm getting the next client error:

SCRIPT5022: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'ctl00_Body_ctl02_udp_button'. If it is being updated dynamically then it must be inside another UpdatePanel.

Apparently the js generated by the UpdateProgress is being cached. The UpdatePanel with ID udp_button is from a previous version of the code and it's no longer there (I had the button outside the UpdatePanel and I wrapped it with its own UpdatePanel to make the UpdateProgress aware of the async postback, following this example, now I simply put it inside the chart's UpdatePanel).

Clearing the browser cache does not seem to work (as well as using a different browser).

UPDATE 2: OK, I was mistaken.

udp_button is another UpdatePanel present on the page, it's inside a user control and I hadn't noticed it. I'll try to place some conditional UpdateModes on both UpdatePanels to see if I can prevent the UpdateProgress from updating the wrong UpdatePanel.

Solution

  • I did what I mentioned on the Update 2 and it worked!

    Apparently, the javascript code generated by the UpdateProgress control tries to update all UpdatePanels on the page affected by the async postback, and couldn't find an UpdatePanel that was inside a web user control (the ID it was using to look for the panel didn't match the panel ClientID).

    Solution: Establish the property UpdateMode="Conditional" for the UpdatePanel inside the web user control, and make it update only when it's needed. This way the web user control isn't updated during the async postback generated by the button, and the UpdateProgress' javascript doesn't try to find it.