In this chapter, we will discuss the basic controls available in ASP.NET.
ASP.NET provides three different types of button controls:
Button : Displays text within a rectangular area.
Link button : displays text like a hyperlink.
Image button : Displays an image.
When the user clicks a button, two events are fired: click and command.
Basic syntax of button control:
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" / >Common properties of button controls:
| property | describe |
|---|---|
| Text | The text is displayed on the button. Controls for buttons and link buttons only. |
| ImageUrl | Only for image button controls. This image is to show the button. |
| AlternateText | Only for image button controls. If the browser cannot display the image, the replacement text will be displayed. |
| CausesValidation | Determines whether page validation is performed when the user clicks the button. Defaults to true. |
| CommandName | The string value passed to the command event when the user clicks the button. |
| CommandArgument | The string value passed to the command event when the user clicks the button. |
| PostBackUrl | The required page address appears when the user clicks the button. |
The text box control is specially designed to accept user input. A text box control can accept one or more text inputs based on the text mode property.
Label controls provide a simple way to display text from one page to the next. If you want to display a constant text, then you can use literal text.
Basic syntax for text control:
<asp:TextBox ID="txtstate" runat="server" ></asp:TextBox>Common properties for text boxes and labels:
| property | describe |
|---|---|
| TextMode | Specify the text box type. Single-line mode creates standard text, multi-line mode creates the ability to accept multiple texts, and passwords cause the characters to be marked to be entered. Default is standard text. |
| Text | The text content of the text box. |
| MaxLength | Enter the maximum value of text characters in the text box. |
| Wrap | It determines whether text in a multiline text box is automatically wrapped; the default value is True. |
| ReadOnly | Determines whether the user can change the text in the box; defaults to false, which means the user can change the text. |
| Columns | The width of the text box in characters. The actual width is determined based on the font used for text input. |
| Rows | The height of the multiline text box. The default value is 0, which represents a single-line text box. |
The most commonly used property of a label control is 'Text', which represents the text displayed on the label.
A checkbox will display an option that the user can check or deselect. Radio buttons present a group of options from which the user can select only one option.
If you are creating a group of radio buttons, you can specify the same name for the GroupName property in each radio button group. If more than one group needs to appear in a single form, specify a different group name for each group.
If you want a checkbox or radio button to be checked as it appears initially, set its checked property to true. If multiple radio buttons in a group have their property set to true, only the last one is considered true.
Basic syntax for checkboxes:
<asp:CheckBox ID= "chkoption" runat= "Server"> </asp:CheckBox>Basic syntax for radio buttons:
<asp:RadioButton ID= "rdboption" runat= "Server"> </asp: RadioButton>Common properties for checkboxes and radio buttons:
| property | describe |
|---|---|
| Text | The text that appears next to a checkbox or radio button. |
| Checked | Specify whether it is selected. The default is unselected. |
| GroupName | The name of the group to which the control belongs. |
ASP.NET provides the following controls:
drop-down list,
list box,
radio button list,
checkbox list,
Bulleted list.
These controls allow users to select from a list of one or more items. List boxes and drop-down lists contain one or more list items. These lists can be loaded through 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>Basic syntax of drop-down list control:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>Common properties for list boxes and drop-down lists:
| property | describe |
|---|---|
| Items | A collection of ListItem objects that represent the items within the control. This property returns an object of type ListItemCollection. |
| Rows | Specifies the number of items to display in the box. If the actual list contains more rows than the displayed list, scroll bars are added. |
| SelectedIndex | The index of the currently selected item. If more than one item is selected, the first index selects the item. If no item is selected, the value of this property is -1. |
| SelectedValue | The value of the currently selected item. If more than one item is selected, the value of the first item is selected. If no item is selected, the value of this property is an empty string (""). |
| SelectionMode | Indicates whether a list box allows single selection or multiple selections. |
Common properties for each list item object:
| property | describe |
|---|---|
| Text | The text displayed for the item. |
| Selected | Indicates whether the item is selected. |
| Value | A string of characters associated with the project. |
Things to focus on are:
If you want to work with items in a drop-down list or list box, you need to use the control's Item property. This property returns a ListItemCollection object that contains all the items of the list.
The SelectedIndexChanged event is raised when the user selects a different item from a drop-down list or list box.
A ListItemCollection object is a collection of ListItem objects. Each ListItem object represents an item in the list. Item numbers in a ListItemCollection start from 0.
When the string used in the loading process of items in a list box is, for example: lstcolor.Items.Add ("Blue"), then the property settings of the text and list item value are the string values you specify. In order to set it up differently, you have to create an object of the list item and then add the item to the collection.
The ListItemCollection editor is used to add items to a drop-down list or list box. It 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 click the ellipsis button in the Item Properties in the Properties window.
Common properties of ListItemCollection:
| property | describe |
|---|---|
| Item(integer) | A ListItem object representing the item at the specified index. |
| Count | The number of items in the collection. |
Basic methods of ListItemCollection:
| method | describe |
|---|---|
| Add(string) | Adds a new item to the end of the collection and assigns a string parameter to the item text property. |
| Add(ListItem) | Adds a new item to the end of the collection. |
| Insert(integer, string) | Inserts an item into the collection at the specified index position and assigns a string argument to the item text property. |
| Insert(integer, ListItem) | Inserts an item into the collection at the specified index. |
| Remove(string) | Removes items with the same string as the text value. |
| Remove(ListItem) | Remove the specified item. |
| RemoveAt(integer) | Removes the item at the specified index as an integer. |
| Clear | Removes all items from the collection. |
| FindByValue(string) | Returns the same item as the string value. |
| FindByValue(Text) | Returns the same item as the string literal. |
A radio button list presents a list of mutually exclusive options. A checkbox list column presents a list of independent options. These controls contain a collection of ListItem objects, which can be referenced through the control's Item property.
Basic syntax for radio button list:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"></asp:RadioButtonList>Basic syntax for checkbox list:
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"></asp:CheckBoxList>Common properties for checkbox and radio button lists:
| property | describe |
|---|---|
| RepeatLayout | This property specifies whether tags or plain HTML flow are used in rendering the formatted list. Default is table. |
| RepeatDirection | It specifies the direction in which the control can be repeated. Available values are horizontal and vertical. The default is vertical. |
| RepeatColumns | When the control is repeated, it specifies the number of the column; defaults to 0. |
The Bulleted List control creates a bulleted or numbered list. These controls contain a collection of ListItem objects, which can be referenced through the control's Item property.
Basic syntax for bulleted lists:
<asp:BulletedList ID="BulletedList1" runat="server"></asp:BulletedList>Common properties of bulleted lists:
| property | describe |
|---|---|
| BulletStyle | This property specifies the style and appearance of item numbers or numbers. |
| RepeatDirection | It specifies the direction in which the control can be repeated. Available values are horizontal and vertical. The default is vertical. |
| RepeatColumns | When the control is repeated, it specifies the number of the column; defaults to 0. |
Hyperlink controls are like HTML <a> elements.
Basic syntax of hyperlink control:
<asp:HyperLink ID="HyperLink1" runat="server"> HyperLink</asp:HyperLink>It has the following properties:
| property | describe |
|---|---|
| ImageUrl | The path to the image displayed by the control. |
| NavigateUrl | Target link address. |
| Text | The text displayed as a link. |
| Target | The window or frame that loads the linked page. |
If the image cannot be displayed, the image control displays the image on the web page or some alternative text.
Basic syntax of image controls:
<asp:Image ID="Image1" runat="server">It has the following important properties:
| property | describe |
|---|---|
| AlternateText | Display alternative text when the image does not exist. |
| ImageAlign | Alignment options control. |
| ImageUrl | The path to the image displayed by the control. |