How to use Button Control in ASP.NET

How to use Button Control in ASP.NET

0 471

Fundamental about button control in and their uses.

How to use Button Control in ASP.NET

In this article I will give you detailed information about how to use button control in, their types and uses.

Button controls are used to submit the form data to server. Form data may be any registration form, Login form, I Agree agreement or any thing else. When we click on button control then an incident happens and that is called “postback”. I will tell you about postback in this article later. First let’s understand that how many types are there of button control and how it is used in a web form. E t

The button control is of 3 types.

  1. Button
  2. LinkButton
  3. ImageButton

All these controls are same in behavior the only difference is in their appearance. Button control and LinkButton control are given text value for their name while ImageButton control is given an image URL to give a visual look. Let’s first understand the behavior of button control which is same, then we will understand the difference among them.

Behavior of button control in

Let’s insert a button control in a page, then give a line break and then insert System Date and Time below it. To insert a button control click on Toolbox and then either drag button control to your web form or double click on it. When you insert a button control in your web form then it looks like as below:

<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

In above coding you may change the ID and Text value to your desired value. Now give a line break. After line break we will insert a label control and we will give current date and time to this label programmatically. The whole coding in web form is as below:


<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

<br />

<asp:Label ID=”date-time” runat=”server”></asp:Label>


Now just turn to .aspx.cs page to give some hands to programming. The programming coding will be as below ( The Programming section will be discussed in another article):

protected void Page_Load(object sender, EventArgs e)


lbldatetime.Text = DateTime.Now.ToString();


Now when you run the program then you see a button with text Button and current date and time below it. Now note the date and time in your mind up seconds. When you click on button control after few seconds then notice the difference. You will find that when you click on button control then page reloads and the time changes. You may see that each time you click time change to current date and time. It means that button control submit the web form to the server each time we click on it. This is the fundamental behavior of each button control either it is button control, LinkButton control or ImageButton control. Now let’s study some common properties of button controls.

onclick: This event is a server side event and it is used to fire any coding. After page load when we want to execute any particular coding then we can do that using onclick event. To create onclick event for a button control just turn to design mode and then right click on button interface and then click on property. In property window click on event category in top right and then you may see Click under Action heading. Now click on attribute section and press enter. After pressing enter onclick event generates and the control transfers to .aspx.cs page. In .aspx.cs page you may see the following coding:

protected void Button1_Click(object sender, EventArgs e)




View the following video to understand this trick.


Another button type is LinkButton control. It has a property CommandName and CommandArgument which will be discussed later in details in another article. It’s coding is as below:


<asp:LinkButton ID=”LinkButton1″ runat=”server”>LinkButton</asp:LinkButton>


And the last one is Imagebutton control. When you insert this control from toolbox then its coding looks like as below:

<asp:ImageButton ID=”ImageButton1″ runat=”server” />

To assign image to this imagebutton just follow the following coding:


<asp:ImageButton ID=”ImageButton1″ runat=”server” ImageUrl=”~/images/facebook.jpg” />

To understand the working of above coding follow the following video:


That’s all about button control in brief. We will more describe button control in another article. Happy coding 🙂



Leave a Reply