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.aspxp> 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.
See it in action!
You can test UFrame from:
- http://labs.omaralzabir.com/UFrame2005
– Visual Studio 2005 version, .NET 2.0 implementation showing
regular ASP.NET 2.0 controls work as usual - http://labs.omaralzabir.com/UFrameMvc
– Visual Studio 2008 version shows ASP.NET MVC works fine making
UFrame an ultimate
replacement for UpdatePanel
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.aspxp> 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:
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.
You have to go to “Source Code” and retrieve the JavaScript files. There is no compiled code to be downloaded.
austinHodge
i also getting the “the state information is invalid for this page and might be corrupted” error. anyone fixed it yet ? just a normal page with uframe and a post button
Hi Omar, awesome idea.
Are u using this control on any of your production applications? I'm concerned about future browser / asp.net version compatibilities. I you are using it in a production app, I know that you will keep it up to date.
Thanks for sharing, I hope you don't think I'm dissing your project in any way, just wondering if it is going to have a great mind behind it, updating it etc. (certainly not me).
Mitch
Does UFrame support external site URL loading in a website?
I have a series of ImageButtons at the top of the page that will change the src of the div that is below these buttons. How do I change the src path when I click one of these buttons?
Thanks
I see the code you posted above, but i'm still confused about how to dynamically set the src from an asp.net page. If i set the src manually uframe works great, but from my OnLoad() function in asp.net how can i set src. Can you provide an example. It would really help me out a lot. thanks, great idea.
Hi Omar, The control is really useful, but i have one issue. When i try to post the page (Eg. Server side button click event), am getting the error “System.Web.HttpException: The state information is invalid for this page and might be corrupted”. I have downloaded the latest source code from codeplex site but still i am getting the same. I dont have any subdirectory in my website. All my aspx page reside in the root folder
Can I load external URL to UFrame ? Im really curious…
Nope.
Hi Omar,
Excellent control as compared to any other ajax control.I need your help for solving some doubts
1)Now i did n't get the values from the rich text editor(fck editor)
2)I didn't get any event triggered from the checkbox list or using List view control
3)Now the drop down will automatically post back after selecting each item(when the auto post back feature turn off)
Omar,
Ok, I tried by making a new project with same stuff and it works.
On doing some RnD using Firebug, I discovered that in my original product, in the submitForm function in UFrame.js file in this code..
(form)
.find(“input[@checked], input[@type='text'], input[@type='hidden'], input[@type='password'], option[@selected], textarea”)
.filter(“:enabled”)
.each(function() {
params[ this.name || this.id || this.parentNode.name || this.parentNode.id ] = this.value;
});
the code doesnt go in the each function. I mean the each function returns 0 elements and thus __VIEWSTATE and __EVENTVALIDATION are not added while submit and thus postback is false.
Any ideas?
Hey Omar,
Thanks for this wonderful script. Its a boon for jQuery people 🙂
I have been able to make it work nice, but only one little problem. I have incorporated the script in my project and it works. I have a page called Default.aspx which has a div which loads SomeData.aspx
SomeData page has a GridView and a Button. On the button click it fires another query.
Now in the code-behind, I have a condition which checks for Page.IsPostBack and fires the appropriate query. Thats where I am facing the problem. The IsPostBack property is always false. What could be the reason?
Any ideas?
Thanks.
Since UFRAME makes a xmlhttp call to the page hosted inside it, it's not a post back. It does not do a HTTP POST.
You might want to tweak the xmlhttp call to make it a POST and add necessary form variables to indicate ASP.NET that it's a postback.
Thank you omar for such a speedy response.
I understand now, but in the example you have provided, you are using Page.IsPostBack in the code-behind, how is it working then?
Good point, now that I recall, it does handle postback. Not sure why it's not working for you. Can you capture what form variables get posted back to the page using Fiddler?
Hey Omar,
I figured it out. Its issue with jQuery. If I use 1.2.3 it works but not with 1.3.2
Will see what changes were made in the new version. If you could point me, then it would be great.
Thank you.
hey omar,
i have got a few of queries ..
1>Can on one single click in a single uframe ,can i load two different pages in two other uframes.
2>how do i load a page dynamically as in through programming in asp.net ..tried it doing the iframe way …it dint work out …
n yeah thanks a lot for this wonderful thing ..
Hi Omar,
I have been using uframe on some projects and it works great but i have to upgrade to jquery 1.3.2. How can i get uframe to work with jquery 1.3.2.
I think i figured out how to make Uframe work for JQuery 1.3.2: Well this worked for me:
change line 513
('div[@src]',document).each(function() to
('div[src]',document).each(function()
hey omar,
i have got a few of queries ..
1>Can on one single click in a single uframe ,can i load two different pages in two other uframes.
2>how do i load a page dynamically as in through programming in asp.net ..tried it doing the iframe way …it dint work out …
n yeah thanks a lot for this wonderful thing ..
Hi
Silly question but does it only works on asp as I tried it just in normal html page with an src to a local page on my computer and nothing gets loaded.
Can it be altered to work with html?
Thank you.
It will work on html as well. It’s a pure javascript based library. No tie with asp.net. Please use a javascript debugger to see if there’s any JS error.
Hey Omar
Great plugin. I have a problem with server side asp.net controls though. Whenever i do a postback, the uframe gets cleared/is empty???
Hi
Great tool! Just a very important question:
To use this in a portal like application similar to dropthings, I would like to redirect a div to another aspx page. Thus dynamically changing the div’s src. Is this possible and what are the drawbacks / pitfalls if any?
I would like download and try the uframe, the link seeems to be broken.
http://labs.omaralzabir.com/UFrameMvc
I can’t get this control to work at all. I’ve got the three javascript files loaded:
I’m trying to get the following simple execution to work with no luck:
This should get replaced with content from Somepage.aspx
Is there something wrong with my syntax? what am I missing?
Uframe is really awesome tool it works well and good with IE..but it in not working with Firefox and chrome..Do I want to make some changes to work with Chrome and Firefox?
I am trying to use this tool…. But when I click on button of loaded page in uframe it’s open new page not the postback with in uframe.
any suggestion ??