Custom Web Controls Demystified, Part 1

When ASP.NET was released in 2002, it gave Web developers a whole new design paradigm to work with; one that varied greatly from the classic Active Server Pages that many Web developers worked with in the past. At the heart of this new way of developing Web applications are components known as Web controls. Though most Web developers use them while developing ASP.NET applications, many Web developers have not yet dived into the world of creating custom Web controls, even after all this time, and all .NET developers will soon face another release of .NET. In this article, I will attempt to give you a head-to-toe understanding of how Web controls work, and how to create them for yourself.

This article assumes general .NET Framework skills, knowledge of programming ASP.NET applications, and object-oriented design. I also assume the reader understands key concepts in .NET development such as "decorating with Attributes" and "importing Namespaces," etc. Custom Web control development is a huge topic and the subject of complete books. I will provide as detailed and complete a tutorial as possible during the development of sample Web controls in the attempt to wet your appetite to pursue more knowledge on the subject.

As a free-lance consultant, I've noticed that when receiving ASP.NET skill-set requirements from clients or recruiters for contract jobs, knowledge of how to program custom Web controls is never requested. Now, I don't expect my business customers to know specific technologies when requesting a solution to their problems, but even IT departments that are in charge of screening consultants for required skills, and request experience in developing reusable software, seem to lack knowledge of this powerful part of ASP.NET. Programming Web controls goes way beyond using the ones that come with Visual Studio and can greatly change the way you develop and reuse code in Web applications.

I recently published an article on Declarative Programming using Web controls, where I generalized an approach to ASP.NET development using custom Web controls. This time, we're going to travel backwards and learn exactly how these extremely reusable components work, and how we can create our own to bring a level of object-oriented development to the UI level that was not easily achievable in the past. We will be developing three useful custom Web controls in this article that will cover many, though not all, of the technologies available to us. At the end, you will hopefully walk away with not only a good understanding of how to develop custom Web controls, but also three very useful Web controls that you can use as-is or as educational tools to get you going in developing more, on you own, and take advantage of this powerful yet underused part of the .NET world.

The "What" and the "How"

Put simply, ASP.NET Web controls are server-processed components that render standard HTML to a browser. Even in today's highly evolved world of Web application development, HTML is still all our browsers really understand. Sure, there's JavaScript, embedded OCXs, Flash animations, and so on, but all of them are kicked off by some kind of HTML.

When Visual Basic 5 introduced the Control Creation Edition, or CCE, Windows programmers were first given the opportunity to develop reusable OCXs (later to become ActiveX controls) of their own. For me at least, this changed the way I developed Windows applications. ASP.NET Web controls give ASP.NET developers the same advantages in reusability, encapsulation, and now complete object-orientation, when developing Web applications. However, the visual aspect of Windows Form controls and Web controls to a developer using them on a Windows form or a Web form is where the similarity ends.

You can essentially think of Web controls as code-generators. They are components that, through simple or complex logic, generate standard HTML that will get rendered in a browser. The functionality behind Web controls that generates the appropriate HTML gets processed within the ASP.NET page lifecycle. From a code standpoint, Web controls are just classes; classes with methods, properties, and events, just like any other class you have been programming with for over three years. This class-like nature gives developers the power of object-oriented programming at the UI level where they did not really have it before.

By: Miguel Castro

Miguel is an architect with IDesign who specializes in architecture consulting and building .NET solutions. He is a Microsoft MVP and INETA speaker and has been a software developer for over 22 years. With a Microsoft background that goes all the way back to VB 1.0 (and QuickBasic in fact), Miguel jumped on .NET as soon as the first public Beta was released and has provided .NET solutions for clients around the country in a variety of industries. He considers himself to be a .NET Developer and Architect and has equal love for both VB and C#, and no tolerance for language bigotry. He’s spoken at numerous user groups around the country as well as developer conferences.

He’s the author of the CodeBreeze code-generator, which among things can be found on his Web site:

www.steelbluesolutions.com

Miguel currently lives in Lincoln Park, NJ with his wife Elena and his daughter Victoria.

subscriptions@infotekcg.com