Omar AL Zabir blog on ASP.NET Ajax and .NET 3.5

Working hard to enrich millions of peoples' lives

Sponsors

UFrame: goodness of UpdatePanel and IFRAME combined

UFrame combines the goodness of UpdatePanel and IFRAME in a cross browser and cross platform solution. It allows a DIV to behave like an IFRAME loading content from any page either static or dynamic. It can load pages having both inline and external Javascript and CSS, just like an IFRAME. But unlike IFRAME, it loads the content within the main document and you can put any number of UFrame on your page without slowing down the browser. It supports ASP.NET postback nicely and you can have DataGrid or any other complex ASP.NET control within a UFrame. UFrame works perfectly with ASP.NET MVC making it an replacement for UpdatePanel. Best of all, UFrame is implemented 100% in Javascript making it a cross platform solution. As a result, you can use UFrame on ASP.NET, PHP, JSP or any other platform. 

<div class="UFrame" id="UFrame1" src="SomePage.aspx?ID=UFrame1" >
  <p>This should get replaced with content from Somepage.aspx</p>
</div>

Response from SomePage.aspx is rendered directly inside the UFrame. Here you see two UFrame's are used to load the same SomePage.aspx as if they are loaded inside IFRAME. Another UFrame is used to load AnotherPage.aspx that shows photos from Flickr.

image

See it in action!

You can test UFrame from:

What is UFrame?

UFrame can load and host a page (ASP.NET, PHP or regular html) inside a DIV. Unlike IFRAME which loads the content inside a browser 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 flows through the loaded content. It's just like UpdatePanel with IFRAME's src attribute.

The above UFrames are declared like this:

<div id="UFrame1" src="SomePage.aspx" >
    <p>This should get replaced with content from Somepage.aspx</p>
</div>

The features of UFrame are:

  • You can build regular ASP.NET/PHP/JSP/HTML page and make them behave as if they are fully AJAX enabled! Simple regular postback will work as if it's an UpdatePanel, or simple hyperlinks will behave as if content is being loaded using AJAX.
  • 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 when UFrame library loads.
  • 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.
  • Each page is built as standalone page. You can build, test and debug each small page independently and put them together on the main page using UFrames.
  • It loads and executes both inline and external scripts from loaded page. You can also render different scripts during UFrame 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. This way the inline scripts execute when the body content is already available.
  • It loads both inline and external CSS.
  • It handles duplicates nicely. It does not load the same external Javascript or CSS twice.

Download the code

You can download latest version of UFrame along with the VS 2005 and VS 2008 (MVC) example projects from CodePlex:

www.codeplex.com/uframe

Please go to the "Source Code" tab for the latest version. You are invited to join the project and improve it or fix bugs.

Read the article about UFrame

I have published an article about UFrame at CodeProject:

http://www.codeproject.com/KB/aspnet/uframe.aspx

The article explains in details how the UFrame is built. Be prepared for a big dose of Javascript code.

If you find UFrame or the article useful, please vote for me at CodeProject.

kick it on DotNetKicks.com
Posted: May 25 2008, 01:55 AM by oazabir | with 8 comment(s)
Filed under: , , , ,

Comments

rachitp said:

Looks pretty cool.

I've used SubModal (sublog.subimage.com/.../subModal)  to do the similar things in the past. Naturally, UFrame does a lot of different things as well. Keep it up!

# May 24, 2008 5:45 PM

mehfuzh said:

Ok, This is really nice! At this point i want to ask, how it will affect the browser performance, if there are 100 of UFrames on the page. So far i can see, UFrame.js does the complex task for finding Divs with src attribute and parsing its content out to make it behave like an updatePanel.

# May 27, 2008 2:09 PM

oazabir said:

Performance will be better than having 100 IFRAMEs on the page.

Use of IFRAME/UFRAME/UpdatePanel needs careful planning as you need to use least amount of these but provide the most value to the user. So, you should always try to provide as much responsive UI as possible with least amount of I/UFrame. I will be surprised to see a real application having more than 20 UFrame offering real value to user.

One such extreme example is Pageflakes.com, where each flake (widget) is already a UFrame. So, we have nice pagecasts like www.pageflakes.com/omar where there are many flakes, which are all individual UFrames (even more complex).

# May 27, 2008 2:19 PM

Wilmot Wustfeltt said:

I am getting a javascript error:

Erro: $("form", container).attr("UFrameID", config.id) is undefined

File: localhost/.../UFrame.js

Linha: 300

What i am doing wrong?

# May 27, 2008 8:36 PM

bduenskie said:

Can the uframe call a page located on another domain?  For instance src="http://www.yahoo.com"?

# May 28, 2008 2:32 PM

oazabir said:

UFrame cannot load pages from external domain unless a proxy is used. So, you will need a content proxy which will fetch content from external domain.

I have an earlier blog post about building such a content proxy.

When you have such a proxy, you just point UFrame to the proxy URL:

<div src="Proxy.ashx?url=http://www.google.com">">http://www.google.com">

...

This will load the initial content. However, form postback will surely fail because a cross domain form post via XMLHTTP is not allowed. So, you will need a proxy to do so.

<div src="Proxy.ashx?url=http://www.google.com" postTo="Proxy.ashx?url=http://www.google.com">">http://www.google.com">

...

</div>

# May 29, 2008 3:02 AM

oazabir said:

Here's the proxy article:

www.codeproject.com/.../ajaxproxy.aspx

In above comment, Proxy.ashx is a fictious proxy that does not job for fetching content from external domain and making HTTP POST to external domain.

# May 29, 2008 3:05 AM

Romi said:

Hi Omar,

Very fantastic your work. I love your PageFlakes.

Could you explain if I can load one usercontrol inside the UFrame, and how to. Same for one Compilled Usercontrol and embeded ascx.? Could you help me with exemples.I'm not dev. Regards  

# June 11, 2008 11:37 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)