Combine Classic ASP and ASP.NET content
Seamlessly with Invisible Blended IFrames

by Peter A. Bromberg, Ph.D.

Peter Bromberg
"It was a bright cold day in April, and the clocks were striking thirteen." --George Orwell, "1984", first sentence

A common challenge that ASP.NET developers must face is whether to convert entire sites running under technologies such as Classic ASP to ASP.NET. This is often a huge undertaking, and often with a little judicious use of the HTML DOM and some common sense, we can "have it both ways" by creating pages with what I call "Mixed Content". We have mixed content here on eggheadcafe.com, and I'd like to share one of the techiques we have used to get the benefits and performance enhancements of the ASP.NET platform, without having to endure the pain of a wholesale conversion to .NET.



A common task that usually comes up very quickly is how to share Session State from a Classic ASP page to an ASPX .NET page and back again. I addressed a technique I developed for it in this article, and if it is of interest, you may wish to read it.

The other, and most common challenge, is how to merge ASP.NET content into Classic ASP content, and make it look like one seamless page of content, and that's what I'll address here.

I believe the easiest way to seamlessly merge ASP.NET -generated content into a Classic ASP page is by using what I call an "Invisible Blended IFrame" - an IFrame whose "src" property is the .ASPX page, and which has no borders or other visible accoutrments. With a little custom CSS, you can get this effect. Additionally, you've got to do some relatively simple client-side scripting to get your IFRAME to adjust it's height automatically when it's content is either loaded or reloaded, as in a PostBack condition. As we'll see, this is not difficult at all. So let's look at a sample pattern to handle this.

First, let's look at the skeleton code for the ASP Page:

<HTML>
<head>
<style>
p {text-align: justify;margin:5px;}
</style>
</head>
<body>
	<Basefont face="Verdana" />
	<div id=Header align="left" width=500><h3>This is a classic ASP Page</h3></div>
	<div id="all" style="width:780px;" >
		<div id="content" style="width: 500px;float:left">
		
		<h4>Content Div (ASP Page)</h4>
			<p>Curabitur tincidunt fermentum dui. Mauris felis massa, convallis et, 
facilisis ..... </P> <P>Nam enim justo, gravida a, eleifend quis, pulvinar ac, erat. Integer
quis mi at .... </P> <P>Sed nonummy, arcu at aliquam posuere, lacus lorem mollis dolor, id
tristique ..... </P> <P>Fusce at libero et purus fermentum elementum. Donec ipsum pede,
feugiat a, ... </P> <P>Quisque ullamcorper pretium quam. Proin et tortor. Aliquam
scelerisque lacinia ..... </P> </div> <div id="sidebar" style="width: 280px;float:right;"> <h4>SideBar (.Net IFrame)</h4> <iframe id="IFR" name = "IFR" src="SamplePage.aspx" width="280" marginheight=0 marginwidth=0
frameborder="0" scrolling="no" ALLOWTRANSPARENCY="TRUE" style="border:0px;"></iframe>
</div> <div id="sidebar2" style="width: 280px;float:right"> <P><b>(Sidebar 2-ASP)</b> Fusce at libero et purus fermentum elementum. Donec
ipsum pede, feugiat a, ..... </P> <P>Quisque ullamcorper pretium quam. Proin et tortor. Aliquam scelerisque
lacinia .... </P> </div> </body> </HTML>

I've highlited in red and bolded the IFRAME Declaration. You can experiment with other CSS attributes as well. This will give you an almost perfectly seamless, borderless frame for the content from your ASPX page. Now let's switch over to my ASPX page to see a couple more tricks:

	<script>
		function resize()
		{
		h = document.body.scrollHeight; 
      window.parent.document.getElementById('IFR').height = h;		
		}		
		</script>
	</HEAD>
	<body MS_POSITIONING="GridLayout" onload="resize();" topmargin="0" leftmargin ="0" rightmargin="0">
		<form id="Form1" method="post" runat="server">
			<asp:DataGrid....
		
Notice that when the document is loaded (onload) I get the scrollheigh property of the document, and then reach up from the Parent Document (The asp page) to set the height of the IFRAME to match. Also, I have topmargin and other BODY tag properties set to make my content go flush top and left, because I've got CSS attributes in the DIV tags in the ASP Page that control where the content goes.

You can take a look at a live example of the result here.

Notice that when you switch pages on the little DataGrid display (That's the Blended IFRAME), the IFRAME Automatically resizes so the regular classic ASP content just below it "snugs up" and we don't have any ugly gaps. Oh, and you "Firefart" folks -- don't sweat; it works in your favorite browser too.

Incidentally, I was just told (by a trusted source) that you cannot resize IFRAME content that comes from another domain. Actually, you can -- but you need to use dynamic "on demand" script tag injection into the page, which may possibly be the subject of another article, so -- stay tuned!

You can do a lot more with this concept, this is just "the basics" Hope it is useful to you. The downloadable Solution below is in Visual Studio 2003 for you "late starters", but you can load it right into 2005 and convert it "in place" with no issues.

Download the Visual Studio 2003 Solution accompanying this article


Peter Bromberg is a C# MVP, MCP, and .NET consultant who has worked in the banking and financial industry for 20 years. He has architected and developed web - based corporate distributed application solutions since 1995, and focuses exclusively on the .NET Platform.
Article Discussion: