Friday, March 26, 2010

Loading pages in IFRAME dynamically from codebehind - ASP.NET

Written By : ranganh

Most of us who develop Web Applications would have used an IFRAME during some stage of our lives. IFRAME's are an easy way by which you can embed another page within your original page such that you can show some important information like Stock position/Weather from another site without worrying about the changes happening to that site and updating the same. The Frame can also be used to show another page from your own application.
ASP.NET also provides the option to have an IFRAME in our ASPX Pages. It can be with/without the "runat=server" attribute and does serve the purpose of embedding the page. The source for the frame can be set as follows:-

<IFRAME id="frame1" src="SourcePage.extension / URL of the external Site" scrolling="auto">
</IFRAME>


However, in practical scenarios, we may want to load the page dynamically. In other words, we may want to specify the "src" attribute (the page which we want to show), dynamically. There is no straight forward way to do that and even if you add a "runat=server" attribute to it (though required in the work around provided below), you cannot access the "src" property directly.
The workaround to do that is as follows:-
1. Specify the "runat=server" attribute as follows in the ASPX Page:-

<IFRAME id="frame1" scrolling="auto" runat="server">
</IFRAME>

2. In the codebehind, you may need to declare a HtmlGenericControl in the control declarations section as follows:-

C#

protected System.Web.UI.HtmlControls.HtmlGenericControl frame1; (not required if working with ASP.NET  2.0, 3.5 i.e. Visual Studio 2005, 2008)

VB.NET

Protected WithEvents frame1 As System.Web.UI.HtmlControls.HtmlGenericControl(not required if working with ASP.NET  2.0, 3.5 i.e. Visual Studio 2005, 2008)

3. Then, you need to do a findcontrol to identify the control on the page and typecast it as follows:-

C#
HtmlControl frame1 = (HtmlControl)this.FindControl("frame1"); (not required if working with ASP.NET  2.0, 3.5 i.e. Visual Studio 2005, 2008)

VB.NET

Dim frame1 As HtmlControl = CType(Me.FindControl("frame1"), HtmlControl) (not required if working with ASP.NET  2.0, 3.5 i.e. Visual Studio 2005, 2008)
Note: You can have different name for the Generic Control you define in the code behind, but for ease I keep both the same. The "frame1" referred in Find Control is the ID as declared in the ASPX Page.
4. Thereafter, you will be able to access the src property as follows:-

C#
frame1.Attributes["src"] = "http://www.live.com" ;


VB.NET

frame1.Attributes("src") = "http://www.live.com" ;

NOTE: Thanks PhOeNiX for providing the VB.NET equivalent.  I have added the same now.

As you can see though I have hard-coded the URL you can assign it dynamically based on a condition or any other business logic.
This serves the purpose of dynamically loading the page in the IFRAME.

A related article on Triggering an event in the Parent Page from within Page inside IFRAME

Cheers !!!