ASP.Net Postbacks in iframe

One of my projects contains a couple of summary pages which take some time to collect their data. Originally, the ASPX page contained a set of GridViews displaying the result of different database queries, and I wanted to make the page more responsive by moving the GridViews to separate aspx files using iframes.

While this worked in principle, it did not work out in the details: paging and sorting via postback would always generate a full postback to the parent page. A question on Stack Overflow tells me I am not the only one with the problem.

Search the intertubes resulted in a project called UFRAME, which is hosted on codeplex:

UFrame combines the goodness of UpdatePanel and IFRAME in a cross browser and cross platform solution.

Instead of an iframe, the developer creates div’s with a non-standard src attribute. The UFRAME library scans through all these div’s, retrieves the HTML contents of the referenced ASP.NET URL, and merges its controls into the div using a bit of JavaScript magic. A detailed description can be found on the author’s codeproject page.

I needed to fix two problems, though:

The HTML parser throws an exception with pages containing a <meta http-equiv> attribute. This can be fixed by editing the regular expressions in htmlparser.js and replacing \w+ with \w+(-\w+)? in the startTag and attr regexes.

Next, UFRAME does not handle link targets: Every link is redirected to load the referenced URL into the containing div using the UFrameManager.loadHtml() function.

I changed the .click() function by replacing the call to loadHtml() with “return true;”, so that the links would open in the window containing the div.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.