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


Custom Web Controls Demystified, Part 1 : Page 4

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.

Rendering the Control
Now that you've added your custom property to the Web control, you need to tell the control what to do with it. Remember that your goal is to check the content of this property and if it is anything but an empty string, you want a confirmation dialog to pop up and let the user confirm or cancel the postback that the button initiates. When you create custom Web controls, it's important to understand what you want the eventual HTML result to be. Remember, I stated earlier that Web controls are essentially code generators that render standard HTML. The ConfirmationButton control, like its Button base class, renders a standard HTML input tag that looks something like this.

   <input type="submit"... />
The rest of the tag is not important at this time. What is important is what you would need to add to such an HTML tag if you wanted a confirmation pop up—and that is some Jscript code in its onclick event, such as:

   <input type="submit" onclick="if(!confirm(
      'Are you sure?') return false; "... />
This Jscript code will simply pop up a confirmation message asking "Are you sure?" Then, if the user clicks Cancel, the code returns a value of false. This has the effect of canceling the submission of the form originally intended by pressing the button, and effectively canceling the postback. Now you need to get this code into your Web control. You do this by overriding the AddAttributestoRender method. This method adds tag attributes to the rendered HTML tag your control will eventually produce.


   Protected Overrides Sub AddAttributesToRender( _
      ByVal writer As HtmlTextWriter)
      If Me.ConfirmationMessage <> _
         String.Empty Then
         writer.AddAttribute( _
            HtmlTextWriterAttribute. _
            Onclick, "if(!confirm('" & _
            Me.ConfirmationMessage.Replace( _
            "'", "\'") + "')) return false;")
      End If
   End Sub
In C#:

   protected override void AddAttributesToRender(
      HtmlTextWriter writer) 
      if (this.ConfirmationMessage != String.Empty)
            "if(!confirm('" + 
            this.ConfirmationMessage.Replace("'", "\'") + 
            "')) return false;"); 
The argument of type HtmlTextWriter is used to write to the HTML rendering engine. You will see much code like this later. One of the methods of this type allows you to add an attribute to the HTML tag that will later get rendered. As you can see, you're adding an onclick attribute and providing the appropriate Jscript to perform the task. The code uses the Replace statement to replace any single ticks with ones preceded by a backslash. This is standard Jscript syntax.

I've twice mentioned the tag that is rendered. The Button class code has decided this for you so it is not discussed in detail here. You're taking it on faith that Microsoft's Button control renders an <input> tag.

That's it for the ConfirmationButton class. If you compile it you can add it to your toolbox and use it on a Web Form. When you drag it onto a Web Form and examine the property browser, you'll notice the ConfirmationMessage property under the Behavior category. Set this property to a value of "Are you sure?", run the Web Form and press the button, and you should see something like Figure 1.

Figure 1: Confirmation Message: The figure shows the message that appears when a user presses the ConfirmationButton.
If you click "Yes," you should see the page postback as usual, but clicking "No" will simply make the popup window disappear and you'll notice that the postback will be cancelled. (You can tell if the postback occurs by looking at the bottom status bar of the browser.)

With very little work, you could have your button decide whether or not to use the ConfirmationMessage property based on another Boolean property called Confirm; instead of depending on the existence of the message text.

The assembly, or DLL file, that this class compiled into can be distributed to any Web applications and used freely. This is where the extreme reusability factor of custom Web controls comes in. In fact, once this control exists in your toolbox, dragging it onto a Web Form will automatically add the reference to its DLL to your ASP.NET application.

Before I wrap this up, I want to touch on one other thing that will apply to all Web controls. I'm referring to the control's tag prefix. All of you have used the Visual Studio Web controls already, and I'm sure you've noticed the ASPX code that gets generated when you drag something like a textbox onto a Web Form.

   <asp:TextBox id="TextBox1" runat="server" ... />
The "asp:" in this case is called the tag prefix. By default, .NET uses "cc1" for your new control but you're going to change it to something else. Since my company name is InfoTek Consulting Group, I tend to use "icg" as the tag prefix for all of my Web controls. I'll place the definition for a tag prefix in the AssemblyInfo file. The declaration looks like this.

   [assembly: TagPrefix("InfoTek.Web.UI.WebControls",
For VB.NET projects, replace the square brackets ([])with angle brackets (< and >). The first argument specifies the custom control's namespace and the second argument specifies the tag prefix you want to use. By adding this attribute to the AssemblyInfo file, your ConfirmationButton control takes this form.

   <icg:ConfirmationButton id="ConfirmationButton1"
   runat="server" ... />
Congratulations. You've just developed a very simple, yet useful inherited Web control. You can use the technique I showed you here on any type control and it is only limited by your own creativity. For practice, try creating another inherited control but make it extend a Textbox control to convert its contents to upper or lower case when it loses focus. Here's a hint: the Jscript onblur event gets fired when the control loses focus. I'll leave the rest to you.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date