UFrame Test Form

Goodness of UpdatePanel and browser IFRAME combined

Load any page inside a DIV

An URL names SomePage/ABC/View is loaded inside a DIV. You can click on the buttons and see the page postbacks within the DIV just like an IFRAME.

This should get replaced with content from SomePage/ABC/Omar/Zabir/25

THIS IS NOT AN IFRAME
<div class="UFrame" id="UFrame1" src="SomePage/ABC/Omar/Zabir/25" ></div>

Load pages like widgets

Another instance of SomePage/BCD/View/Bill/Gates/50 is loaded inside a DIV. This shows same view can be loaded many times within the same parent page.

This should get replaced with content from SomePage/BCD/Bill/Gates/50

THIS IS NOT AN IFRAME
<div class="UFrame" id="UFrame2" src="SomePage/BCD/Bill/Gates/50" progressTemplate="<h1>Loading...</h1>">
</div>

Load different pages inside same document

Following loads Flickr photos and pages through them. It shows a typical ASP.NET MVC Paging approach.

Loading Flickr Photos...

THIS IS NOT AN IFRAME
<div class="UFrame" id="TestPage" src="Flickr?index=0" >
</div>

Update 22-Apr-2012

Latest browsers do not allow form inside form. So, the main page that holds the UFrame, cannot have any form tag, if the child pages loaded inside UFrame has form tag. If the main page is an ASPX page and the UFrame'd pages are also ASPX pages, then you need to remove the form tag from the main page.

What is UFrame?

UFrame is like an IFRAME that can load and host a page (ASP.NET, PHP or regular html) inside a DIV. However, unlike IFRAME which loads the content inside a frame that has no relation with the main document, UFrame loads the content within the same document. Thus all the Javascripts, CSS on the main document applies to the loaded content. It's just like UpdatePanel with IFRAME's "src" attribute.

The above UFrame are declared like this:

<div id="UFrame1" src="/SomePage/BCD/View" >
    <p>This should get replaced with content from /SomePage/BCD/View</p>
</div>

The features of UFrame are:

Load any URL inside a DIV. It can be a php, asp.net, jsp or regular HTML page.
Just like IFRAME, you can set "src" property of DIVs and they are converted to UFrames.
Unlike IFRAME, it loads the content within the main document. So, main document's CSS and Javascripts are available to the loaded content.
It allows you to build parts of a page as multiple fully independent pages, instead of controls.
Each page is built as standalone page. You can build, test and debug each page indepedently and them put them together using UFrame.
It loads both inline and external scripts from loaded page. You can also produce different scripts during postback.
All external scripts are loaded before the body content is set. And all inline scripts are executed when both external scripts and body has been loaded.
It loads both inline and external CSS

Download Code

Download latest source code of UFrame from CodePlex: www.codeplex.com/UFrame