ASP.NET - Basic Controls (2024)

ASP.NET - Basic Controls (1)

  • ASP.NET Tutorial
  • ASP.NET - Home
  • ASP.NET - Introduction
  • ASP.NET - Environment
  • ASP.NET - Life Cycle
  • ASP.NET - First Example
  • ASP.NET - Event Handling
  • ASP.NET - Server Side
  • ASP.NET - Server Controls
  • ASP.NET - HTML Server
  • ASP.NET - Client Side
  • ASP.NET - Basic Controls
  • ASP.NET - Directives
  • ASP.NET - Managing State
  • ASP.NET - Validators
  • ASP.NET - Database Access
  • ASP.NET - ADO.net
  • ASP.NET - File Uploading
  • ASP.NET - Ad Rotator
  • ASP.NET - Calendars
  • ASP.NET - Multi Views
  • ASP.NET - Panel Controls
  • ASP.NET - AJAX Control
  • ASP.NET - Data Sources
  • ASP.NET - Data Binding
  • ASP.NET - Custom Controls
  • ASP.NET - Personalization
  • ASP.NET - Error Handling
  • ASP.NET - Debugging
  • ASP.NET - LINQ
  • ASP.NET - Security
  • ASP.NET - Data Caching
  • ASP.NET - Web Services
  • ASP.NET - Multi Threading
  • ASP.NET - Configuration
  • ASP.NET - Deployment
  • ASP.NET Resources
  • ASP.NET - Quick Guide
  • ASP.NET - Useful Resources
  • ASP.NET - Discussion
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer's Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary
  • Who is Who

'; var adpushup = adpushup || {}; adpushup.que = adpushup.que || []; adpushup.que.push(function() { adpushup.triggerAd(ad_id); });

In this chapter, we will discuss the basic controls available in ASP.NET.

Button Controls

ASP.NET provides three types of button control:

  • Button : It displays text within a rectangular area.

  • Link Button : It displays text that looks like a hyperlink.

  • Image Button : It displays an image.

When a user clicks a button, two events are raised: Click and Command.

Basic syntax of button control:

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Click" / >

Common properties of the button control:

PropertyDescription
TextThe text displayed on the button. This is for button and link button controls only.
ImageUrlFor image button control only. The image to be displayed for the button.
AlternateTextFor image button control only. The text to be displayed if the browser cannot display the image.
CausesValidationDetermines whether page validation occurs when a user clicks the button. The default is true.
CommandNameA string value that is passed to the command event when a user clicks the button.
CommandArgumentA string value that is passed to the command event when a user clicks the button.
PostBackUrlThe 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>

Common Properties of the Text Box and Labels:

PropertyDescription
TextModeSpecifies 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.
TextThe text content of the text box.
MaxLengthThe maximum number of characters that can be entered into the text box.
WrapIt determines whether or not text wraps automatically for multi-line text box; default is true.
ReadOnlyDetermines whether the user can change the text in the box; default is false, i.e., the user can not change the text.
ColumnsThe width of the text box in characters. The actual width is determined based on the font that is used for the text entry.
RowsThe 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>

Basic syntax of radio button:

<asp:RadioButton ID= "rdboption" runat= "Server"> </asp: RadioButton>

Common properties of check boxes and radio buttons:

PropertyDescription
TextThe text displayed next to the check box or radio button.
CheckedSpecifies whether it is selected or not, default is false.
GroupNameName of the group the control belongs to.

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>

Basic syntax of drop-down list control:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"></asp:DropDownList>

Common properties of list box and drop-down Lists:

PropertyDescription
ItemsThe collection of ListItem objects that represents the items in the control. This property returns an object of type ListItemCollection.
RowsSpecifies the number of items displayed in the box. If actual list contains more rows than displayed then a scroll bar is added.
SelectedIndexThe 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.
SelectedValueThe 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 ("").
SelectionModeIndicates whether a list box allows single selections or multiple selections.

Common properties of each list item objects:

PropertyDescription
TextThe text displayed for the item.
SelectedIndicates whether the item is selected.
ValueA string value associated with the item.

It is important to notes that:

  • To work with the items in a drop-down list or list box, you use the Items property of the control. This property returns a ListItemCollection object which 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.

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:

PropertyDescription
Item(integer)A ListItem object that represents the item at the specified index.
CountThe number of items in the collection.

Common methods of ListItemCollection:

MethodsDescription
Add(string)Adds a new item at the end of the collection and assigns the string parameter to the Text property of the item.
Add(ListItem)Adds a new item at the end of the collection.
Insert(integer, string)Inserts an item at the specified index location in the collection, and assigns 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.
Remove(ListItem)Removes the specified item.
RemoveAt(integer)Removes the item at the specified index as the integer.
ClearRemoves all the items of the collection.
FindByValue(string)Returns the item whose value is same as the string.
FindByValue(Text)Returns the item whose text is same as the string.

Radio Button list and Check Box list

A radio button list presents a list of mutually exclusive options. A check box list presents a list of independent options. These controls contain a collection of ListItem objects that could be referred to through the Items property of the control.

Basic syntax of radio button list:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"></asp:RadioButtonList>

Basic syntax of check box list:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"></asp:CheckBoxList>

Common properties of check box and radio button lists:

PropertyDescription
RepeatLayoutThis 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.
RepeatDirectionIt specifies the direction in which the controls to be repeated. The values available are Horizontal and Vertical. Default is Vertical.
RepeatColumnsIt specifies the number of columns to use when repeating the controls; default is 0.

Bulleted lists and Numbered lists

The bulleted list control creates bulleted lists or numbered lists. These controls contain a collection of ListItem objects that could be referred to through the Items property of the control.

Basic syntax of a bulleted list:

<asp:BulletedList ID="BulletedList1" runat="server"></asp:BulletedList>

Common properties of the bulleted list:

PropertyDescription
BulletStyleThis property specifies the style and looks of the bullets, or numbers.
RepeatDirectionIt specifies the direction in which the controls to be repeated. The values available are Horizontal and Vertical. Default is Vertical.
RepeatColumnsIt 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>

It has the following important properties:

PropertyDescription
ImageUrlPath of the image to be displayed by the control.
NavigateUrlTarget link URL.
TextThe text to be displayed as the link.
TargetThe window or frame which loads the linked page.

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">

It has the following important properties:

PropertyDescription
AlternateTextAlternate text to be displayed in absence of the image.
ImageAlignAlignment options for the control.
ImageUrlPath of the image to be displayed by the control.

Advertisem*nts

';adpushup.triggerAd(ad_id); });

ASP.NET - Basic Controls (2024)

FAQs

What are the ASP.NET basic controls? ›

Basic web controls
  1. Button Web Server Control.
  2. CheckBox Web Server Control.
  3. HyperLink Web Server Control.
  4. Image Web Server Control.
  5. ImageButton Web Server Control.
  6. Label Web Server Control.
  7. LinkButton Web Server Control.
  8. Literal Web Server Control.
Jan 24, 2022

What is the difference between ASP.NET controls and HTML controls? ›

ASP is a server-side language. This means that the code that is written gets sent to the server, and it returns some code depending on what it was asked to do. HTML is a client-side language. Basically it has to do with the user interface, with which the user interacts.

What are ASP.NET web form controls? ›

ASP.NET web forms contain various web pages and GUI applications such as text box, data grid, label, checkbox, hyperlink, etc. It provides flexibility to web pages at run time as well as design time. It also provides a feature to write code in a separate file from the controls.

How to convert HTML control to ASP.NET control? ›

There are two conditions to change HTML elements to Asp.Net controls:
  1. If the HTML elements are these elements,you could add runat=server: <Img>,<Link>,<Button>,<Form>,<Table>,<Label>,<Textarea>
  2. If you need other controls,you could custome controls: <DropDownList>,<ListBox>,<CheckBox>,<GridView>,<textbox>
Dec 2, 2020

Why is ASP better than HTML? ›

ASP can easily work with any form of scripting language to install codes and algorithms into a front-end page. We can not use algorithms in HTML. HTML only approves interpreting content in a structured format and displays the same on the browser window.

What are ASP.NET security controls? ›

ASP.NET security works in conjunction with Internet Information Services (IIS) security and includes authentication and authorization services to implement the ASP.NET security model. ASP.NET also includes a role-based security feature that you can implement for both Windows and non-Windows user accounts.

Is MVC better than web forms? ›

Advantages of MVC Over Webforms

Better Control over Design: MVC has dropped concept of server controls and instead use HTML controls or HTML helpers to generate HTML controls. This gives developers better control over HTML and page design. Design time and run time variations are very few as compared to webforms.

What are the 5 controls available to design forms? ›

Design View
  • Adding the bound object frame, page break, and chart controls.
  • Editing text box control sources.
  • Resizing form sections.
  • Changing certain form properties.

What is the difference between ASP button and HTML button? ›

Asp button works on server side while html button works on client side which is used for form validation. The html button raise click event but dosen't POST the form on clicking it while the asp button does.

What is the advantage of using HTML server controls? ›

Advantages of using HTML Server Controls
  • Utilizing static tables for layout purposes.
  • Recasting an HTML page to run under ASP.NET.
  • The HTML server controls grow out of the HTML-centric object model, similar to HTML.
  • The controls can interact with the Client-side scripting.
Mar 26, 2024

Does ASP.NET use HTML? ›

ASP.NET is a free web framework for building great websites and web applications using HTML, CSS, and JavaScript.

What is user control how it differs from ASP.NET server controls? ›

A user control can include code to manipulate its contents like a page can, including performing tasks such as data binding. A user controls differs from an ASP.NET Web page in these ways: The file name extension for the user control is . ascx.

Top Articles
Latest Posts
Article information

Author: Amb. Frankie Simonis

Last Updated:

Views: 6074

Rating: 4.6 / 5 (56 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Amb. Frankie Simonis

Birthday: 1998-02-19

Address: 64841 Delmar Isle, North Wiley, OR 74073

Phone: +17844167847676

Job: Forward IT Agent

Hobby: LARPing, Kitesurfing, Sewing, Digital arts, Sand art, Gardening, Dance

Introduction: My name is Amb. Frankie Simonis, I am a hilarious, enchanting, energetic, cooperative, innocent, cute, joyous person who loves writing and wants to share my knowledge and understanding with you.