It Could Be Done!

the blog about ASP.NET and not only

September 2007 - Posts

ASP.NET AJAX Extensions and IFRAMEs

The UpdatePanel control is a little similar to the HTML IFRAME element.  Both provide a way to update a web page partially without reloading a full browser window.  However while they both are use for similar purposes they UpdatePanel and IFRAME are very different on the server side.

Typically web sites powered by ASP.NET with AJAX Extensions there are no need to use IFRAMEs, but iframes are still useful for several reasons:

  • IFrame allow easy integration between ASP.NET and non ASP.NET applications.  (This is useful say if you have an old ASP application)
  • If your web page has generates much view state data, iframes may be used to separate part of the page

So, if you find that IFRAMEs are still useful for you, you will probably need to interact between IFRAME and parent web page.  The most typical need is to trigger some action in the parent page. 

Today while answering a question on asp.net forums I decided to describe how to achieve this with more details. 

IFrame element can see the parent window as:

 window.parent

While this is absolutely correct way to talk to parent web page, I prefer slightly different approach.  Personally I consider IFRAME as a component and I don't want it to know much about the page hosting it.  So, I would rather expect the parent to tell IFRAME hosted page how to interact with the parent page. 

This can be easily done by adding required methods to the iframe window from the parent page, like:

    <script type="text/javascript">
      function setup() { 
          var ifr = $get('IFrame'); 
          ifr.contentWindow.doRefreshUpdatePanel = function() { 
              __doPostBack('InternalButtonToRefreshUpdatePanel', ''); 
         
     
    </script>

    <iframe id="IFrame" src="iframe.aspx" onload="setup();"></iframe>

The sample above emulates click of the button in the UpdatePanel allowing IFRAME content to update the content of the UpdatePanel in the parent page.

IFrame content can use functions provided by the parent page by invoking them directly on window object:

      function refreshUpdatePanel() { 
          window.doRefreshUpdatePanel(); 
      }

The complete sample code is available for download

 

Posted: Sep 28 2007, 11:50 PM by ysw | with 4 comment(s)
Filed under: ,
Starting

Not actually starting, rather moving from http://couldbedone.blogspot.com.  Thanks to Joe Stagner for allowing me to host my blog at www.asp.net.

It happens that I primarily post on different problems and workarounds in ASP.NET and related topics, so you can expect more going on here.  I have a lot to do with Ajax Control Toolkit these days, so this it be likely another topic here. 

I have some ideas on what can be done with new C# 3.0 and LINQ.  I will write about this once they are finally realized by me.

I haven't answered some comments as I was on vacations recently.  Those related to Accordion control I will address in a separate post.

More Posts