Standard Controls
Standard Controls
Property Description
Text The text displayed on the button. This is for button and link button
controls only.
ImageUrl For image button control only. The image to be displayed for the button.
AlternateText For image button control only. The text to be displayed if the browser
cannot display the image.
CausesValidation Determines whether page validation occurs when a user clicks the
button. The default is true.
CommandName A string value that is passed to the command event when a user clicks
the button.
CommandArgument A string value that is passed to the command event when a user clicks
the button.
PostBackUrl The URL of the page that is requested when the user clicks the button.
Text Boxes and Labels
Text box controls are typically used to accept input from the user. A text box control
can accept one or more lines of text depending upon the settings of the TextMode
attribute.
Label controls provide an easy way to display text which can be changed from one
execution of a page to the next. If you want to display text that does not change,
you use the literal text.
Basic syntax of text control:
<asp:TextBox ID="txtstate" runat="server" ></asp:TextBox>
Property Description
TextMode Specifies the type of text box. SingleLine creates a standard text box,
MultiLIne creates a text box that accepts more than one line of text and
the Password causes the characters that are entered to be masked. The
default is SingleLine.
MaxLength The maximum number of characters that can be entered into the text
box.
Wrap It determines whether or not text wraps automatically for multi-line text
box; default is true.
ReadOnly Determines whether the user can change the text in the box; default is
false, i.e., the user can not change the text.
Columns The width of the text box in characters. The actual width is determined
based on the font that is used for the text entry.
Rows The height of a multi-line text box in lines. The default value is 0,
means a single line text box.
The mostly used attribute for a label control is 'Text', which implies the text
displayed on the label.
Check Boxes and Radio Buttons
A check box displays a single option that the user can either check or uncheck and
radio buttons present a group of options from which the user can select just one
option.
To create a group of radio buttons, you specify the same name for the GroupName
attribute of each radio button in the group. If more than one group is required in a
single form, then specify a different group name for each group.
If you want check box or radio button to be selected when the form is initially
displayed, set its Checked attribute to true. If the Checked attribute is set to true for
multiple radio buttons in a group, then only the last one is considered as true.
Basic syntax of check box:
<asp:CheckBox ID= "chkoption" runat= "Server">
</asp:CheckBox>
Property Description
Text The text displayed next to the check box or radio button.
List Controls
ASP.NET provides the following controls
Drop-down list,
List box,
Radio button list,
Check box list,
Bulleted list.
These control let a user choose from one or more items from the list. List boxes and
drop-down lists contain one or more list items. These lists can be loaded either by
code or by the ListItemCollection editor.
Basic syntax of list box control:
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
</asp:ListBox>
Property Description
Items The collection of ListItem objects that represents the items in the
control. This property returns an object of type ListItemCollection.
Rows Specifies the number of items displayed in the box. If actual list
contains more rows than displayed then a scroll bar is added.
SelectedIndex The index of the currently selected item. If more than one item is
selected, then the index of the first selected item. If no item is selected,
the value of this property is -1.
The value of the currently selected item. If more than one item is
selected, then the value of the first selected item. If no item is selected,
the value of this property is an empty string ("").
SelectedValue
Property Description
The ListItemCollection
The ListItemCollection object is a collection of ListItem objects. Each ListItem object
represents one item in the list. Items in a ListItemCollection are numbered from 0.
When the items into a list box are loaded using strings like:
lstcolor.Items.Add("Blue"), then both the Text and Value properties of the list item
are set to the string value you specify. To set it differently you must create a list item
object and then add that item to the collection.
The ListItemCollection Editor is used to add item to a drop-down list or list box. This
is used to create a static list of items. To display the collection editor, select edit
item from the smart tag menu, or select the control and then click the ellipsis button
from the Item property in the properties window.
Common properties of ListItemCollection:
Property Description
Item(integer) A ListItem object that represents the item at the specified index.
Methods Description
Add(string) Adds a new item at the end of the collection and assigns the string
parameter to the Text property of the item.
Insert(integer, ListItem) Inserts the item at the specified index location in the collection.
Remove(string) Removes the item with the text value same as the string.
OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
</asp:RadioButtonList>
RepeatLayout This attribute specifies whether the table tags or the normal html flow to
use while formatting the list when it is rendered. The default is Table.
RepeatDirection It specifies the direction in which the controls to be repeated. The values
available are Horizontal and Vertical. Default is Vertical.
RepeatColumns It specifies the number of columns to use when repeating the controls;
default is 0.
Property Description
BulletStyle This property specifies the style and looks of the bullets, or numbers.
RepeatDirection It specifies the direction in which the controls to be repeated. The values
available are Horizontal and Vertical. Default is Vertical.
RepeatColumns It specifies the number of columns to use when repeating the controls;
default is 0.
HyperLink Control
The HyperLink control is like the HTML <a> element.
Basic syntax for a hyperlink control:
<asp:HyperLink ID="HyperLink1" runat="server">
HyperLink
</asp:HyperLink>
Property Description
Image Control
The image control is used for displaying images on the web page, or some
alternative text, if the image is not available.
Basic syntax for an image control:
<asp:Image ID="Image1" runat="server">
Property Description
Label control
Label control and the Literal control are used to display text in a page. Literal
control only supports text property, but the Label control has a number of
formatting properties.
By default, a Label control renders its content in an HTML <span> tag. After
executing your application, you can see the respective label <span> tag by
using view source on the browser.
Literal control
It is light weight control. The Literal Control is similar to the Label Control but
it does not support properties like BackColor, ForeColor, BorderColor,
BorderStyle, BorderWidth, etc. Also you cannot apply a style to a literal
control. It is used to display static text on a Web page without adding
additional properties or HTML tags.
TextBox control
The TextBox control is frequently used and one of the most important
control. It is used to collect information from a user. It is an input control
which is used to input the data.
SingleLine
MultiLine
Password
SingleLine mode is default mode of textbox control and allows the user to
enter data in a single line of text.
Password mode masks (text is hidden) the values entered by the user.
MultiLine mode enables user to enter text in more than one line. You can
use MultiLine mode, in combination with the Columns and Rows properties.
Column specifies the number of columns (Width) and rows specify the
number of rows (Height) to display.
TextChanged: It fires, when you change the content or text of the textbox
control. TextChanged event only fire, when AutoPostBack property has the
value True. By default AutoPostBack property has the value false.
If you change the text of the TextBox control and press tab key from the
keyboard, the form is automatically posted back to the server.
Button Controls
There are three types of button control available in ASP.NET:
Button
Link Button
Image Button
Button control
Button control postbacks the web page to webserver, when user clicks the
button. A Button control can be used as a submit button (default) or a
command button.
You can also use Button control as a command button. It is useful when you
want to group a set of buttons. Button control has property called
CommandName. Assign unique CommandName value for each button.
Create a single command event handler explicitly, that will handle the event
of all command buttons.
Suppose that you have four buttons as given below and want to create all
buttons as a command button.
Example: Default.aspx
Default.aspx.cs
using System;
using System.Web.UI.WebControls;
using System.Drawing;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Navigate_Command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "First":
Response.Write("First");
break;
case "Previous":
Response.Write("Previous");
break;
case "Next":
Response.Write("Next");
break;
case "Last":
Response.Write("Last");
break;
}
}
}
LinkButton
OnClick: Attach a server side method that will fire when this button will be
clicked.
OnClientClick: You can attach a client-side script that executes when the
LinkButton is clicked.
ImageButton
Let us take an example that will show the use of TextBox and Different type
of Button.
Example: Default.aspx
CheckBox Control
A CheckBox control is used to select a single or multiple options from the
available choices. For example a person can select more than one cities for
travelling.
Text: It is used to get or set the text associated with the check box control.
This is a string property.
TextAlign: It enables you to set the text right or left of the check box. By
default TextAlign property is set to right.
AutoPostBack: If you want that when you change the status of checkbox
(check or uncheck), then set AutoPostBack property true. By default this
property is set to false.
Methods:
Focus(): It sets the input focus, to a specific checkbox. Call this method for
that check box control.
Events:
CheckedChanged: This event is fired when the checked status of the
checkbox control is changed. AutoPostBack property should be set as true to
fire this event.
RadioButton Control
Radio Button control is used, when you want to select only one option from
the available choices. RadioButton control works in a group. There may be
more than one group of radio button. You can select only one RadioButton
control from particular radio button group.
Most of the properties and events are same as CheckBox control but
GroupName property is different.
When you use RadioButton, they are not in a group. You can select more
than one RadioButton, they are not mutually exclusive. You have to form the
group of radio button as above given example. You can create group by
assigning similar GroupName to RadioButton.
Let us take one example and we will use all the controls that we have
discussed till now.
In this example, when user fill all the details and click on submit button, the
information will came in last multiline textbox. When user clicks on cancel
button, all fields will be empty.
Example
using System;
public partial class EmployeeForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string Name ="Name: "+ txtName.Text;
string Email ="Email: "+ txtEmailID.Text;
string Gender="" ;
if(RDBmale.Checked)
{
Gender ="Gender: "+ RDBmale.Text;
}
if (RDBfemale.Checked)
{
Gender = "Gender: " + RDBfemale.Text;
}
string Cities = "";
if(chbAgra.Checked)
{
Cities +=chbAgra.Text+"\n";
}
if (chbDelhi.Checked)
{
Cities += chbDelhi.Text + "\n";
}
if (chbPune.Checked)
{
Cities += chbPune.Text + "\n";
}
string Address ="Address:"+ txtAddress.Text;
txtResult.Text = Name + "\n" + Email+"\n"+Gender+"\n"+"City:
"+Cities +"\n" +Address;
}
protected void btnCancel_Click(object sender, EventArgs e)
{
txtName.Text = String.Empty;
txtPassword.Text = String.Empty;
txtAddress.Text = String.Empty;
txtEmailID.Text = String.Empty;
RDBfemale.Checked = false;
RDBmale.Checked = false;
chbPune.Checked = false;
chbAgra.Checked = false;
chbDelhi.Checked = false;
txtResult.Text= String.Empty;
}
}
Output:
Field Control ID
BorderColor: Enables you to set the color of a border rendered around the label.
BorderStyle: Enables you to display a border around the label. Possible values are NotSet, N
Double, Groove, Ridge, Inset, and Outset.
BorderWidth: Enables you to set the size of a border rendered around the label.
CssClass: Enables you to associate a Cascading Style Sheet class with the label.
ToolTip: Enables you to set a label’s title attribute. (In Microsoft Internet Explorer, the title attr
tooltip.)
Example: -
<html>
<script runat="server">
void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = ("Welcome, " + TextBox1.Text);
}
</script>
<head runat="server">
<title>Basic ASP.NET Web Page</title>
</head>
<body>
<form id="form1" runat="server">
<h1>Welcome to ASP.NET</h1>
<p>Type your name and click the button.</p>
<p>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server"
Text="Click" OnClick="Button1_Click" />
</p>
<p>
<asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</form>
</body>
</html>
ASP.NET Literal Control:
The Literal control is similar to the Label control. You can use the Literal control to display text or H
However, unlike the Label control, the Literal control does not render its content in
The Literal control does support one property not supported by the Label control: the Mode property. The
to encode HTML content and accepts any of the following three values: -
Encode: Displays the contents of the control after HTML encoding the content.
Transform: Displays the contents of the control after stripping markup not support- ed by the reque
Example: -
<html>
<head>
<title>Literal Example</title>
<script runat="server">
void ButtonClick(Object sender, EventArgs e)
{
Literal1.Text="Welcome to ASP.NET!!";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>Literal Example</h3>
<asp:Literal id="Literal1"
Text="Hello World!!"
Mode=”PassThrough”
runat="server"/>
<br /><br />
<asp:Button id="Button1"
Text="Change Literal Text"
OnClick="ButtonClick"
runat="server"/>
</form>
</body>
</html>
ASP.NET TextBox Control:
The TextBox control is used to create a text box where the us
Text box controls are typically used to accept input from the user. A text box control can accept one or m
upon the setting of the TextMode attribute. The TextMode property accepts the following three values:
SingleLine: Displays a single-line input field.
The TextBox control also supports the following method and event:
Focus: Enables you to set the initial form focus to the text box.
TextChanged Raised on the server when the contents of the text box are changed.
Example: -
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
public class Form1 : Form
{
private TextBox textBox1;
public Form1()
{
InitializeComponent();
}
private void InitializeComponent()
{
this.textBox1 = new System.Windows.Forms.TextBox();
this.SuspendLayout();
//
// textBox1
//
this.textBox1.AcceptsReturn = true;
this.textBox1.AcceptsTab = true;
this.textBox1.Dock = System.Windows.Forms.DockStyle.Fill;
this.textBox1.Multiline = true;
this.textBox1.ScrollBars = System.Windows.Forms.ScrollBars.Vertical;
//
// Form1
//
this.ClientSize = new System.Drawing.Size(284, 264);
this.Controls.Add(this.textBox1);
this.Text = "TextBox Example";
this.ResumeLayout(false);
this.PerformLayout();
}
[STAThread]
static void Main()
{
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new Form1());
}
}
ASP.NET CheckBox Control:
The CheckBox control is used to display a
A check box displays a single option that the user can either check or uncheck and radio buttons pres
which the user can select just
The CheckBox control supports the following properties, method and event:
AccessKey: Enables you to specify a key that navigates to the TextBox control.
AutoPostBack: Enables you to post the form containing the CheckBox back to the server automa
checked or unchecked.
TextAlign: Enables you to align the label for the check box. Possible values are Left and Right.
Focus: Enables you to set the initial form focus to the check box.
CheckedChanged: Raised on the server when the check box is checked or unchecked.
Example: -
private void HandleCheck(object sender, RoutedEventArgs e)
{
text1.Text = "The CheckBox is checked.";
}
private void HandleUnchecked(object sender, RoutedEventArgs e)
{
text1.Text = "The CheckBox is unchecked.";
}
private void HandleThirdState(object sender, RoutedEventArgs e)
{
text1.Text = "The CheckBox is in the indeterminate state.";
}
ASP.NET RadioButton Control:
The RadioButton control is used to display a radio button. To create a set of radio buttons using data bind
control!
To create a group of radio buttons, you specify the same name for the GroupName attribute of each radio
than one group is required in a single form specify a different group n
The RadioButton control supports the following properties, method and event:
AccessKey: Enables you to specify a key that navigates to the RadioButton control.
AutoPostBack: Enables you to post the form containing the RadioButton back to the server a
button is checked or unchecked.
Checked: Enables you to get or set whether the RadioButton control is checked.
TabIndex: Enables you to specify the tab order of the RadioButton control.
TextAlign: Enables you to align the RadioButton label. Possible values are Left and Right.
Focus: Enables you to set the initial form focus to the RadioButton control.
CheckedChanged: Raised on the server when the RadioButton is checked or unchecked.
Example: -
<html>
<body>
<form runat="server">
Select your favorite color:
<br>
<asp:RadioButton id="red" Text="Red" Checked="True"
GroupName="colors" runat="server"/>
<br>
<asp:RadioButton id="green" Text="Green"
GroupName="colors" runat="server"/>
<br>
<asp:RadioButton id="blue" Text="Blue"
GroupName="colors" runat="server"/>
<br>
<asp:Button text="Submit" OnClick="submit" runat="server"/>
<p><asp:Label id="Label1" runat="server"/></p>
</form>
</body>
</html>
ASP.NET Button Control:
The Button control is used to display a push button. The push button may be a submit button or a comm
control is a submit
A command button has a command name and allows you to create multiple Button controls on a page. It
handler to control the actions performed when the command
A submit button does not have a command name and it posts the page back to the server when it is click
event handler to control the actions performed when the submit
The Button control supports the following properties, method and event:
AccessKey: Enables you to specify a key that navigates to the Button control.
CommandArgument: Enables you to specify a command argument passed to the Command even
CommandName: Enables you to specify a command name passed to the Command event.
Enabled: Enables you to disable the Button control.
OnClientClick: Enables you to specify a client-side script that executes when the button is clicked
TabIndex: Enables you to specify the tab order of the Button control.
Focus: Enables you to set the initial form focus to the Button control.
Command: Raised when the Button control is clicked. The CommandName and CommandArgume
Example: -
<html>
<body>
<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit" runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>
</body>
</html>
ASP.NET LinkButton Control:
The LinkButton control is used to create a hyperlink button. This control looks like a HyperLink control bu
as the Button
The CheckBox control supports the following properties, method and event:
AccessKey: Enables you to specify a key that navigates to the Button control.
CommandArgument: Enables you to specify a command argument passed to the Command even
CommandName: Enables you to specify a command name passed to the Command event.
OnClientClick: Enables you to specify a client-side script that executes when the LinkButton is clic
TabIndex: Enables you to specify the tab order of the LinkButton control.
Text: Enables you to label the LinkButton control.
Focus: Enables you to set the initial form focus to the LinkButton control
Command: Raised when the LinkButton control is clicked. The CommandName and CommandA
event.
Example: -
<html>
<head>
<title>LinkButton Example</title>
<script language="C#" runat="server">
void LinkButton_Click(Object sender, EventArgs e)
{
Label1.Text="You clicked the link button";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>LinkButton Example</h3>
<asp:LinkButton id="LinkButton1"
Text="Click Me"
Font-Names="Verdana"
Font-Size="14pt"
OnClick="LinkButton_Click"
runat="server"/>
<br />
<asp:Label id="Label1" runat="server" />
</form>
</body>
</html>
ASP.NET ImageButton Control:
The ImageButton control is used to display a clickable image.The ImageButton control, like the Butt
enables you to post a form to
The ImageButton control supports the following properties, method and event:
AccessKey: Enables you to specify a key that navigates to the ImageButton control.
AlternateText: Enables you to provide alternate text for the image (required for accessibility).
DescriptionUrl: Enables you to provide a link to a page that contains a detailed description of th
complex image accessible).
CommandArgument: Enables you to specify a command argument that is passed to the Comman
CommandName: Enables you to specify a command name passed to the Command event.
ImageAlign: Enables you to align the image relative to other HTML elements in the page. Pos
AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
ImageUrl: Enables you to specify the URL to the image.
OnClientClick: Enables you to specify a client-side script that executes when the ImageButton is c
TabIndex: Enables you to specify the tab order of the ImageButton control.
Focus: Enables you to set the initial form focus to the ImageButton control.
Command: Raised when the ImageButton control is clicked. The CommandName and Command
event.
Example: -
<html>
<head>
<title>ImageButton Sample</title>
<script language="C#" runat="server">
void ImageButton_Click(object sender, ImageClickEventArgs e)
{
Label1.Text = "You clicked the ImageButton control at the coordinates: (" +
e.X.ToString() + ", " + e.Y.ToString() + ")";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h3>ImageButton Sample</h3>
Click anywhere on the image.<br /><br />
<asp:ImageButton id="imagebutton1" runat="server"
AlternateText="ImageButton 1"
ImageAlign="left"
ImageUrl="images/pict.jpg"
OnClick="ImageButton_Click"/>
<br /><br />
<asp:label id="Label1" runat="server"/>
</form>
</body>
</html>
ASP.NET Image Control:
The image control is used for displaying images on the web page, or some alternative text, if the image
control is used to display
The Image control supports the following properties:
AlternateText: Enables you to provide alternate text for the image (required for accessibility).
DescriptionUrl: Enables you to provide a link to a page that contains a detailed description of th
complex image accessible).
ImageAlign: Enables you to align the image relative to other HTML elements in the page. Pos
AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
Example: -
<script runat=”server”>
void Page_Load()
{
Random rnd = new Random();
switch (rnd.Next(3))
{
case 0:
imgRandom.ImageUrl = “Picture1.gif”;
imgRandom.AlternateText = “Picture 1”;
break;
case 1:
imgRandom.ImageUrl = “Picture2.gif”;
imgRandom.AlternateText = “Picture 2”;
break;
case 2:
imgRandom.ImageUrl = “Picture3.gif”;
imgRandom.AlternateText = “Picture 3”;
break;
}
}
</script>
<html>
<head id=”Head1” runat=”server”>
<title>Show Image</title> </head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Image id=”imgRandom” Runat=”server” />
</div>
</form>
</body>
</html>
ASP.NET ImageMap Control:
The ASP.NET ImageMap control allows you to create an image that has individual regions that users ca
spots. Each of these hot spots can be a separate hyperlink or postback event.The ImageMap control en
side image map. An image map displays an image. When you click different areas of th
An ImageMap control is composed out of instances of the HotSpot class. A HotSpot defines the clickab
The ASP.NET Framework ships with three HotSpot classes:
The ImageMap control supports the following properties, method and event:
AccessKey: Enables you to specify a key that navigates to the ImageMap control.
AlternateText: Enables you to provide alternate text for the image (required for accessibility).
DescriptionUrl: Enables you to provide a link to a page that contains a detailed description of th
complex image accessible).
HotSpotMode: Enables you to specify the behavior of the image map when you click a region. P
Navigate, NotSet, and PostBack.
HotSpots: Enables you to retrieve the collection of HotSpots contained in the ImageMap control.
ImageAlign: Enables you to align the image map with other HTML elements in the page. Poss
AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
ImageUrl: Enables you to specify the URL to the image.
TabIndex: Enables you to specify the tab order of the ImageMap control.
Focus: Enables you to set the initial form focus to the ImageMap control.
Click: Raised when you click a region of the ImageMap and the HotSpotMode prop- erty is set to t
Example: -
<html>
<head id="head1" runat="server">
<title>ImageMap Class Navigate Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>ImageMap Class Navigate Example</h3>
<h4>Shopping Choices:</h4>
<asp:imagemap id="Shop"
imageurl="Images/ShopChoice.jpg"
width="150"
height="360"
alternatetext="Shopping choices"
runat="Server">
<asp:circlehotspot
navigateurl="http://www.tailspintoys.com"
x="75"
y="290"
radius="75"
hotspotmode="Navigate"
alternatetext="Shop for toys">
</asp:circlehotspot>
<asp:circlehotspot
navigateurl="http://www.cohowinery.com"
x="75"
y="120"
radius="75"
hotspotmode="Navigate"
alternatetext="Shop for wine">
</asp:circlehotspot>
</asp:imagemap>
</form>
</body>
</html>
Comments
https://www.guru99.com/asp-net-controls.html
refer this for example
https://www.javatpoint.com/asp-net-label
https://www.ankitweblogic.com/asp/standardcontrol.php