Rory Hansen

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.

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.