Simple way to expose a .NET WinForm control as an ActiveX control in any HTML page

Sample Image - htmlwincontrol.jpg

Introduction

This article intends to show a very simple way to add any Windows Form control to any HTML page, whether it is an ASP.NET Web Form or any other simple HTML page. It is useful because sometimes we need extra functionality in our web pages, which simple HTML controls do not always provide. It is being used for a long time now (ActiveX) and this is a way to do the same using .NET. You could think of it as a C# applet. This approach will need that the .NET runtime is installed on the client machines, which may be an inconvenience compared to real ActiveX, but as with Java, why not download the .NET runtime?

Using the code

First of all we need (of course) our control, so we need to create a UserControl and build it in a .NET assembly. To avoid any complexity I used the DateTimePicker, extended it, and added a Date property that returns the short date format of the DateTime property of the control. Why this one? No reason, but there has been always the need for good date controls, and this one is very good.

Here's some of the code:

....
namespace DeAcero.Web.Controls.DateTime
{
    public class DateTimePicker : System.Windows.Forms.DateTimePicker
    {
....
        public string Date
        {
            get {return Value.ToShortDateString();}
        }

        public DateTimePicker() : base()
        {
            InitializeComponent();
        }
....
        private void InitializeComponent()
        {
            this.Format = System.Windows.Forms.DateTimePickerFormat.Short;
        }
....

Once we build (and prove) our control, we need to add it in the web page. To add an ActiveX control to an HTML page, we need to use the tag:

<object id=myId classid=myclassid>

Where the id attribute is the identifier of the control. To access the control from a JavaScript block (for example), this is the name we have to use. The classid attribute contains information of the file and class that contains the control. There's no need for the codebase attribute since the .NET runtime and Explorer do the download process automatically.

Here's an example:

<object id="DateTimePicker" height="31" width="177" 
  classid="bin/DeAcero.Web.Controls.DateTime.dll#DeAcero.
                     Web.Controls.DateTime.DateTimePicker" VIEWASTEXT>
</object>

Now let's have a look at the classid attribute. The bin/ part is the relative path of the DLL file containing our control, in this case DeAcero.Web.Controls.DateTime.dll. So in the example, the DLL is located inside the bin directory which is in the same directory as the HTML page containing the <object> tag.

The next part, DeAcero.Web.Controls.DateTime.dll, is just the name of the file (assembly) containing the control. The last part (notice the # separator) DeAcero.Web.Controls.DateTime.DateTimePicker is the full name of the class that implements the control, including the namespace.

That's all the code we need to add this control to the page. To access the control's public methods and properties, we just need scripting say JavaScript, for example:

<script language="javascript">
function Button1_onclick() {
//If DateTimePicker is outside a Form
    alert(DateTimePicker.Date);
//If DateTimePicker is inside a Form (Like in a ASP.NET WebForm)
    alert(Form1.DateTimePicker.Date);
}
</script>

This would need the onclick event of some button control point to that function. Example:

<input id="Button1" type="button" value="Button" 
         name="Button1" onclick="return Button1_onclick()">

Points of interest

There are some considerations to take in count when doing this. First, all client machines must have installed the .NET runtime framework in order to run the control, otherwise it will not work.

Second, the page and the DLL must be hosted in a virtual directory in IIS, this will not work locally or in other web servers (at least it is not proven to do so). Also, the folder where the DLL containing the control is located must have Read permissions.

And that is all we need to know. I included complete examples in the source & demo downloads. The source contains the control and the demo contains the HTML and Web Forms examples of use.

I hope someone finds this article useful.