UpdatePanel and Repeater render page unresponsive after post-back

Question

I have a page with an UpdatePanel that contains a Repeater and a text box with the number of items in the repeater. When I change the value, the page is supposed to post back and redraw the Repeater with the updated number of items. This works in principle, but the page ends up frozen after post-backs and does not accept any input - in IE 8 only. It works perfectly fine in Firefox. For instance, the context menu does not appear when I right-click in controls, and I cannot enter text in text boxes.

When I take out the UpdatePanel, the page works fine, but of course refreshes on every post-back event. This is not necessarily related to the Repeater on the page. I think I am seeing this on other pages. What's the trick here?

<asp:UpdatePanel ID="uPanel" runat="server" UpdateMode="Conditional" 
  EnableViewState="true" ChildrenAsTriggers="true">
  <ContentTemplate>
  <asp:Panel ID="Panel1" runat="server" DefaultButton="btnSubmit">
    <asp:TextBox ID="tbItems" runat="server" AutoPostback="true" 
                      OnTextChanged="textchanged_Items"/>                     
  <asp:Repeater id="rptItems" runat="server" 
           OnItemDataBound="repeaterItem_Databound">
        <...>
      </asp:Repeater>


    protected void textchanged_Items(object sender, EventArgs e) {
        try {
            // this methods rebinds the repeater to a List after changing
            // the number of items in the list
            ReflowItemRepeater();   
            // This is not really necessary, since Databind() appears to
            // cause an update. I tried it anyways.               
            uPanel.Update();
        }
        catch (Exception ex) {
            ShowError(this, "Error displaying the item list.", ex, true);
        }
    }

I ended up removing the update panel.

One month later, different page, I am still and again fighting this. The situation is the same. An update panel, a repeater (actually 2 nested repeaters), and a control in the repeater that fires a postback event. The server processes the event correctly and returns control, but the browser (IE8) never refreshes the update panel. The page is unresponsive, as if in some sort of dead-lock situation. I can unlock it by clicking on a button that fires another postback event (also in the update panel). But the text boxes in the panel are not clickable or editable when this happens. Also, it happens only the first time. Once I have "freed up" the lock, or whatever it is, it will not happen again on this page, even when I repeat the exact same steps that led to it.

When this happens, the JIT debugger does not report anything.

Answer 1

I would actually set Triggers within your updatepanel.

I'm not sure you need to call .Update in your code behind as the updatepanel will be updated when the trigger occurs.

Try this:

Answer 2

My gut feeling is that it has something to do with the use of the OnTextChanged event. For kicks, try adding a button next to the text box, and reflow the repeater when the button is clicked instead. Does IE still freeze?

Answer 3

So I stripped this page down to the minimum and I found out what is doing it - the AjaxToolkit:CalendarExtender. If I take it out, everything works fine. Still, I would be curious to know if there is a workaround.

Here is a link to my test page. I will keep it up for a few days.

To see the issue, select "2" from the drop-down, then type something into the first quantity field and tab out. The cursor will blink in the next field, but it does not allow input. This happened in IE8, not in Firefox.

Edit: Actually, when I went back to the full page and removed the CalendarExtender, it was still not working. I do suspect that this issue has to do with controls posting back in the UpdatePanel, but I just can't pin it down. It seems seems to be one of these things where a combination of x things does not work, while any combination of (x-1) things does work.

Answer 4

Regarding the initial question, here's a working sample. I don't know if it's anyhow helpful, but just to make sure...

<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server"><title>Ajax Test</title></head>
  <body>
    <form id="form1" runat="server">
<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server" ChildrenAsTriggers="true">
  <ContentTemplate>
    <asp:Label runat="server" AssociatedControlID="txtTest">
       Enter 'fruit' or 'vegetables':
    </asp:Label>
    <asp:TextBox
      runat="server" ID="txtTest" AutoPostBack="true"
      OnTextChanged="Handler_Test_TextChanged"
    />

    <asp:Repeater runat="server" ID="rptItems">
      <HeaderTemplate><ul></HeaderTemplate>
      <ItemTemplate><li><%# Container.DataItem.ToString() %></li></ItemTemplate>
      <FooterTemplate></ul></FooterTemplate>
    </asp:Repeater>
  </ContentTemplate>
</asp:UpdatePanel>
    </form>
  </body>
</html>

<script runat="server">
  static readonly string[] Fruit = new string[]
    { "Apples", "Oranges", "Bananas", "Pears" };

  static readonly string[] Veg = new string[]
    { "Potatoes", "Carrots", "Tomatoes", "Onion" };

  void Handler_Test_TextChanged(object s, EventArgs e)
  {
    if(txtTest.Text == "fruit")            rptItems.DataSource = Fruit;
    else if(txtTest.Text == "vegetables")  rptItems.DataSource = Veg;
    else                                   return;
    rptItems.DataBind();
  }
</script>