State dropdown widget for sitefinity forms

StateDropDownlist.ascx

<%@ Control %>
<%@ Register Assembly="Telerik.Sitefinity" TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" %>

<div class="sfFormDropdown stateDropDown">
<asp:Label runat="server" ID="titleLabel" CssClass="sfTxtLbl" Text="title label" AssociatedControlID="DropDownList" />
	<span class="sfFieldWrp sfDropdownList">
	    <asp:DropDownList runat="server" ID="DropDownList"></asp:DropDownList>
	    <sf:SitefinityLabel runat="server" ID="descriptionLabel" WrapperTagName="div" CssClass="sfDescription"/>
	    <sf:SitefinityLabel runat="server" ID="exampleLabel" WrapperTagName="div" CssClass="sfExample"/>
	</span>
	<div class="sfError" style="display:none;">This information is required</div>
</div>

StateDropDownlist.ascx.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Configuration;
using Telerik.Sitefinity.Data.Metadata;
using Telerik.Sitefinity.Locations;
using Telerik.Sitefinity.Locations.Configuration;
using Telerik.Sitefinity.Metadata.Model;
using Telerik.Sitefinity.Model;
using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;
using Telerik.Sitefinity.Security;
using Telerik.Sitefinity.Web.UI;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using Telerik.Sitefinity.Web.UI.Fields;
using Telerik.Sitefinity.Web.UI.Fields.Enums;

[assembly: WebResource(Custom.Sitefinity.Widgets.Form.StateDropdownList.scriptReference, "application/x-javascript")]
namespace Custom.Sitefinity.Widgets.Form
{
	/// <summary>
	/// Class used to create custom control for Form Builder
	/// </summary>
	/// <remarks>
	/// If this form widget is a part of a Sitefinity module,
	/// you can register it in the site's toolbox by adding this to the module's Install/Upgrade method(s):
	/// initializer.Installer
	///    .Toolbox(CommonToolbox.FormWidgets)
	///        .LoadOrAddSection(SectionName) // "TwoColumns" is Sitefinity's default
	///            .SetTitle(SectionTitle) // When creating a new section
	///            .SetDescription(SectionDescription) // When creating a new section
	///            .LoadOrAddWidget<StateDropdownList>("StateDropdownList")
	///                .SetTitle("StateDropdownList")
	///                .SetDescription("StateDropdownList")
	///                .LocalizeUsing<ModuleResourceClass>() // Optional
	///                .SetCssClass(WidgetCssClass) // You can use a css class to add an icon (this is optional)
	///            .Done()
	///        .Done()
	///    .Done();
	/// </remarks>
	/// <see cref="http://www.sitefinity.com/documentation/gettingstarted/creating-custom-form-field-controls"/>
	[DatabaseMapping(UserFriendlyDataType.ShortText)]
	[PropertyEditorTitle("StateDropdownList Properties")]
	public class StateDropdownList : FieldControl, IFormFieldControl
	{
		#region Constructor
		/// <summary>
		/// Initializes a new instance of the StateDropdownList class.
		/// </summary>
		public StateDropdownList()
		{
			this.Title = "State*:";
		}
		#endregion

		#region Public properties (will show up in dialog)
		/// <summary>
		/// Example string
		/// </summary>
		public override string Example { get; set; }

		/// <summary>
		/// Title string
		/// </summary>
		public override string Title { get; set; }

		/// <summary>
		/// Description string
		/// </summary>
		public override string Description { get; set; }

		public string DefaultState
		{
			get;
			set;
		}

		#endregion

		#region IFormFieldControl members
		/// <summary>
		/// Gets or sets MetaField property to persist data from control to the DB when form is submitted
		/// </summary>
		[TypeConverter(typeof(ExpandableObjectConverter))]
		public IMetaField MetaField
		{
			get
			{
				if (this.metaField == null)
				{
					this.metaField = this.LoadDefaultMetaField();
				}

				return this.metaField;
			}
			set
			{
				this.metaField = value;
			}
		}
		#endregion

		#region Value method
		/// <summary>
		/// Get and set the value of the field. 
		/// </summary>
		public override object Value
		{
			get
			{
				return this.DropDownList.SelectedValue;
			}

			set
			{
				this.DropDownList.SelectedValue = value.ToString();
			}
		}
		#endregion

		#region Template
		/// <summary>
		/// Obsolete. Use LayoutTemplatePath instead.
		/// </summary>
		protected override string LayoutTemplateName
		{
			get
			{
				return string.Empty;
			}
		}

		/// <summary>
		/// Gets the layout template's relative or virtual path.
		/// </summary>
		public override string LayoutTemplatePath
		{
			get
			{
				if (string.IsNullOrEmpty(base.LayoutTemplatePath))
					return StateDropdownList.layoutTemplatePath;
				return base.LayoutTemplatePath;
			}
			set
			{
				base.LayoutTemplatePath = value;
			}
		}

		#endregion

		#region Labels on control template
		/// <summary>
		/// Gets reference to the TitleLabel
		/// </summary>
		protected internal virtual Label TitleLabel
		{
			get
			{
				return this.Container.GetControl<Label>("titleLabel", true);
			}
		}

		/// <summary>
		/// Gets reference to the DescriptionLabel
		/// </summary>
		protected internal virtual Label DescriptionLabel
		{
			get
			{
				return Container.GetControl<Label>("descriptionLabel", true);
			}
		}

		/// <summary>
		/// Gets reference to the ExampleLabel
		/// </summary>
		protected internal virtual Label ExampleLabel
		{
			get
			{
				return this.Container.GetControl<Label>("exampleLabel", this.DisplayMode == FieldDisplayMode.Write);
			}
		}

		/// <summary>
		/// Reference to the TitleControl
		/// </summary>
		protected override WebControl TitleControl
		{
			get
			{
				return this.TitleLabel;
			}
		}

		/// <summary>
		/// Reference to the DescriptionControl
		/// </summary>
		protected override WebControl DescriptionControl
		{
			get
			{
				return this.DescriptionLabel;
			}
		}

		/// <summary>
		/// Gets the reference to the control that represents the example of the field control.
		/// Return null if no such control exists in the template.
		/// </summary>
		/// <value></value>
		protected override WebControl ExampleControl
		{
			get
			{
				return this.ExampleLabel;
			}
		}
		#endregion

		#region DropDownist on control
		/// <summary>
		/// Gets reference to the DropDownList control
		/// </summary>
		protected virtual DropDownList DropDownList
		{
			get
			{
				return this.Container.GetControl<DropDownList>("DropDownList", true);
			}
		}
		#endregion

		#region InitializeControls method
		/// <summary>
		/// Initializes the controls.
		/// </summary>
		/// <remarks>
		/// Initialize your controls in this method. Do not override CreateChildControls method.
		/// </remarks>
		protected override void InitializeControls(GenericContainer container)
		{
			// Set the label values
			this.ExampleLabel.Text = this.Example;
			this.TitleLabel.Text = this.Title;
			this.DescriptionLabel.Text = this.Description;

			DropDownList.Items.Add(new ListItem() { Text = "Select State" });
			CountryElement country = Config.Get<LocationsConfig>().Countries.Values.FirstOrDefault(c => c.IsoCode == "US");

			if (country != null)
			{
				foreach (StateProvinceElement state in country.StatesProvinces)
				{
					DropDownList.Items.Add(new ListItem()
					{
						Text = state.Name,
						Value = state.Abbreviation
					});
				}
			}
			
			if (!this.DefaultState.IsNullOrEmpty())
			{
				DropDownList.Items.FindByValue(DefaultState).Selected = true;
			}
			else
			{
				DropDownList.Items.FindByText("Select State").Selected = true;
			}
		}
		#endregion

		#region Script methods
		/// <summary>
		/// Get list of all scripts used by control
		/// </summary>
		/// <returns>List of all scripts used by control</returns>
		public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
		{
			var descriptor = new ScriptControlDescriptor(typeof(StateDropdownList).FullName, this.ClientID);
			descriptor.AddProperty("dropDownList", this.DropDownList.ClientID);
			descriptor.AddProperty("dataFieldName", this.MetaField.FieldName); //the field name of the corresponding widget
			return new[] { descriptor };
		}

		/// <summary>
		/// Get reference to all scripts
		/// </summary>
		/// <returns>Reference to all scripts</returns>
		public override IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
		{
			var scripts = new List<ScriptReference>(base.GetScriptReferences())
            {
                new ScriptReference(StateDropdownList.scriptReference, typeof(StateDropdownList).Assembly.FullName),
                new ScriptReference("Telerik.Sitefinity.Web.UI.Fields.Scripts.FieldDisplayMode.js", "Telerik.Sitefinity"),
            };
			return scripts;
		}
		#endregion

		#region Private fields and constants
		private IMetaField metaField = null;
		public static readonly string layoutTemplatePath = "~/Custom/Custom.Sitefinity.Widgets.Form.StateDropdownList.ascx";
		public const string scriptReference = "Custom.Sitefinity.Widgets.Form.StateDropdownList.js";
		#endregion
	}
}

StateDropdownList.js

Type.registerNamespace("Custom.Sitefinity.Widgets.Form");

Custom.Sitefinity.Widgets.Form.StateDropdownList = function (element) {
    this._dropDownList = null;
    this._dataFieldName = null;
    Custom.Sitefinity.Widgets.Form.StateDropdownList.initializeBase(this, [element]);

}

Custom.Sitefinity.Widgets.Form.StateDropdownList.prototype = {
    /* --------------------------------- set up and tear down ---------------------------- */

    /* --------------------------------- public methods ---------------------------------- */

    // Gets the value of the field control.
    get_value: function () {
    	return jQuery(this._dropDownList).val();
    },

    // Sets the value of the dropdown control depending on DisplayMode.
    set_value: function (value) {
    	jQuery(this._dropDownList).val(value);
    },

	/* --------------------------------- event handlers ---------------------------------- */

    /* --------------------------------- private methods --------------------------------- */

    /* --------------------------------- properties -------------------------------------- */

    get_textbox: function () {
    	return this._dropDownList;
    },

    set_textbox: function (value) {
    	this._dropDownList = value;
    },

    get_dataFieldName: function () {
        return this._dataFieldName;
    },

    set_dataFieldName: function (value) {
        this._dataFieldName = value;
    }
}

Custom.Sitefinity.Widgets.Form.StateDropdownList.registerClass('Custom.Sitefinity.Widgets.Form.StateDropdownList', Telerik.Sitefinity.Web.UI.Fields.FieldControl);