HOW TO: Create a Web Control with an Expandable Property in the Designer by Using Visual C# .NET

View products that this article applies to.

Summary

This step-by-step article demonstrates how to use Visual C# .NET to create a custom Web control that has an expandable property. Properties can be expanded into subproperties for logical organization. The sample in this article demonstrates how to use a TypeConverter object of the ExpandableObjectConverter class and how to implement a custom TypeConverter object.

With the Microsoft Visual Studio .NET property browser, you can display nested properties. As a result, you can group properties more granularly and logically than categories. Nested properties are also available in both categorized and alphabetical sort mode. This helps to keep property lists compact.

Implement the Custom Control with ExpandableObjectConverter

Follow these steps to create a new Visual C# .NET Web Control Library project that is named ControlSampleLibrary:
1. Start Microsoft Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual C# Projects under Project Types, and then click Web Control Library under Templates.
4. In the Name box, type ControlSampleLibrary.
Rename the resulting project file (WebCustomControl1.cs) as EmployeeControl.cs.

Replace the default implementation of the control with the following code:

//System.ComponentModel provides the necessary attributes.
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace ControlSampleLibrary
{
    /// <summary>
    /// Summary description for WebCustomControl1.
    /// </summary>
    [DefaultProperty("EmployeeInfo"), 
    ToolboxData("<{0}:EmployeeControl runat=server></{0}:EmployeeControl>")]
    public class EmployeeControl: System.Web.UI.WebControls.WebControl
    {
        private EmployeeInfoClass empInfo = new EmployeeInfoClass();
                               
        //PersistenceMode.InnerProperty: Specifies that the property persists in
        //the ASP.NET server control as a nested tag. 
        //DesignerSerializationVisibility.Content: Specifies that a visual
        //designer serializes the contents of this property instead of the 
        //property itself. 
        [DefaultValue(""), Category("Custom"), 
        PersistenceMode(PersistenceMode.InnerProperty),
		DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public EmployeeInfoClass EmployeeInfo
        {
            get{return empInfo;}
            set{empInfo = value; }
        }
								
        /// <summary>
        /// Render this control to the output parameter that is specified.
        /// </summary>
        /// <param name="output"> The HTML writer to write out to </param>
        protected override void Render(HtmlTextWriter output)
        {
            string outputString ; 
            outputString = EmployeeInfo.FirstName + " " +
            EmployeeInfo.LastName + ", " + EmployeeInfo.EmployeeId + " " + "<br>";
            output.Write(outputString);
			
        }
    }
}

On the Project menu, click Add Class. In the Name box, type EmployeeInfoClass.cs.

Replace the default implementation of the EmployeeInfoClass class with the following code:

using System.ComponentModel;
using System;
///<summary>

///</summary>
namespace ControlSampleLibrary
{
    /// <summary>
    ///ExpandableObjectConverter: Provides a type converter to convert expandable 
    ///objects. It adds support for properties on an object to the methods and 
    ///properties that TypeConverter provides.
    /// </summary>
    [TypeConverter(typeof(ExpandableObjectConverter))]  
    public class EmployeeInfoClass
    {
        private string strFirstName ;
        private string strLastName ;
        private int iEmpId ;
        public EmployeeInfoClass()
        {
            strFirstName = "";
            strLastName  = "";
            iEmpId = 0;
        }
        [DefaultValue(""), NotifyParentProperty(true), 
        RefreshProperties(RefreshProperties.Repaint)] 
        public string FirstName
        {
            get
            {
                return strFirstName;
            }

            set
            {
                strFirstName = value;
            }
        }
			
        [DefaultValue(""), NotifyParentProperty(true), 
        RefreshProperties(RefreshProperties.Repaint)]
        public string LastName
        {
            get
            {
                return strLastName;
            }
            set
            {
                strLastName = value;
            }

        }	   
        [DefaultValue(""), NotifyParentProperty(true), 
        RefreshProperties(RefreshProperties.Repaint)]
        public int EmployeeId
        {
            get
            {
                return iEmpId;
            }
            set 
            {
                iEmpId = value;
            }
        }
    }
}

On the Build menu, click Build Solution to build the solution. Alternatively, press CTRL+SHIFT+B.

Test the Custom Control with ExpandableObjectConverter

Follow these steps to create a new ASP.NET Web Application project:
1. Start Visual Studio .NET.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual C# Projects under Project Types, click ASP.NET Web Application under Templates, and then click OK.
Follow these steps to add the EmployeeControl control to the Visual Studio .NET toolbox:
1. In Design view, right-click the Web Forms tab in the toolbox, and then click Customize Toolbox.
2. Click the .NET Framework Components tab.
3. Click Browse, and then locate the folder that contains the ControlSampleLibrary.dll assembly. Select the file, and then click Open.
4. After the reference to the control is added, click OK.
Drag the EmployeeControl control from the toolbox to the WebForm1.aspx page.
Click the EmployeeControl control. Notice that the Properties window displays the EmployeeInfo property. If you select the categorized option, the EmployeeInfo property is listed under the "custom" category.
Expand the EmployeeInfo property into EmployeeId, FirstName, and LastName for separate entries, and then add some data to these properties.
Build the solution, and then open the WebForm1.aspx page in your browser to test that your data is rendered.

Implement the Custom Control with Custom TypeConverter

Because the property browser only works with strings directly, the property browser relies on TypeConverter classes to convert those string values to the type that the property expects, and vice versa. TypeConverter classes also control expandability and allow complex types to work seamlessly with the property browser.

In this section, you implement a custom TypeConverter object that inherits from the ExpandableObjectConverter class. This custom TypeConverter converts an EmployeeInfo type to and from a string.

On the Project menu, click Add Class to add a class that is named EmployeeInfoConverter.cs to ControlSampleLibrary.

Replace the default implementation of the EmployeeInfoConverter class with the following code:

using System;
using System.ComponentModel;
using System.Globalization;

namespace ControlSampleLibrary
{
    /// <summary>
    /// Summary description for EmployeeInfoConverter.
    /// </summary>
    public class EmployeeInfoConverter : ExpandableObjectConverter
    {
        /// <summary>
        /// CanConvertFrom specifies which data types the converter can convert from.
        /// </summary>
        /// <param name="context"></param>
        /// <param name="t"></param>
        /// <returns></returns>
        public override bool CanConvertFrom(ITypeDescriptorContext context, Type t) 
        {
            if (t == typeof(string)) 
            {
                return true;
            }
            return base.CanConvertFrom(context, t);
        }
        /// <summary>
        ///ConvertFrom actually implements the conversion.
        /// </summary>
        /// <param name="context"></param>
        /// <param name="info"></param>
        /// <param name="value"></param>
        /// <returns></returns>
        public override object ConvertFrom(
            ITypeDescriptorContext context, 
            CultureInfo info,
            object value)
        {
            if (value is string) 
            {
                try 
                {
                    string s = (string) value;
                    //Parse the format "FirstName LastName, (EmployeeId)"
                    int space  = s.IndexOf(' ');
                    if (space != -1)
                    {
                        //Now that you have the space, get 
                        // the FirstName.
                        string firstname = s.Substring(0, space);
                        int paren = s.LastIndexOf('(');
                        if (paren != -1 && s.LastIndexOf(')') == s.Length - 1)
                        {
                            //Pick up the State.
                            string lastname = s.Substring(space + 1, paren - space - 1);
                            //Get the Zip.
                            int employeeid = Int32.Parse(s.Substring(paren + 1, s.Length - paren - 3));
                            EmployeeInfoClass e = new EmployeeInfoClass();
                            e.EmployeeId = employeeid;
                            e.FirstName = firstname.Trim();
                            e.LastName = lastname.Trim();
                            return e;
                        }
                    }
                }
                catch{}
                // If you got this far, complain that you
                // could not parse the string.
                throw new ArgumentException("Cannot convert '" + (string)value + "' to type HomeAddress");
            }
            return base.ConvertFrom(context, info, value);
        }
        /// <summary>
        ///CanConvertTo specifies which data types the converter can convert to.
        /// </summary>
        /// <param name="context"></param>
        /// <param name="culture"></param>
        /// <param name="value"></param>
        /// <param name="destType"></param>
        /// <returns></returns>
        public override object ConvertTo(
            ITypeDescriptorContext context, 
            CultureInfo culture, 
            object value,    
            Type destType) 
        {
            if (destType == typeof(string))
            {
                EmployeeInfoClass  e = (EmployeeInfoClass)value;
                //Build the string as "Street, State, (Zip)"
                string result;
                result = e.FirstName + " " + e.LastName + ", (" + e.EmployeeId.ToString() + ")";
                return result;
            }
            return base.ConvertTo(context, culture, value, destType);
        }

    }
}

In the EmployeeInfoClass.cs module, change the following line

[TypeConverter(typeof(ExpandableObjectConverter))]

to:

[TypeConverter(typeof(EmployeeInfoConverter))]

On the Build menu, click Build Solution to build the solution. Alternatively, press CTRL+SHIFT+B.

Test the Custom Control with Custom TypeConverter

To test the new implementation, follow the same steps in the "Test the Custom Control with ExpandableObjectConverter" section of this article. Notice that the EmployeeInfo property is expandable and allows the user to handle this type either as subproperties or as a single string.

↑ Back to the top