In this tutorial, I will teach you some of the most commonly used ASP.Net controls e.g Label, Image, ImageButton, Button, CheckBox, ListBox e.t.c.
-
Label Control
- Textbox Control
- ListBox Control
- RadioButton Control
- CheckBox Control
- Button Control
- ImageButton Control
- Image Control
Controls can be added either by dragging the control from the tools box or by typing them directly on the HTML source of the web form as below.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="This is a Label control" /><br/>
<asp:TextBox ID="TextBox1" Text="This is a TextBox control" runat="server"/><br/>
<asp:Button ID="Button1" runat="server" Text="This is a Button Control" />
<br/>
<asp:ImageButton ID="ImageButton1" runat="server" Width="100" Height="100" ImageUrl="" AlternateText="This is an ImageButton Control" />
<br>
<asp:Image ID="Image1" runat="server" Width="100" Height="100" ImageUrl="" AlternateText="This is an Image Control" />
<br>
<asp:RadioButton ID="RadioButton1" runat="server" Text="This is a RadioButton Control" />
<br>
<asp:CheckBox ID="CheckBox1" runat="server" Text="This is a RadioButton Control" />
<br>
</div>
</form>
</body>
</html>
The label control is used to display a text or a message to the user on the form. The label control is used along with other controls to pass information. Common examples is when a label is added along with the textbox control. The label gives an indication to the user on what is expected to input.
Below are some of the properties of a Label Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BackColor: It is used to set background color of the label.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
Font:It is used to set font for the label text.
ForeColor: It is used to set color of the label text.
Text: It is used to set text to be shown for the label.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a Label Control to our web form. We are going to add three Labels with Text property set as "This is Label control 1", "This is Label control 2", "This is Label control 3"
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding Label Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server"><div>
<asp:Label ID="Label1" Text="This is Label control 1" runat="server"/>
<br>
<asp:Label ID="Label2" Text="This is Label control 2" runat="server"/>
<br>
<asp:Label ID="Label3" Text="This is Label control 3" runat="server"/>
</div>
</form>
</body>
</html>
Though we can set Label text from HTML source, there might be times that you will need to change Label text dynamically based on condition. Below is a simple demonstration of changing Label text in Codebehind.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Label1.Text = "Hi, am Label1. And you?"
Label2.Text = "Hi, am Label2. And you?"
Label3.Text = "Hi, am Label3. And you?"
End Sub
A TextBox is used for accepting inputs from users on the Web form. The TextBox is what web designers used to accept users input for processing and output result as well.
Below are some of the properties of a TextBox Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BackColor: It is used to set background color of the label.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
Font:It is used to set font for the label text.
ForeColor: It is used to set color of the label text.
Text: It is used to set text to be shown for the label.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a TexBox controls to web form. We will add three TextBoxes with Text property set as "This is TextBox control 1", "This is TextBox control 2", "This is TextBox control 3"
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding Label Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server"><div>
<asp:TextBox ID="TextBox1" runat="server" Text="This is a TexBox control 1"/>
<br/>
<asp:TextBox ID="TextBox2" runat="server" Text="This is a TexBox control 2"/>
<br/>
<asp:TextBox ID="TextBox3" runat="server" Text="This is a TexBox control 3"/>
</div>
</form>
</body>
</html>
#Assessing Label Control in Codebehind
Though we can set Label text from HTML source, there might be times that you will need to change Label text dynamically based on condition. Below is a simple demonstration of changing Label text in Codebehind.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
TextBox1.Text = "Hi, am TextBox1. And you?"
TextBox2.Text = "Hi, am TextBox2. And you?"
TextBox3.Text = "Hi, am Textbox3. And you?"
End Sub
A ListBox is used to display list of items on the Web form.
When you have multiple items to present to your Web application users, then ListBox can play a good role.
Below are some of the properties of a Label Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BackColor: It is used to set background color of the label.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
Font:It is used to set font for the label text.
ForeColor: It is used to set color of the label text.
Text: It is used to set text to be shown for the label.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a ListBox Control to our web form. We are going to add three ListBox with Text property set as "This is ListBox control 1", "This is ListBox control 2", "This is ListBox control 3"
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding ListBox Control To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server"><div>
<asp:ListBox ID="ListBox1" runat="server" Text="This is a ListBox control 1" />
<br/>
<asp: ListBox ID="ListBox2" runat="server" Text="This is a ListBox control 2" />
<br/>
<asp:ListBox ID="ListBox3" runat="server" Text="This is a ListBox control 3" />
<br/>
</div>
</form>
</body>
</html>
#Assessing ListBox Control in Codebehind
Though we can set ListBox items from properties window during design, there might be times that you will need to change ListBox items dynamically based on condition. Below is a simple demonstration of changing ListBox items in Codebehind during page load.
Below, number from 1 to 5 will be added to ListBox2 items, 6 to 10 ListBox2 items and 11 to 15 as ListBox3 items.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
For i = 1 To 5
ListBox1.Items.Add(i)
Next
For i = 6 To 10
ListBox2.Items.Add(i)
Next
For i = 11 To 15
ListBox3.Items.Add(i)
Next
End Sub
A Radio button is used to showcase a list of items out of which the user can choose one.
A very good example is when a user is filling a form online and the gender/sex is required. In this case, a user can either choose Male or Female.
Below are some of the properties of a RadioButton Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BackColor: It is used to set background color of the label.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
Font:It is used to set font for the label text.
ForeColor: It is used to set color of the label text.
Text: It is used to set text to be shown for the label.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a RadioButton Control to our web form. We are going to add three RadioButtons with Text property set as "RadioButton1", "RadioButton2", "RadioButton3"
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding RadioButton Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="RadioButton1" runat="server" Text="RadioButton1" />
<br/>
<asp:RadioButton ID="RadioButton2" runat="server" Text="RadioButton2" />
<br/>
<asp:RadioButton ID="RadioButton3" runat="server" Text="RadioButton3" />
<br/>
</div>
</form>
</body>
</html>
Though we can set RadioButton text from HTML source, there might be times that you will need to change RadioButton text dynamically based on condition. Below is a simple demonstration of changing RadioButton text in Codebehind.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
RadioButton1.Text = "Male"
RadioButton2.Text = "Female"
Label3.Text = "Rather Not Say"
End Sub
A checkbox is used to provide a list of options in which the user can choose multiple choices.
Below are some of the properties of a CheckBox Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BackColor: It is used to set background color of the label.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
Font:It is used to set font for the label text.
ForeColor: It is used to set color of the label text.
Text: It is used to set text to be shown for the label.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a CheckBox Control to our web form.
Let's see how we can implement this with an example shown below. We will add three checkboxes to our Web forms. These checkboxes will provide an option to the user on the most preferred languages PhP, ASP and ASP.Net.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding CheckBox Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="CheckBox1" runat="server" Text="PhP" />
<br/>
<asp: CheckBox ID="CheckBox2" runat="server" Text="ASP" />
<br/>
<asp:CheckBox ID="CheckBox3" runat="server" Text="ASP.Net" />
<br/>
</div>
</form>
</body>
</html>
From codebehind, we are going to mark or select all the CheckBoxes.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
CheckBox1.Check = True
CheckBox2.Check = True
CheckBox3.Check = True
End Sub
A button is used to allow the user to click on a button which would then start the processing of the form.
Below are some of the properties of a Button Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BackColor: It is used to set background color of the label.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
Font:It is used to set font for the label text.
ForeColor: It is used to set color of the label text.
Text: It is used to set text to be shown for the label.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a Button Control to our web form. We are going to add three Buttons with Text property set as "This is Button control 1", "This is Button control 2", "This is Button control 3"
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding Label Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="This is a Button control 1" />
<br/>
<asp:Button ID="Button2" runat="server" Text="This is a Button control 2" />
<br/>
<asp:Button ID="Button3" runat="server" Text="This is a Button control 3" />
<br/>
</div>
</form>
</body>
</html>
Though we can set Button text from HTML source, there might be times that you will need to change Button text dynamically based on condition. Below is a simple demonstration of changing Label text in Codebehind.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Button1.Text = "Hi, am Button1. And you?"
Button2.Text = "Hi, am Button2. And you?"
Button3.Text = "Hi, am Button3. And you?"
End Sub
When working with a web form, you can add events to controls. An event is something that happens when an action is performed. Probably the most common action is the clicking of a button on a form.
In web forms, you can add code to the corresponding aspx.vb file. This code can be used to perform certain actions when a button is clicked on the form. This is generally the most common event in Web Forms. Let's see how we can achieve this.
We are going to make this simple. Just add an event to the button control to display the name which was entered by the user. Let's follow the below steps to achieve this.
The btnSubmit_Click event is automatically added by Visual Studio when you double click the button in the web forms designer.
Protected Sub btnsubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
Response.Write("Your name is: " & txtname.Text & " " & txtothername.Text
End Sub
The image button is used to display a clickable image,and a control that displays an image and responds to mouse clicks on the image.
Below are some of the properties of a Button Control
AccessKey: It is used to set keyboard shortcut for the label.
TabIndex The tab order of the control.
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
AlternateText: It is used to set text to be shown if image failed to load.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
ImageUrl: It is used to specify path of image to be displayed
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a ImageButton Control to our web form.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding ImageButton Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ImageButton ID="ImageButton1" runat="server" AlternateText="This is a ImageButton control 1" ImageUrl = "https://www.emmason247.com.ng/nature/2.jpg" Width="100%" Height="200px" />
<br/>
</div>
</form>
</body>
</html>
Though we can set ImageButton ImageUrl from HTML source, there might be times that you will need to change ImageButton ImageUrl dynamically based on condition. Below is a simple demonstration of changing ImageButton ImageUrl in Codebehind.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
ImageButton1.ImageUrl = "image location"
End Sub
Just like the way we used Button named btnsubmit to demonstrate click event, you can also use ImageButton in place of Button Control if you choose. Below is example
Protected Sub btnsubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
Response.Write("Your name is: " & txtname.Text & " " & txtothername.Text
End Sub
The image control is used to display image on a web form. Unlike the ImageButton control, image control does not have a server side click event except client side.
Below are some of the properties of a Button Control
BorderColor:It is used to set border color of the label.
BorderWidth: It is used to set width of border of the label.
AlternateText: It is used to set text to be shown if image failed to load.
ToolTip: It displays the text when mouse is over the label.
Visible: To set visibility of control on the form.
ImageUrl: It is used to specify path of image to be displayed
Height: It is used to set height of the control.
Width: It is used to set width of the control.
Let's see how we can add a Image Control to our web form.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" EnableViewState="true" Debug="true" Trace="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Adding Image Controls To Web Form Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" AlternateText="This is a Image control 1" ImageUrl = "https://www.emmason247.com.ng/nature/2.jpg" Width="100%" Height="200px" />
<br/>
</div>
</form>
</body>
</html>
Just as we set ImageButton ImageUrl from codebehind, you can also set Image control ImageUrl same way. Below is a simple demonstration of changing Image control ImageUrl in Codebehind.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
Image1.ImageUrl = "image location"
End Sub
In ASP.Net, you can add the standard controls to a form such as labels, textboxes, listboxes, etc.
Each control can have an event associated with it. The most common event is the button click event. This is used when information needs to be submitted to the web server.