Navigation

Search

Categories

On this page

Building Custom Controls

Archive

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

RSS 2.0 | Atom 1.0 | CDF

Send mail to the author(s) E-mail

Total Posts: 449
This Year: 11
This Month: 1
This Week: 0
Comments: 18

Sign In
Pick a theme:

# Friday, September 26, 2008
Friday, September 26, 2008 7:44:25 PM (GMT Daylight Time, UTC+01:00) ( )


The two basic types of controls are fully rendered and composite controls.  You must start from scratch to build a fully rendered control and a composite control builds upon existing controls.

  • System.Web.UI.Control
  • System.Web.UI.Control.WebControls.WebControl
  • System.Web.UI.Control.WebControls.CompositeControl

For example, the CompositeControl class inherits from the WebControl class, which inherits from the Control class. Each of these classes add additional functionality. The base class for all controls in the ASP.NET framework is the System.Web.UI.Control class. Every control ultimately derives from this control. The System.Web.UI.Control.UI.WebControls.CompositeControl class should be used as the base class for any composite control.

All Web controls inherit from the base System.Web.UI.WebControls.WebControl class. 

This is an example of a fully rendered control.  When creating these you take on the responsibility of specifying all of the HTML content that the control renders to the browser. This example derives from the base Control class

** FullyRenderedControl.vb **

Imports System.Web.UI
 
Namespace myControls
    Public Class FullyRenderedControl
     Inherits Control
        Private _Text As String
 
        Public Property Text() As String
            Get 
                 Return _Text
            End Get
            Set (ByVal Value As String) 
                 _Text = value
            End Set
        End Property
 
        Protected Overrides  Sub Render(ByVal writer As HtmlTextWriter)
            writer.Write(_Text)
        End Sub
    End Class
End Namespace

** ShowFullyRenderedControl.aspx ** and demo

<%@ Page Language="VB" %>
<%@ Register TagPrefix="custom" Namespace="myControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Show Fully Rendered Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <custom:FullyRenderedControl
        ID="FullyRenderedControl1"
        Text="Hello World!" 
        runat="Server" />
    
    </div>
    </form>
</body>
</html>

In the next example, rather than inherit from the base Control class, you can create a fully rendered control by inheriting a new control from the base WebControl class. When inheriting from the WebControl class, you override the RenderContents() method instead of the Render() method.  Notice that the BackColor, BorderStyle, and Font properties are set because it derives from the base WebControl class.

** FullyRenderedWebControl.vb **

Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace myControls
    Public Class FullyRenderedWebControl
        Inherits WebControl

        Private _Text As String

        Public Property Text() As String
            Get
                Return _Text
            End Get
            Set(ByVal Value As String)
                _Text = value
            End Set
        End Property

        Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
            writer.Write(_Text)
        End Sub

    End Class
End Namespace

** ShowFullyRenderedWebControl.aspx ** and demo

<%@ Page Language="VB" %>
<%@ Register TagPrefix="custom" Namespace="myControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Show Fully Rendered WebControl</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <custom:FullyRenderedWebControl
        ID="FullyrenderedWebControl1"
        Text="Hello World"
        BackColor="Yellow"
        BorderStyle="Dashed" 
        Font-Size="32px"   
        Runat="Server" />
    
    </div>
    </form>
</body>
</html>

A WebControl, unlike a control, renders an enclosing <span> tag by default.

<span id="FullyrenderedWebControl1" style="display:inline-block;background-color:Yellow;border-style:Dashed;font-size:32px;">Hello World</span>

You can specify a different tag by overriding the WebControl's TagKey property. This control renders its contents within an HTML <div> tag.

** Glow.vb **

Imports System.Web.UI
Imports System.Web.UI.WebControls 

Namespace myControls
    Public Class Glow
        Inherits WebControl
        Private _Text As String 

        Public Property Text() As String
            Get
                Return _Text
            End Get
            Set(ByVal Value As String)
                _Text = value
            End Set
        End Property 

        Protected Overrides ReadOnly Property TagKey() As HtmlTextWriterTag
            Get
                Return HtmlTextWriterTag.Div
            End Get
        End Property 

        Protected Overrides Sub AddAttributesToRender(ByVal writer As HtmlTextWriter)
            writer.AddStyleAttribute(HtmlTextWriterStyle.Filter, "glow(Color=#ffd700,Strength=10)")
            MyBase.AddAttributesToRender(writer)
        End Sub 

        Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
            writer.Write(_Text)
        End Sub 

        Public Sub New()
            Me.Width = Unit.Parse("500px")
        End Sub 

    End Class
End Namespace

** ShowGlowWebControl.aspx ** and demo
<%@ Page Language="VB" %>
<%@ Register TagPrefix="custom" Namespace="myControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Show Fully Rendered WebControl</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
    <custom:Glow
        ID="FullyGlowControl"
        Text="Hello World"
        Font-Size="32px"   
        Runat="Server" />
    
    </div>
    </form>
</body>
</html>
Comments [0] | | #