Obscure ASP.NET Problem - AJAX Control Toolkit, CollapsiblePanelExtender, Image controls pages loading more than once....
Had an issue on a current project where a page was being loaded twice for each request, although it was a little different for each browser. Under IE, this particular page was loaded, then the 'Default.aspx' page in the same directory was loaded. In Firefox, the same page was loaded twice. This was verified by simply placing breakpoints in the Page_Load events and watching it get hit twice, in addition to seeing this via the NET monitor in Firebug (the Firefox addin).
It was causing performance issues as well as weirdness regarding page state, as you can imagine. So in I went, thinking it should be relatively easy to debug. Turns out it was quite obscure and took more time than I had originally anticipated.
Scenario:
This page was using a CollapsiblePanelExtender from the AJAX Control toolkit to display a drop menu in the page. The CollapsiblePanelExtender had a declaration like the following:
<Some properties removed for brevity>
Note the use of the CollapsedImage and ExpandedImage properties. These tell the extender what images to display when the control is in a collapsed and expanded state. We also used the ImageControlID property to point to an <asp:Image control for the extender to manipulate with the respective images. Its declaration looked like this:
And therein was the cause of the problem! The page itself looked as though it worked fine. The CollapsiblePanelExtender changed the image accordingly and it looked good. However, the <asp:Image control did not originally have any ImageUrl property specified to an initial image (even though the CollapsiblePanelExtender was dynamically setting it). This rendered out to the page like this:
Now you see it right? The src="" part of the tag. This caused IE to make a request against the /WebDirectory/ and thus it was getting the default.aspx document in that directory. It caused Firefox to request exactly the same again. So 2 requests for the 1 page request. Obviously to solve it, we just specified the original image to be displayed as part of the image control like so:
Problem solved!
Now in general, it might be obvious that an <asp:Image control might render out this way, and cause such an issue but the fact that the CollapsiblePanelExtender was dynamically setting this, and making it look like it was working fine, really threw me. It took some creative debugging to drill down and find this particular issue out, which I may highlight in the next post.