Using Enumerators to Auto-generate a Dropdown

Sitefinity ASP.NET CMS can be extended very easily using traditional ASP.NET UserControls.  Once a UserControl is added to Sitefinity, Sitefinity will automatically generate a web admin interface.  This interface allows editors to edit any public properties found in the User Control.

Below is a very simple ASP.NET UserControl with two public properties (Text, Color).  These two properties can be used to display text in a chosen color.

~/Custom/UserControls/ColoredText.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ColoredText.ascx.cs" Inherits="Custom_UserControls_ColoredText" %>

<div id="Div1" runat="server"><asp:Literal ID="Literal1" runat="server" /></div>

~/Custom/UserControls/ColoredText.ascx.cs

using System;

public partial class Custom_UserControls_ColoredText : System.Web.UI.UserControl
{
    public string Text { get; set; }
    public string Color { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        Div1.Style.Add("color", Color);
        Literal1.Text = Text;
    }
}

Sitefinity will automatically generate the following web admin interface for this control:

This UserControl causes the following HTML to be generated:

<div style="color:Red;">Hello world</div>

Using Dropdowns to Avoid Mistakes

This UserControl works fine until someone types an invalid HTML color name.  When this happens, this UserControl will generate invalid HTML:

<div style="color:JohnDeereGreen;">Hello world</div>

This is easily solved by using enum to declare an enumeration.  The Color property's type can then be set to this enumeration instead of a string.  Here is the new code:

~/Custom/UserControls/ColoredText.ascx.cs

using System;

public partial class Custom_UserControls_ColoredText : System.Web.UI.UserControl
{
    public string Text { get; set; }
    public ColorType Color { get; set; }
    public enum ColorType { Black, Blue, Red, Green, Purple, Gray, Yellow }

    protected void Page_Load(object sender, EventArgs e)
    {
        Div1.Style.Add("color", Color.ToString());
        Literal1.Text = Text;
    }
}

Sitefinity will automatically generate a dropdown from this enumeration:

Pretty neat, eh?  As much as possible your UserControls should make it impossible for editors to do the wrong thing.  Enumerators can be used to prevent editors from making mistakes.

This is just the beginning though.  To make the control editing experience even better, check out WebEditors and Control Designers.

P.S.  I think "John Deere Green" (#3e7126) should be an official HTML color.   :)