OSNews

	public class CountryCodeDropDownList : System.Web.UI.WebControls.WebControl
	{
		// your code will be added here
	
		...
	
		// you will be modifying the Render method below, as well
	
		/// <summary>
		/// Render this control to the output parameter specified.
		/// </summary>
		/// <param name="output"> The HTML writer to write out to </param>
		protected override void Render(HtmlTextWriter output)
		{
			output.Write(Text);
		}
	}

3.3.1. CreateChildControls
You are going to override the CreateChildControls Method to add and populate your DropDownList with ListItems. I have taken the easy way out and created an array of strings and a for loop to add items. Feel free to do it your way. The constructor below does not include the full ISO 3166-1 list of country codes. The referenced project files, available to download, at the top of the article, contain the complete Method.

	protected override void CreateChildControls()
	{
		//This is a partial list, the project files contain a complete list

		//Country codes are as specified in ISO 3166-1
		//for more information, or to obtain an official list, visit the iso site:
		//http://www.iso.org/iso/en/prods-services/iso3166ma/index.html
		string [] codes = {
			"United Kingdom","GB",
			"United States","US",
			"United States Minor Outlying Islands","UM",
			"Virgin Islands, British","VG",
			"Virgin Islands, U.S.","VI",
		};

		DropDownList ddlCountryCodes = new DropDownList();
		
		for(int i = 0; i < codes.Length; i+=2) 
		{
			ddlCountryCodes.Items.Add(new ListItem(codes[i], codes[i + 1]));
		}

	ddlCountryCodes.SelectedIndexChanged +=
new EventHandler(this.ddlCountryCodes_selectedIndexChanged);
		this.Controls.Add(ddlCountryCodes);
	}

3.3.2. SelectedIndexChange Event
In order to support changes made to your control you will implement an event handler, but it's just a no-op. You can do stuff in here, but it's not necessary for this project.

	private void ddlCountryCodes_selectedIndexChanged(Object sender, EventArgs e) 
	{
		//no need to really do anything here
	}

3.3.3. Remove Unnecessary Code Before you add properties, remove these lines from the beginning of the class definition:

	private string text;

	[Bindable(true),
		Category("Appearance"),
		DefaultValue("")]
	public string Text
	{
		get
		{
			return text;
		}

		set
		{
			text = value;
		}
	}

	/// <summary>
	/// Render this control to the output parameter specified.
	/// </summary>
	/// <param name="output"> The HTML writer to write out to </param>
	protected override void Render(HtmlTextWriter output)
	{
		output.Write(Text);
	}

3.3.4. Expose Some Existing Properties
The Text and Value properties of the DropDownList's SelectedItem are properties that you will want access to in your applications, so you will expose them by adding a couple of public Properties.

3.3.4.1. Value
You want to expose the Value of the currently selected item in the DropDownList.

	public string Value
	{
		get
		{
			this.EnsureChildControls();
			return ((DropDownList)Controls[0]).SelectedItem.Value;
		}

		set
		{
			((DropDownList)Controls[0]).SelectedItem.Value = value;
		}
	}

3.3.4.2. Text
You also want to expose the Text of the currently selected item in the DropDownList.

	public string Text
	{
		get
		{
			this.EnsureChildControls();
			return ((DropDownList)Controls[0]).SelectedItem.Text;
		}

		set
		{
			((DropDownList)Controls[0]).SelectedItem.Text = value;
		}
	}

3.3.5. Add Some New Properties
You are going to add some Design View Properties. These are properties that will effect the Design View of the Web Control.

3.3.5.1. RenderHTML Design View Property
The RenderHTML Property will be used later to control what is rendered in Design View. The implementation of this property consists of a private string and public property. The string will be used when you create a ControlDesigner derived Class in the overridden GetDesignTimeHtml() method.

	//
	//strRender is set to a simple select with Country Code DropDownList to display
	// in Design View. I included the other option, since it's the longest option
	// and represents how wide the control will actually be
	//
	private string strRender = 
"<select name><option value=\"\">Country Code DropDownList</option><option value=\"UM\">
United States Minor Outlying Islands</option></select>";

	public string RenderHTML 
	{
		get 
		{
			return strRender;
		}

		set
		{
			strRender = value;
		}
	}

3.3.5.2. NoRenderHTML Design View Property
The NoRenderHTML Property will be used later to control what is rendered in Design View when the Design View thinks that there will not be anything rendered at run time. This control will always render at runtime, by it's very nature. However, there are times when you will want to create controls that don't, for instance, a label control. It is convenient to add a "This control will not be rendered (visible) at runtime with the current settings" render string and you will add it here, simply to provide a consistent template to work from for future controls. The implementation of this property consists of a private string and public property. The string will be used when you create a ControlDesigner derived Class in the overridden GetEmptyDesignTimeHtml() method.

	private string strNoRender = "Not Visible at Runtime with Current Settings";

	public string NoRenderHTML 
	{
		get 
		{
			return strNoRender;
		}

		set
		{
			strNoRender = value;
		}
	}

3.3.5.3. Property Grid Extensions
The Property Grid is the Visual Studio Property Window and you can control how the Web Control is represented in it, when you view its properties. This is accomplished by a square bracketed prolog immediately prior to the public Properties themselves.

Add a Property Grid control prolog to each of the new Properties (The RenderHTML Property is shown, use the same procedure for the NoRenderHTML, Text and Value Properties).

	[
		Bindable(true),
		Category("Custom"),
		DefaultValue(""),
		Description("Set the Design View Render HTML String")
	]
	public string RenderHTML 
	{
		...
	}

The prolog will add a Custom Category to the Property Grid and add the property RenderHTML to the Grid. If you select the RenderHTML property in the Property Grid, it will display the Description, "Set the Design View Render HTML String", in the Description Box below the Properties as a sort of help text.

1. "VS.Net controls, Page 1/5"
2. "VS.Net controls, Page 2/5"
3. "VS.Net controls, Page 3/5"
4. "VS.Net controls, Page 4/5"
5. "VS.Net controls, Page 5/5"