Software Developer's Resources

How to Write a Custom Div Server Control in ASP.NET

This article describes how to write an ASP.NET server control to programmatically generate the DIV tag.

Why do we need a custom ASP.NET Div server control? Web graphic designers frequently use the Div tag for formatting and positioning elements on a web page. Web developers who integrate web designs must generate the Div tag Html in the Html output stream. The ASP.NET framework does not include an HTML control to generate the Div tag html. The solution is to write a custom ASP.NET server control to generate the Div Html.

Create Control

The first step is to create a new class and derive from System.Web.UI.Controls:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace SPCG.Web.UI.HtmlControls
{
    public class SPCG_Div : System.Web.UI.Control
    {
    }
}

Properties

We want the user to be able to set the values of several Div tag attributes. To do this we create several properties in the class.

The properties save their values in ViewState to ensure the values persist across the page-load cycle.

Here are the properties:

• CssClass

  Sets the "class" attribute of the Div tag.

• Text

  Sets the inner text of the Div tag.

• Height

  Sets the "height" attribute of the Div tag.

• Width

  Sets the "width" attribute of the Div tag.

RenderControl Method

Once, the user has set the properties we need to generate the Div tag Html and send to the Html output stream. We write a RenderControl method to perform these actions. The custom RenderControl does these steps:

1. Creates an instance of HtmlGenericControl.

   We set the tag name to "div". Should the control be rendered now it will appear like:

       <div></div>
       

2. Add attributes for each property to our Html object if the caller set the CssClass, Height, or Width properties
3. Set the InnerText if the caller set the Text property.
4. Add the Html object to the set of controls.
5. Call the base class RenderControl to render our control.

public override void RenderControl(System.Web.UI.HtmlTextWriter writer)
{
    HtmlGenericControl DivObj;

    DivObj = new HtmlGenericControl("div");          
    if( CssClass.Length > 0 ) DivObj.Attributes.Add("class", CssClass);
    if( Height > 0 ) DivObj.Attributes.Add("height", "" + Height);
    if( Width > 0 ) DivObj.Attributes.Add("width", "" + Width);
    if (Text.Length > 0) DivObj.InnerText = Text;
    Controls.Add(DivObj);
    base.RenderControl(writer); 	                 
}

Using the Control

Add a Register directive at the beginning of your web page:

<%@ Register Assembly="SPCG_Library"
Namespace="SPCG.Web.UI.HtmlControls" TagPrefix="SPCG" %>

Add a call to the custom DIV control in the web page where you want the Div tag to be generated:

<SPCG:SPCG_Div ID="Example" CssClass="Code" Height="10" Text="Inner Text" Width="20" runat="server">
</SPCG:SPCG_Div>

I've embedded a call to the Div control in the web page. To the see the generated Html view source in your browser.

Complete Code

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace SPCG.Web.UI.HtmlControls
{
    public class SPCG_Div : System.Web.UI.Control
    {
        private string m_KeyCssClass = "CssClass";
        private string m_KeyDivId = "DivId";
        private string m_KeyHeight = "Height";
        private string m_KeyText = "Text";
        private string m_KeyWidth = "Width";

        public SPCG_Div()
        {          
        }

        public string CssClass
        {
            get
            {
                if ((object)ViewState[m_KeyCssClass] == null) return "";
                return (string)ViewState[m_KeyCssClass];
            }

            set { ViewState[m_KeyCssClass] = value; }
        }

        public string DivId
        {
            get
            {
                if ((object)ViewState[m_KeyDivId] == null) return "";
                return (string)ViewState[m_KeyDivId];
            }

            set { ViewState[m_KeyDivId] = value; }
        }

        public int Height
        {
            get
            {
                if ((object)ViewState[m_KeyHeight] == null) return 0;
                return (int)ViewState[m_KeyHeight];
            }

            set { ViewState[m_KeyHeight] = value; }
        } 

        public string Text
        {
            get
            {
                if ((object)ViewState[m_KeyText] == null) return "";
                return (string)ViewState[m_KeyText];
            }

            set { ViewState[m_KeyText] = value; }
        }

        public int Width
        {
            get
            {
                if ((object)ViewState[m_KeyWidth] == null) return 0;
                return (int)ViewState[m_KeyWidth];
            }

            set { ViewState[m_KeyWidth] = value; }
        } 

        public override void RenderControl(System.Web.UI.HtmlTextWriter writer)
        {
            HtmlGenericControl DivObj;

            DivObj = new HtmlGenericControl("div");          
            if( CssClass.Length > 0 ) DivObj.Attributes.Add("class", CssClass);
            if( Height > 0 ) DivObj.Attributes.Add("height", "" + Height);
            if( Width > 0 ) DivObj.Attributes.Add("width", "" + Width);
            if (Text.Length > 0) DivObj.InnerText = Text;
            Controls.Add(DivObj);
            base.RenderControl(writer); 	                 
        }
    }
}