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.