Creating Custom Web Controls

How do you extend a control? Let’s figure it out.

Why would you want to extend existing controls?

Because some functionality may not exist exactly as you may need it. For example, let’s take up ImageButton control example. It is a great control but it falls short when it comes to real world scenario. Mostly websites do a hover image clickable button where the text or background color of the button changes once you hover your mouse over it.

How to Extend?

_I assume that you use C# code but there is not going to be any difference even if you wanted to do in VB.Net. _

Create a project for creating custom web control library. It automatically includes a C# class that says something like

<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">class</span> WebCustomControl1 : WebControl

Now ask yourself, what do you want to extend? A GridView? Replace WebControl with GridView. Let’s follow our example with Hover Image Button Control. If you recall .Net already has ImageButton control that accepts one url for the image to be shown for that button, let’s extend that one to include two Images rather than just one. In that case I would replace WebControl with ImageButton since I am going to extend ImageButton control. Let’s call it HoverImageButton. Hence, the line changes to some thing like this:

<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">class</span> HoverImageButton : ImageButton

The class also includes a property called Text for you so that you can see that and figure out how to use properties in custom web controls. It also includes attributes that start off just before the property itself. It is used by Visual Studio for showing this property on Properties pane. It is definitely a very useful feature.

You can change this property to anything you like. Since we are creating a HoverImageButton control we want a property to save another url for the hover image’s source. Let’s change Text to “ImageHoverUrl”. ImageButton already has a property called “ImageUrl” and it belongs to “Appearance” group in Visual Studio Properties window. Notice the similarity in “ImageHoverUrl” and ImageUrl so that they appear together in Properties window. Sometimes, little deeds go a long way.

Writing JS file

Now let’s add a javascript file to the project. Add one function called “ShowImageHoverButton()” that takes in two parameters, the control’s id and the new image to be shown for that control. The control image’s source is changed everytime when this function is called. We can call this function on mouse out and on mouse over events.

That’s all you need to do for this control.

Linking JS and Custom Control them together

This is a very simple process. You have the javascript file and you know for sure that the control will be loaded into the webpage, so you need a mechanism inside the control so that you can tell that “hey, include this javascript file whenever you have this control on a page”.

This is how you do that.

Please note that the name of the javascript file is “HoverImageButtonJS.js”. ExtendedControls is the name of the project/assembly that I have created for this custom web control.

How to assign javascript functions to the control?

Now the next problem is how would you tell the control that call this javscript function function on “mouseover”? We use OnInit function for this process. We override the function and make use of the control’s Attributes property.

What is Attributes property for anyway? Well, it adds any extra “property” or “style” that you may want to add to the control when it is rendered to the client.

Let’s see how that’s done.

Over here, I have told the class to include "onmouseover=ShowImageHoverButton(this, 'IMAGE_SOURCE')" as a property.

This is how it is rendered on the client browser:

Add the javascript file also to the AssemblyInfo.cs class

For the control library to properly include the js file, you have to add the js file in AssemblyInfo.cs class as well. This is how it is done:

[assembly: WebResource(<span style="color:#006080;">"ExtendedControls.HoverImageButtonJS.js"</span>, <span style="color:#006080;">"text/javascript"</span>)]

Test Drive!

That’s all. A few simple steps and your control is ready to be tested. Still, let’s not rush and see the steps required:

Easy as it may sound but it may not be that smooth a ride for you.

Just take care of few pointers and you should be fine. Here they go:

Here’s all the code in case somebody needs it:

comments powered by Disqus