Wrap the IFRAME Tag into a ASP.NET User Control

Introduced with theHTML 4.0 standard, the <iframe> tag represents an inline page frame that points to a local or remote URL. The <iframe> tag can be used to incorporate external or dynamically generated contents to your page. In ASP.NET , most HTML tags have a made-to-measure HTML server control. For example, the <input type=text> element maps to the HtmlInputText control. To transform a markup literal into a server control, you just add the runat=server attribute:


<input type=text runat=server name=Input>

You can add the runat=server attribute to any valid HTML tag, including custom and browser-specific tags. Some valid HTML tags have a specific server counterpart; some are rendered through a generic HTML server control named HtmlGenericControl. Specific HTML server controls have a programming interface that matches the set of attributes of the particular tag. The generic HTML server control features only the Attributes collection and the InnerText and InnerHTML properties. When instantiated on the server, the <iframe> tag is represented with a HtmlGenericControl object.


<iframe runat=server name=Frame>

You can programmatically set any visual attributes on the inline frame, and set the target URL, using the Attributes collection, as shown below.

Frame.Attributes("src") = url
Frame.Attributes("style") = "border:solid 1px;"

Although functional, this programming approach is not very elegant indeed. A better approach entails encapsulating the <iframe> server tag into a user control.

<%@ Control Language="VB" ClassName="IFrame" %> 

<script runat="server">
Public Property Src As String
     Get
          Return _theFrame.Attributes("src")
     End Get
     Set(ByVal Value As String)
          _theFrame.Attributes("src") = Value
     End Set
End Property 

Public Sub NavigateUrl(ByVal url As String)
     Src = url
End Sub
</script> 

<iframe runat="server" id="_theFrame"
        width=100% height="300px" />

The layout of the user control contains a server-side <iframe> tag that is a protected resource invisible to the outside world. The object model you build on top of the user control lets you decide which properties to expose, their names and syntax. In the above example, you can set the URL using a custom NavigateUrl method or the Src property. The following sample page demonstrates the usage of the user control.

<%@ Page Language="vb" %>
<%@ Register TagPrefix="dino" TagName="IFrame" Src="iframe.ascx" %> 

<script runat="server">
Public Sub OnGo(sender As Object, e As EventArgs)
     Iframe1.NavigateUrl(TextBox1.Text)
End Sub
</script> 

<HTML>
<body>
<form runat="server">
     <dino:iframe id="Iframe1" runat="server"
        src="http://www.vb2themax.com" />
     <br>
     <asp:TextBox id="Url" runat="server">
        http://msdn.microsoft.com
     </asp:TextBox>
     <asp:Button runat="server" Text="Go" OnClick="OnGo" />
</form>
</body>
</HTML>

Comments

Plain text