Hosting .NET Windows Forms Controls in IE

By Thiru Thangarathinam

In the past, Web developers often used ActiveX controls to provide rich client-side functionality in their Web applications. Now developers can easily build objects using the Microsoft .NET Framework that are more compact, lightweight, secure and can be hosted within Internet Explorer. By hosting .NET Windows Forms controls in Internet Explorer, developers can accomplish many client-side Web development goals. In this article, we will understand how to create Windows Forms controls and deploy them within Internet Explorer. While using Windows Forms controls from within IE, we will also demonstrate how to provide rich user experience in the client side by invoking a remote Web service from the Windows Forms control. Along the way, we will also understand how to take advantage of the .NET Security Model to provide a seamless secured execution environment for our control.

If you have developed Web applications using Java based languages, you are familiar with Java applets. Java applets are small programs that are basically designed to run in a Web browser. Java applets are executed when the browser loads an HTML document that contains the applet tag. Windows Forms within Web pages work in a manner similar to Java applets. In this approach, you create Windows Forms controls using the rich classes supplied by the Windows Forms technology and then deploy the control in a Web page. When the browser loads the Web page, it also executes the code contained in the Windows Forms control. This could be very useful on an Intranet or Extranet application scenario where you need to deploy an enterprise-wide application that requires dynamic rich user experience as provided by a fat-client application. This model is based on the same deployment and maintainability characteristics of a thin client n-tier application.

One of the great features of .NET is the seamless integration it provides with Internet Explorer. For example, we can activate a Windows Forms control from IE without even prompting the user. This is accomplished without having to do any registration while still utilizing all the features of Code Access Security provided by the .NET CLR.

When you build Windows Forms controls, you have all the features provided by the Windows Forms class hierarchy. For example, you can use Windows Forms control validation techniques to perform extensive validation on the input data entered by the user. Similarly, you can even invoke a remote Web service from your forms control. By using all of these techniques, you can create rich, powerful, dynamic state-of-the-art applications using the .NET platform.

Implementation

In this section, we will see how to create a simple Windows Forms control and host it in Internet Explorer. The following list describes five steps to activate a Windows Forms control within IE.

• Create a Windows Forms control
• Create an HTML document with an object tag that identifies the Windows Forms control
• Configure the virtual directory for proper activation of the control
• Configure Code Access Permissions
• Run the control

Now we will look at each of the above steps in detail.

Create a Windows Forms Control
In this step, we will create a simple Windows Forms control. This control basically displays a "Hello World" message to the users. We will start by creating a new Visual C# Windows Control Library project named HelloWorldControl as shown in the following screenshot.

Once the project is created, we will rename the default user control to HelloWorldCtl. To the user control, we will add a label control named lblMessage and a button named btnClick. When the user clicks the button, we will execute the following code to display a simple message to the user.

private void btnClick_Click(object sender, System.EventArgs e)
{
lblDisplayMessage.Text = "Hello World";
}

Create an HTML Page
In this step, we will create an HTML document and insert an object tag that is used to activate the Windows Forms control. The HTML page looks like the following.

<html>
<body>
<p>Hello World Control<br> <br></body>

<object id="HelloWorldControl1"
classid="http:HelloWorldControl.dll#HelloWorldControl.HelloWorldCtl" 
height="500" width="500" VIEWASTEXT>    
</object>
<br><br>
</html>

Configure the Virtual Directory
Now that we have created the HTML page, let us create a new virtual directory named HelloWorldControlHost and add both the control (HelloWorldControl.dll) and the HTML document (HelloWorld.htm). While configuring the virtual directory, it is important to set the execution permissions on the virtual directory to Scripts. The control will not be properly activated if the execution permissions are set to Scripts & Executables. You can verify this by opening up the Properties window for your virtual directory as shown below.

Configuration of Code Access Permissions
If your control is from an intranet site, it will execute correctly. But if you want to run the control from an Internet site, you then need to configure Internet Explorer or alter security policy to allow it to run. You can do this by identifying your hosting page as belonging to the Trusted zone. To set your site as part of the Trusted zone, from IE choose Tools->Options->Security->Trusted Sites and then add your site to the list and then click OK. Next time, when you browse to that page, it will execute properly, since you have already set the Internet permissions.

Run the Control
To run the control, just navigate to the HTML page that hosts the control from the browser. In the displayed HTML page, if you click on the Click Here command button, the control displays a Hello World message as shown in the following screenshot.

In this example, we looked at how to create a simple Windows Forms control and host it in Internet Explorer. In the next section, we will see how to access a Web service directly from the client machine using a Windows Forms control.

Accessing the Web Service from the Windows Forms Control

One of the main advantages of Windows Forms control is that it allows you to bring a rich user experience to the client machine. For example, you can access a Web service directly from the client machine and display the results to the user without even refreshing the page. To demonstrate this, we will first create a Web service and then show how to invoke the Web service from the Windows Forms control.

Creation of Web Service
To start with, we will create a Visual C# ASP.NET Web service named AuthorsWebService as shown below.

Once the Web service is created, we will change the name of the Web service class to AuthorsService. After that, we will add a new method named GetAuthors to the AuthorsService class. The GetAuthors method looks like the following.

	[WebMethod]
	public DataSet GetAuthors()
	{
		//Get the connection string from the configuration file
string connString = System.Configuration.ConfigurationSettings.AppSettings["connectionString"];
		SqlConnection sqlConn = new SqlConnection(connString); 
		DataSet dstAuthors = new DataSet("Authors");			
SqlDataAdapter adapter = new SqlDataAdapter("Select * from Authors",sqlConn);		
		//Fill the Dataset with the results of the executed query
		adapter.Fill(dstAuthors,"Author");		
		//Close and dispose the opened database connection
		sqlConn.Close();
		sqlConn.Dispose();
		//Return the Authors Dataset to the caller
		return dstAuthors;	      
	}

<appSettings>
<add key="connectionString"  
           value="server=localhost;uid=sa;pwd=thiru;database=Pubs">
       </add>
</appSettings>

Creation of Windows Forms Control That Acts as the Web Service Client
In our case, since we want to invoke the Web service from the Windows Forms control, we will create a new Visual C# Control Library project named AuthorsWebServiceClientControl.

Once the project is created, we will rename the default user control to AuthorsControl. To the user control, we will add a DataGrid named gridAuthors and a command button named btnClick. In the click event of the command button, we will write code to invoke the Web service. Before that, we will add reference to the Web service using Add Web Reference option in Visual Studio .NET. In the Add Web Reference dialog box, we will type in the location of our Web service and press Enter. Then we click on Add Reference button to add the reference to the Web service. This basically creates the proxy for the Authors Web service.

Now that the proxy is created, we are ready to add code to invoke the Web service. We do this in the click event of the command button that we added earlier.

private void btnClick_Click(object sender, System.EventArgs e)
{
	 this.Cursor = Cursors.WaitCursor;
	 AuthorsWebServiceProxy.AuthorsService authorsSvc = new 
AuthorsWebServiceProxy.AuthorsService();
	gridAuthors.DataSource = authorsSvc.GetAuthors();
	this.Cursor = Cursors.Default;
}

Creation of HTML page and Virtual Directory
In this step, we will create an HTML page that hosts the AuthorsWebServiceClientControl that we created earlier. The code for the HTML page looks like the following.

<html>
<body>
<p>Authors Display Control<br> <br></body>

<object id="AuthorsControl1"
classid="http:AuthorsWebServiceClientControl.dll#AuthorsWebServiceClientControl.AuthorsControl" 
height="500" width="500" VIEWASTEXT>    
</object>
<br><br>
</html>

Debugging the Windows Forms Control

To debug the control, you need to perform the following steps.

• Open up the browser and make a request to the HTML page.
• Bring up Visual Studio.NET and choose Tools->Debug Processes from the menu to display the following dialog box.

  

• In the Processes dialog box, select IEXPLORE.EXE and click Attach button. When you click on Attach, it brings up the following dialog box in which you are prompted to choose the program types that you want to debug. In this dialog box, make sure Common Language Runtime is checked in the list. Then Click on OK.

  

• Clicking on OK in the above dialog box brings you back to the Processes dialog box again where you just need to click Close.

  

• Open up the User Control file AuthorsWebServiceClientControl.cs from the File->Open->File menu. And set breakpoints in the click event of the command button.
• Go back to the browser and click on the command button. When you do that, you will automatically hit the breakpoint that you have already set up in your control. Once you hit the breakpoint, you can then debug your code using all of the features of Visual Studio .NET. This is shown in the following screenshot.