This article is about creating a derived custom server control in ASP.NET which will count how many times it has been clicked. Derived
custom controls are those controls which extend the feature of the
control. Here we will discuss how we create this type of custom
control and how it is used. Firstly we have to create it and later we will use it
another application or website application. So by using the Button class we will
make it and it will extend the features of the button control in ASP.NET. First
of all we have to inherit the button class to extend the functionality of the
button class. Further we will add control to the ASP.NET toolbox item. Now we
will follow some steps to complete it which is given below.
Step 1: Firstly we are going to open the
Web server Control application let see how it will open.
Go to Visual Studio and open File->New->Project->Add ASP.NET Server Control application.
Let's see the figure given below.
Give the name as Derived Control.
Step 2: Now you have to
change the name of the ServerControl.cs file to CountingButtonClick.cs.
Step 3: Further, enter the Toolbox Data attribute for the class, change
the string "DerivedControl" to "CountingButtonClick" in both places where it
occurs. Let see how we will add it.
Step 4: Now the write code for
the class named as CountingButtonClick.cs which inherits from the base class Button.
public class CountingButtonClick :
public CountingButtonClick( )
ViewState["Count_Click"] = 0;
String s = (String)ViewState["c"];
return ((s ==
null) ? "["
+ this.ID + "]"
// firstly we have to override the OnClick to
increment the count,
// Here we have to update the button text and then invoke the base
override void OnClick(EventArgs
ViewState["Count_Click"] = ((int)ViewState["Count_Click"])
this.Text = ViewState["Count_Click"]
+ " Times it has been clicked";
protected override void RenderContents(HtmlTextWriter
Now we will
discuss about the code of .cs file. Firstly, our class
named as CountingButtonClick will inherit the Button Class which is known as the base class. After that we make a
Constructor of a class, Inside the constructor we initialize the text property
of button and also initialize view state of clicking button to 0. To ensure that
the property will return a valid value, you initialize the Count_click property
in the constructor, where you also set the initial text for the button, Further
we are going to make a property name as Count_click which is necessary to build
because every click page will be post and to preserve the value between postback
we have to set property with viewstate which is used to get the value and set
the value stored in view state. Now we have to override the Behavior of the
click event because CountingdButtonClick class derives from Button, Whenever the
user clicks the button, you will have to increase the Count_click value held in
view state and will update the text on the button to reflect the new
Step 5: Now after doing all
that we have to open a fine named as AssemblyInfo.cs and write the code given
Step 6: Now we have to
build the application by click on build solution and close it.
Step 7: Now we have to
take a website to test the application.
Step 8: Now we will add
a new project
Go to Solution Explorer
Right Click on it and add existing project
Add the Derived Control project to the website project.
Now it will appear like that.
Step 9: Right click on
Solution Explorer and set as start up project.
Step 10: Now Right
Click on Website project and add reference of the project name as
Step 11: Now it will
appear into the DerivedControl Component.
Step 12: Now if you
want to add it into the Toolbox Control then
Right Click on any control of Toolbox.
And Select Choose item.
Select the .NET Component and browse the button add the DeriveControl.dll to the .NET Component
Now the component will be added to the .NET framework component.
Click OK let see how it will appear
Step 13: We will see
that a directive has been added to the source of the default.aspx which is shown
<%@ Register assembly="DerivedControl" namespace="DerivedControl" tagprefix="DC" %>
Step 14: Now we have to
Drag and Drop the Control from the toolbox then the code will be written as like
that any control drag from the toolbox which is shown below.
<DC:CountingButtonClick ID="CountingButtonClick1" runat="server" BackColor="#FF0066" BorderColor="Lime" BorderStyle="Groove" style="z-index:
1; left: 44px;
Step 15: Now run the
web site application by pressing F5.
On Click Two
After each click it will count
the click and display text on the button.