Click here to Skip to main content
11,705,473 members (60,771 online)
Click here to Skip to main content

ASP.NET Ajax Controls to Simulate IFrame

, 8 Nov 2009 CPOL 30.6K 1.9K 43
Rate this:
Please Sign up or sign in to vote.
An Ajax control to simulate IFrame. It works like Microsoft MSDN Library site.


Sometimes we use the <IFrame> tag to design the frame page. However, the data exchange between each page will become very difficult to handle. Or, once the structure of frame changes to a normal page, a lot of work needs to be carried out.

Sure I developed an Ajax control to simulate <IFrame>. It works like the Microsoft MSDN Library site.

Introducing the PartialHyperLink Control

APXExt library includes two Ajax controls:

  • ResizableArea - simulates IFrame
  • Accordion - allows you to provide multiple panes and display them one at a time

APXExt depends on Microsoft System.Web.Externsions.dll and free version Symber.Web.dll.

If needed, you can download for free:

Using the Code

To use the control, simply reference the "Symber.Web.APX.dll" file into your web project.

Next, register the control on each .ASPX page you want to use it on, by writing the following line at the top of the page:

<%@ Register TagPrefix="apX" Namespace="Symber.Web.APX" Assembly="Symber.Web.APX" %>

Using APXResizableAreaBehavior, you can create the following code:

<asp:Panel ID="ra" runat="server" CssClass="resizableArea">
  <asp:Panel ID="raLeft" runat="server" CssClass="leftSection">
  <asp:Panel ID="raSplitter" runat="server" CssClass="splitter">
	<div class="grippy"></div></asp:Panel>
  <asp:Panel ID="raRight" runat="server" CssClass="rightSection">
  <apx:APXResizableAreaBehavior id="raBehavior" runat="server"
    CookiePath="/" />

Using APXAccordionBehavior, you can create the following code:

<apX:APXAccordion ID="accordion" runat="server"
    <apX:APXAccordionPane ID="accordionPane1" runat="server">
      <Header><div class="inner">
	<a href="" class="accordionLink">Title1</a></div></Header>
    <apX:APXAccordionPane ID="accordionPane2" runat="server">
      <Header><div class="inner">
	<a href="" class="accordionLink">Title2</a></div></Header>

That's all!

I've included a small example project to demonstrate how to use the control.


Next, we can use the virtual_page and page_layout techniques to achieve each page. The following content is all based on Free Version. About How to create project, you can read "/Toturials/Create apennead application.htm" in the sample code.

Step 1 - Create Four .ascx Controls


Step 2 - Add Modules Information into web.config

    <add uri="url:~/Modules/Msdn.ascx" name="Msdn Library"/>
    <add uri="url:~/Modules/Feature.ascx" name="Feature Spotlight"/>
    <Page name="email*">
      <add uri="url:~/Modules/Email/Fly.ascx" name="System Requirements"/>
      <add uri="url:~/Modules/Email/Overview.ascx" name="Overview"/>

Step 3 - Settings UrlRemapping in web.config.strong

  <add url="^~/(\w+)/(\w+)/(\w+).aspx?$" 
	mappedUrl="~/Default.aspx?c=$1&f=$2&a=$3" isRegularExpress="true"/>

Step 4 - Layout Every Page

Run application. Click "login" LinkButton to login application with "designer" user.

And right click on the browser pages, show context menu to layout pages.


We show you the layout of the "home page" as follows:


And show you the layout of "~/Email/Inbox/Default.aspx" as follows:



I have included my SqlServer .mdf file of this demo in source code. You can use an additional database.

Or you read "/Totutials/Create application.htm" to learn How to create and deploy project.


  • 8th November, 2009: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Leo Caan
Engineer Term
China China
No Biography provided

You may also be interested in...

Comments and Discussions

Generalmsg error Pin
swadref15-Jul-10 2:11
memberswadref15-Jul-10 2:11 
GeneralServer Error in '/FlashRotator' Application. Pin
diiaoxx26-Jan-10 0:33
memberdiiaoxx26-Jan-10 0:33 
GeneralVery nice control but Pin
sonyatan11-Nov-09 17:19
membersonyatan11-Nov-09 17:19 
GeneralRe: Very nice control but Pin
Leo Caan12-Nov-09 5:32
memberLeo Caan12-Nov-09 5:32 
QuestionCompilation Error for Demo Pin
hobitton9-Nov-09 3:37
memberhobitton9-Nov-09 3:37 
I tried using your demo, but I get a compilation error related to SQL. What do I need to do to use the MDF file you provided with the download? here is the error message UI get in the file Business.apgen:

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server)


hobbiton Smile | :)

AnswerRe: Compilation Error for Demo [modified] Pin
Leo Caan9-Nov-09 4:53
memberLeo Caan9-Nov-09 4:53 
GeneralRe: Compilation Error for Demo Pin
hobitton9-Nov-09 6:58
memberhobitton9-Nov-09 6:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 8 Nov 2009
Article Copyright 2009 by Leo Caan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid