Aug
22

Using IFRAME in ASP.NET

VN:F [1.9.11_1134]
Rating: 3.5/5 (11 votes cast)

So, I’ve basically finished coding the “Google Suggest”-like web user control I was writing for the company I’m doing a co-op work term at. I’m now in the process of integrating it into an existing textbox control that they’ve developed, and that should be finished soon.

One part of the web user control is an iframe, which is used to counteract the much-documented z-index and select box problem in Internet Explorer. By placing the iframe directly below the div that the Google Suggest results are displayed in (as in one z-index less than the z-index of the results div), we can avoid this problem all-together.

NOTE FROM THE AUTHOR, RORY HANSEN
Have you found this post helpful?
If so, I'd appreciate if you could indicate so by pressing the Google Plus button below.

But, to make the web user control as reusable as possible, I needed to be able to name this iframe uniquely, incase there are multiple instances of the control on the same aspx page. To do this, I needed to be able to specify the name of the iframe when it is rendered (or guarantee that it would be automagically named uniquely), and I figured out I could accomplish this by using two standard controls: PlaceHolder and HtmlGenericControl.

First, I create the HtmlGenericControl object that will eventually render as an iframe and specify whatever attributes this iframe will have:

// Create new iframe control
HtmlGenericControl searchFrame = new HtmlGenericControl("iframe");
searchFrame.ID = "searchFrame";
searchFrame.Attributes.Add("class", "searchFrame");
searchFrame.Attributes.Add("frameborder", "0");

Then, I can add it to the PlaceHolder’s controls collection:

// Add it to the Controls collection of the PlaceHolder control
searchHolder.Controls.Add(searchFrame);

Finally, I add the PlaceHolder control into my ascx document where I’d like the iframe to eventually be:

<div class="searchContainer">
   <asp:PlaceHolder id="searchHolder" runat="server" />
</div>

Now, an iframe will appear in the outputted HTML code where the placeholder once was. But more than that, since I used an ASP.NET control to actually create the iframe, the iframe will be named uniquely. We even know what it’ll be called: this.UniqueID + “_searchFrame”. This is beneficial to me since I can now reference that iframe by name throughout my JavaScript code and show it or hide it when necessary.

VN:F [1.9.11_1134]
Rating: 3.5/5 (11 votes cast)
Using IFRAME in ASP.NET, 3.5 out of 5 based on 11 ratings

Related posts:

  1. End of Term Co-op Project: Google Suggest-like Web Control
  2. Implementing Search in Ruby on Rails

August 22, 2005   //   .net, c#, web development   //   9 Comments   //  

9 Comments to “Using IFRAME in ASP.NET”

  • August 23, 2005 at 8:06 pm
    Scott says:

    One small piece of advice. If you are going to use this on a secure page (using https), you’ll have to set the src of the iframe to something on the site, otherwise you get a warning (at least in IE) telling you that the page contains secure and non-secure items.

    I’ve seen people create a blank HTML page in the site and set the src to that. I set the src = “javascript:;”. That takes care of the warning.

    I think, if I remember correctly, if you have inherited your user control from either a User Control or a Web Control, you can implement the marker interface INamingContainer and multiple instances of your controls will have a unique name. I’m not certain if you can do that with a user control, but I can’t think of any logical reason why you couldn’t. But when has development ever been logical? :)

  • August 25, 2005 at 7:50 pm
    Rory says:

    Thanks for mentioning that Scott! I actually did read somewhere else that I could use src=”javascript:;” so that under https the warning would not appear and did set it to that for the iframe. Plus, I think setting it to that nonsense javascript will also save a request to the webserver.

  • August 29, 2006 at 6:35 am
    Larry says:

    Awesome!
    I was having a problem with Atlas and an iFrame. Building it dynamically was the solution.
    Great post!

  • May 10, 2009 at 1:30 pm
    Manish Dalal says:

    Great!

    I was wondering how to display an image in iframe, the problem was that the image was dynamic and the name of the image keep on changing. Also, I needed to provide a save button that can launch the ‘Save As’ dialog (in IE only). The code that I had always show popup, but I didn’t want that, so I googled for it. I found a solution to put the image reference in an Iframe, so I did that.

    Then I wanted to change the src of the iframe dynamically, how to do that, while reading your post around ‘….accomplish this by using two standard controls: PlaceHolder and HtmlGenericControl…..’ I got the idea to generate the iframe text dynamically and set that text as the literal control object’s text value.

    And then…………. it worked!

    Thanks for the post and the guidance.

  • February 23, 2010 at 2:04 am
    sukh veer says:

    thanks for the post it helped me a lot

  • September 19, 2010 at 3:44 am
    Trisha says:

    I got a complete IFrame Control for ASP.NET from SpiceLogic. It is free and comes with Source Code. Here is the link :

    http://blog.spicelogic.com/post/ASP-NET-IFrame-Control.aspx

  • March 22, 2011 at 10:29 am
    Lawrence says:

    great post, Rory! I wanted to ask you if you or anyone else has experience setting up a browser within an iframe which passes the page url to an input box to be saved as a bookmark on a website. I tried doing something but can’t seem to be able to pass the page url that I am visiting within the iframe to update. Also, is there a trick to copy and paste a https url to an input box to be display within the iframe? When I try doing so, it opens up a new window with just the https page, remove the current location where i was at.

    Thanks!

  • June 21, 2011 at 2:23 am
    K says:

    Thanks a lot Rory, you made my day :)

  • October 16, 2011 at 10:29 am
    Totem says:

    Thanks a lot! You make learning very exciting.

Post comment