RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Custom Web Controls Demystified, Part 1 : Page 6

Many ASP.NET developers use Web controls, but few have taken the time to explore how to develop their own custom Web controls, thereby potentially missing some very useful, reusable functionality.

Naming Controls
When a programmer drops your newly created FormField control on a Web Form, the first thing they usually do is give it a name, such as fldName. The rendered control, however, is made up of several HTML tags that would normally each have their own identifiers. Since you are manually rendering the entire HTML composing your custom Web control, it's obviously up to you to provide those HTML tags with appropriate identifiers. My code examples will follow the ASP.NET naming convention that all out-of-the-box Web controls use. The two attributes you must provide for each HTML tag are id and name. The attribute values should be the name of the encapsulating control (which is your Web control) followed by whatever name you want.

It goes without saying that this name should make sense if you read the rendered HTML from the browser. The delimiter between the two should be a colon (:) for the name attribute and an underscore (_) for the id attribute. You have no way of knowing what a developer will name your control when you use the UniqueID property of the Control class, which is ultimately the class your control inherits from. Following this naming convention, you want to keep the code easy for any programmer to understand and allow your custom Web controls to maintain the same standards that Microsoft and other control vendors use.

Note in the code that the textbox control retains the same name as your Web control (UniqueID); no ":childname" or "_childname" is concatenated. The reason for this has to do with making the Web control compatible with client-side validators and will be explained later.

What Do We Have So Far?
Compile your control and see what it looks like in a designer. I'll leave it up to you to have an ASP.NET Web application ready to go with a test page so you can test your controls. Add the control to the toolbox by browsing for the compiled assembly. If you drag your new control onto a Web Form, you should get something that looks like Figure 3.

Figure 3: The FormField control in its first stage.
I think that looks pretty good for so little effort. Of course, you should fix a couple of details before you add any bells and whistles. First, I'll show you how to fix the control visually so it looks cleaner. You can simply add a space between the caption and textbox and between the textbox and button. If you recall the last code snippet, you used three RenderBeginTags and RenderEndTags to render the three HTML tags. Now you need to add code to render a space character after the RenderEndTag that corresponds to the "span" tag and after the RenderEndTag that corresponds to the "input" tag for the textbox. You can use the Write method of the HtmlTextWriter object. In this method call you can send any literal text you want; in this case you'll send  , which is the HTML control code for a space character. In C# your code would look like this.

   output.Write("  ");
For VB.NET code you just remove the trailing semi-colon. If you recompile your control and look at your Web Form now you'll see the space between each of the elements of your control. If you modify the properties of the control a little bit, you'll see the Caption and ButtonCaption properties in the Appearance category of the property browser. Change the Caption to "Enter name:" and the ButtonCaption to "search" and you should see something like what's in Figure 4.

Figure 4: The FormField control in progress.
I think by now you can see how useful this can be. In fact, at this point you can use the control on a Web Form and see it in action. The Text property can retrieve or set the textbox's value from the form's code-behind page. But for real versatility, you still have a little more work to do.

To Be or Not Be
It's pretty obvious that few if not most of the instances of this control that you would use in an actual Web Form don't need the button to the right of the textbox. You could take all the code in the Render method that corresponds to the button, including the space character you rendered before it, and place it around a condition statement that checks a new Boolean property called ButtonVisible. This lets you toggle the visibility of the button on your FormField control. However, in the downloadable code for this article, you'll notice that I don't use a ButtonVisible property. Instead, I've added a little more versatility with a property called ButtonLocation which is an enum value with three possibilities: Right, Left, or Hide.

Using this approach I can place the button either to the right or left of the textbox, or I can hide it altogether. The logic to achieve this functionality involves creating conditions for rendering the HTML in the Render event and doing things in a different order depending on certain property values. I won't go into those details here but I suggest you review the downloadable code. You'll find this and plenty of other added functionality.

In the second part of this article, I'll show you three more things you can do to this control to make it really useful. First I'll show you how to add the ability to capture an event when the button is clicked or when the text in the textbox changes. In addition, I'll show you how to add basic styling, and I'll show you how to allow each element that makes up your control resize appropriately. In the mean time, feel free to read ahead in the code samples.

Miguel A. Castro is President of InfoTek Consulting Group, Inc., a professional consulting firm that specializes in architecting, designing, and developing solutions using Microsoft .NET technologies. His VB background goes all the way back to 1.0. Miguel's focus for the last couple of years has been the .NET Framework and languages; he is fluent in both VB .NET and C#. His programming experience goes back 20 years when he started on TRS-80s, Apple IIs, and Atari 800 computers. Miguel lives in Lincoln Park, New Jersey with his wife Elena and his daughter Victoria.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date