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
. 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
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.
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
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
, 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.