How to develop and debug ASP.NET custom controls in Visual Web Developer Express

As you may know, Visual Web Developer Express only supports Web site projects and you can only have  a single project open at a time. It does not support creation of Web Control libraries since Web Control Library is, in fact, a client side project like a Class Library project and VWD does not support client side development.

However, you do can create Class Library in Visual C# Express or Visual Basic Express. Web Controls Library is a variety of the Class Library. Now, did you know that you can install all Express editions on the same machine and that you can run multiple Express editions at the same time? Armed with that knowledge, if you really need to create and debug a custom control and you are limited to Express editions, here is what you can do:

1. Download and install Visual C# Express or Visual Basic Express.

2. Open Web site in the Visual Web Developer Express.

3. Right click on root node in the Solution Explorer, choose New Folder and name the folder bin. Folder should get distinct 'bin' folder icon.

4. Run C# or VB Express and create Class Library project.

5. Right click on the class library project node in the Solution Explorer and choose Properties.

6. In the Build tab (C#) or Compile tab (VB) set Output Path to the Web site bin folder.

7. Right click on the class library node in the Solution Explorer, select Add Reference and add reference to System.Web.

8. In the class code, add references (via imports/using statements) to System.Web, System.Web.UI and System.Web.UI.WebControls.  Derive the class from WebControl.

9. Write necessary custom control code and build the assembly.

10. Go back to Visual Web Developer, right click on the bin folder in the Solution Explorer and choose Refresh. You should see control assembly and the pdb file under the bin node.

11. Right click on Toolbox and select Choose Items...

12. Select .NET tab, click Browse...,  locate locate custom control assembly in the Web site bin folder and click OK. You should see control added to the toolbox.

13. Go to Design view and drop control on the designer. You should see control instantiated and design time HTML rendered.

14. Choose File | Open, locate custom control source file (.vb/.cs) and open it. Set breakpoint in the custom control code, such as in the control constructor or in RenderContents.

15. Hit F5 in the Visual Web Developer to run your Web under debugger. You should hit the breakpoint in the custom control code.

As you can see, you are editing and compiling control assembly in VB or C# Express while debugging should be performed in the Visual Web Developer. You'll have to go to another IDE to recompile custom control and you'll have to maintain matching build mode and remember switch to release build and delete pdb files before deploying the Web.

Of course, in Visual Studio Standard you would only have to add a Web Control library to the solution and be done as the most of the steps above would happen automatically ;-)

Comments

• Anonymous
  July 17, 2006
  I find it even easier to just create the source code as a class file in App_Code in Visual Web Developer. Once I've got it working, if I want to create a deployable assmebly, then I move it to the VB or C# Express IDEs.
• Anonymous
  July 17, 2006
  Good point!