Rendering content using custom server controls in ASP.Net

I’ve got a few Web sites, but one thing I’m not is a Web designer. I typically find a good thing and stick with it. One of those is what I call content panels.

A content panel (in my world) is an area of content on a Web page that is not part of the page template – that is, it isn’t part of the header, footer, or navigation. It allows you to divide your main content region of a Web page into logical blocks. Sounds like a <DIV> tag, doesn’t it? Well, in many respects, it is. It’s actually a <DIV> tag on steroids.

Consider the following:

This is a plain div tag.
This is a div tag with some style.

A <DIV> tag encloses content, but adds no specific style or functionality on its own. A content panel encloses content and adds a specific style and functionality to it.

For an example of my content panels in action, check out EQ2Craft. Notice how the sections in the main body have similar style, layout, and functionality. They’re all created by the same server control: ContentPanel.

The ContentPanel control supports specific functionality:

  • Select one of three colors as defined in a separate stylesheet.
  • Set the title text, or hide the title bar entirely.
  • Turn the expand/collapse feature on or off.
  • Turn the content frame on or off.

All of these are set using public properties:

  • Title (string): Get or set the title for the content panel.
  • ShowTitle (bool): Get or set a flag which turns the rendering of the title bar on and off.
  • ShowFrame (bool): Get or set a flag which turns the rendering of the frame on and off.
  • Collapseable (bool): Get or set a flag which turns the expand/collapse widget on and off.
  • Color (ContentPanelColor): Get or set the color, based on the ContentPanelColor enum, which allows three values: Primary, Secondary, and Tertiary. Each of these corresponds to styles which must exist in your stylesheet:
    • colorPanelTitle (as in PrimaryPanelTitle, SecondaryPanelTitle, and TertiaryPanelTitle) reflects the style of the title bar.
    • colorPanelContent (as in PrimaryPanelContent, SecondaryPanelContent, and TertiaryPanelContent) reflects the style of the content area.

The code for my generic ContentPanel class follows:

    public enum ContentPanelColor
    {
        Primary,
        Secondary,
        Tertiary
    }

    public class ContentPanel : Control
    {
        private string title;
        private bool showTitle;
        private bool showFrame;
        private bool collapseable;
        private ContentPanelColor color;

        public string Title
        {
            get { return title; }
            set { title = value; }
        }
        public bool ShowTitle
        {
            get { return showTitle; }
            set { showTitle = value; }
        }
        public bool ShowFrame
        {
            get { return showFrame; }
            set { showFrame = value; }
        }
        public bool Collapseable
        {
            get { return collapseable; }
            set { collapseable = value; }
        }
        public ContentPanelColor Color
        {
            get { return color; }
            set { color = value; }
        }

        public ContentPanel()
        {
            title = "";
            showTitle = true;
            showFrame = true;
            collapseable = true;
        }

        protected override void OnLoad(EventArgs e)
        {
            Literal startContentDiv = new Literal();
            Literal endContentDiv = new Literal();

            this.Controls.AddAt( 0, startContentDiv );
            this.Controls.Add( endContentDiv );

            startContentDiv.Text = "<div class=\"ContentPanelBody\" id=\"" + startContentDiv.ClientID + "\">";
            endContentDiv.Text = "</div>";

            if ( showFrame )
            {
                Literal startFrameDiv = new Literal();
                Literal endFrameDiv = new Literal();
                startFrameDiv.Text = "<div class=\"" + color.ToString().ToLower() + "PanelContent\">";
                endFrameDiv.Text = "</div>";
               
                this.Controls.AddAt( 0, startFrameDiv );
                this.Controls.Add( endFrameDiv );
            }

            if ( showTitle )
            {
                HtmlGenericControl titleDiv = new HtmlGenericControl( "div" );
                titleDiv.Attributes["class"] = color.ToString().ToLower() + "PanelTitle";

                HtmlImage ecImg = null;

                if ( collapseable )
                {
                    HtmlGenericControl ecDiv = new HtmlGenericControl( "div" );
                    ecDiv.Attributes["style"] = "float:right;";

                    ecImg = new HtmlImage();
                    ecImg.ID = "";
                    ecImg.Src = "~/Images/Collapseable.gif";
                    ecImg.Alt = "Expand/Collapse";
                    ecImg.Height = 9;
                    ecImg.Width = 9;
                    ecImg.Border = 0;

                    ecDiv.Controls.Add( ecImg );
                    titleDiv.Controls.Add( ecDiv );
                }

                if ( title.Length > 0 )
                {
                    Literal titleText = new Literal();
                    titleText.Text = title;
                    titleDiv.Controls.Add( titleText );
                }

                this.Controls.AddAt( 0, titleDiv );
                if ( ecImg != null )
                    ecImg.Attributes["onclick"] = "expandCollapse( '" + startContentDiv.ClientID + "', '" + ecImg.ClientID + "') ;";
            }

            base.OnLoad (e);
        }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.