Monday, April 13, 2009

Controls Within UpdatePanel Causing Full Postback

So today I was wrapping up a little project I've been working on. As one of my final steps I was going through the app and wrapping ASP UpdatePanels around the parts of my pages that I didn't want to perform full postbacks. This was going just swimmingly until I hit one page where the UpdatePanel just didn't seem to want to work. It didn't cause any errors or anything but when I clicked on controls within the panel the page did a full postback every time. Did some searching on the web and found that one likely culprit for this symptom is a dyncamically created LinkButton with no ID. Such a beast would likely be found within a data bound control for instance. But in this case, although I certainly was using a LinkButton it clearly had an ID assigned to it already. So it didn't seem like that was my problem. Finally through Google I found an old page at MSDN blogs that looked like it might contain information of worth but MSDN blogs is a shit site and was down for a change. Luckily, the GOOG's cache saved the day. The cached version of the page can be found here (at least as I type this it can): The cached article What I found within that article is that for some reason if an UpdatePanel is the direct child of a table row element then it just doesn't work. And sure enough my code looked like this:
<asp:UpdatePanel ID="TagsUPNL" runat="server">
 <ContentTemplate>
  <tr>

   <td style="vertical-align: top;" class="LeftAlign">
      <asp:LinkButton ID="myLB" runat="server" Text="some text" OnClick="MyLB_Click" />

   </td>
   <td style="vertical-align: top;">
    Control to update ... 
   </td>
  </tr>

 </ContentTemplate>
</asp:UpdatePanel>







What I intended with the above was that the entire contents of the table row (both tds in other words) would be included in the partial post-back. But due to this odd detail of the UpdatePanel's implementation this is not a valid way to achieve this. The fix was to use two UpdatePanels and a trigger, like so:
<tr>
 <td style="vertical-align: top;" class="LeftAlign">
  <asp:UpdatePanel ID="TagsUPNL" runat="server">

   <ContentTemplate>
    <asp:LinkButton ID="AddTagLBTN" runat="server" Text="Add Tag" OnClick="AddTagLBTN_Click" />

   </ContentTemplate>
  </asp:UpdatePanel>
 </td>
 <td style="vertical-align: top;">

  <asp:UpdatePanel ID="TagsUPNL2" runat="server">
   <Triggers>
    <asp:AsyncPostBackTrigger ControlID="AddTagLBTN" EventName="Click" />

   </Triggers>
   <ContentTemplate>
    
   </ContentTemplate>
  </asp:UpdatePanel>
 </td>

</tr>




And that worked!

No comments: