G H Raisoni Institute of

Business Management, Jalgaon

Department of Computer Application

Department of Computer Application

Academic Year: 2022-23
Semester VI

Unit 2: ASP.NET. Controls

Course Code: BCA-CC-13

Prepared By: Prof. Kavita K. Ingale

Basic Web Form Controls

HTML Control

HTML controls are the standard HTML elements that are interpreted by the browser. They
include elements like <input>, <button>, <select>, <text area>, etc.

Characteristics:
 Standard HTML: They are pure HTML elements.
 No Server-Side Processing: They do not have built-in server-side processing capabilities.
 Static: They do not maintain any state information between postbacks.
 Client-Side: They are primarily used for client-side processing and validation.
 ID Attributes: HTML controls are accessed via their id attributes using JavaScript or jQuery.

Example
<input type="text" id="txtName" />

<button type="button" onclick="submitForm()">Submit</button>

Common HTML Controls

Text Input

<input type="text">

Used for single-line text input.

Example

<input type="text" id="txtName" name="txtName" />

Password Input

<input type="password">

Used for password entry, where the input is obscured.

Ex.

<input type="password" id="txtPassword" name="txtPassword" />

Button

<input type="button">,
<input type="submit">

EX.

<button type="button" onclick="submitForm()">Click Me</button>

<input type="submit" value="Submit" />

Checkbox
<input type="checkbox">

Used for selecting one or more options

Ex.
<input type="checkbox" id="chkAgree" name="chkAgree" />

Radio Button
<input type="radio">

Used for selecting a single option from a group.

Ex.

<input type="radio" id="rdoOption1" name="options" value="1" />

<input type="radio" id="rdoOption2" name="options" value="2" />

Dropdown List
<Select>

Server Controls
Server controls are ASP.NET controls that are processed on the server side. They are derived
from the System.Web.UI.Control class and provide more functionality than standard HTML
controls.

Characteristics:

ASP.NET Specific: They are specifically designed for ASP.NET web applications.

Server-Side Processing: They can handle server-side events and have built-in event handlers.

ViewState: They maintain state information across postbacks using ViewState.

Rich Features: They offer a wide range of features like data binding, templating, and more.

Runat="server": They must include the runat="server" attribute to be processed on the server
side.

Automatic ID Generation: ASP.NET automatically manages the control's ID, which can be
accessed using ControlName.ClientID.

Example:
<asp:TextBox ID="txtName" runat="server" />

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

Control Name Applicable Events Description

Label None It is used to display text on the
HTML page.
TextBox TextChanged It is used to create a text input
in the form.
Button Click, Command It is used to create a button.
LinkButton Click, Command It is used to create a button
that looks similar to the
hyperlink.
ImageButton Click It is used to create an
imagesButton. Here, an image
works as a Button.
Hyperlink None It is used to create a hyperlink
control that responds to a click
event.
DropDownList SelectedIndexChanged It is used to create a dropdown
list control.
ListBox SelectedIndexCnhaged It is used to create a ListBox
control like the HTML
control.
DataGrid CancelCommand, EditCommand, It used to create a frid that is
DeleteCommand, ItemCommand, used to show data. We can
SelectedIndexChanged, PageIndexChanged, also perform paging, sorting,
SortCommand, UpdateCommand, and formatting very easily
ItemCreated, ItemDataBound with this control.

DataList CancelCommand, EditCommand, It is used to create datalist that

DeleteCommand, ItemCommand, is non-tabular and used to
SelectedIndexChanged, UpdateCommand, show data.
ItemCreated, ItemDataBound
CheckBox CheckChanged It is used to create checkbox.
CheckBoxList SelectedIndexChanged It is used to create a group of
check boxes that all work
together.

RadioButton CheckChanged It is used to create radio

button.
RadioButtonList SelectedIndexChanged It is used to create a group of
radio button controls that all
work together.

Image None It is used to show image

within the page.
Panel None It is used to create a panel that
works as a container.
PlaceHolder None It is used to set placeholder
for the control.
Calendar SelectionChanged, VisibleMonthChanged, It is used to create a calendar.
DayRender We can set the default date,
move forward and backward
etc.
AdRotator AdCreated It allows us to specify a list of
ads to display. Each time the
user re-displays the page.

Table None It is used to create table.

XML None It is used to display XML
documents within the HTML.
Literal None It is like a label in that it
displays a literal, but allows
us to create new literals at
runtime and place them into
this control.

ASP.NET Web Forms Label

This control is used to display textual information on the web forms. It is mainly used to create
caption for the other controls like: textbox.
This is server side control, asp provides own tag to create label. The example is given below.
< asp:LabelID="Label1" runat="server" Text="Label" ></asp:Label>
This control has its own properties that are tabled below.
Property Description

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.

ASP.NET Web Forms TextBox

This is an input control which is used to take user input. To create TextBox either we can write
code or use the drag and drop facility of visual studio IDE.
This is server side control, asp provides own tag to create it. The example is given below.
< asp:TextBoxID="TextBox1" runat="server" ></asp:TextBox>
Server renders it as the HTML control and produces the following code to the browser.
<input name="TextBox1" id="TextBox1" type="text">
This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

MaxLength It is used to set maximum number of characters that can be entered.

Readonly It is used to make control readonly.

ASP.NET Web Forms Button

This control is used to perform events. It is also used to submit client request to the server. To
create Button either we can write code or use the drag and drop facility of visual studio IDE.
This is a server side control and asp provides own tag to create it. The example is given below.
< asp:ButtonID="Button1" runat="server" Text="Submit" BorderStyle="Solid" ToolTip="Submi
t"/>
Server renders it as the HTML control and produces the following code to the browser.
<input name="Button1" value="Submit" id="Button1" title="Submit" style="border-
style:Solid;" type="submit">
This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

ASP.NET Web Forms HyperLink

It is a control that is used to create a hyperlink. It responds to a click event. We can use it to refer
any web page on the server.
To create HyperLink either we can write code or use the drag and drop facility of visual studio
IDE. This control is listed in the toolbox.
This is a server side control and ASP.NET provides own tag to create it. The example is given
below.
< asp:HyperLinkID="HyperLink1" runat="server" Text="JavaTpoint" NavigateUrl="www.javat
point.com" ></asp:HyperLink>
Server renders it as the HTML control and produces the following code to the browser.
<a id="HyperLink1" href="wwwmjcollege.com">JavaTpoint</a>
This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

NavigateUrl It is used to set navigate URL.

Target Target frame for the navigate url.

ASP.net rich controls

ASP.NET provides large set of controls. These controls are divided into different categories,
depends upon their functionalities. The followings control comes under the rich controls
category.
 FileUpload control

 Calendar control

 MultiView control

 Wizard control

 AdRotator control

ASP.NET Web Forms FileUpload

It is an input controller which is used to upload file to the server. It creates a browse button on
the form that pop up a window to select the file from the local machine. To
implementFileUpload we can drag it from the toolbox in visual studio.
This is a server side control and ASP.NET provides own tag to create it. The example is given
below.
< asp:FileUpload ID="FileUpload1" runat="server"/>
Server renders it as the HTML control and produces the following code to the browser.
<input name="FileUpload1" id="FileUpload1" type="file">
This control has its own properties that are tabled below.

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

AllowMultiple It is used to allow upload multiple files by setting true or false.

Calendar control
Calendar control provides you lots of property and events. By using these properties and events
you can perform the following task with calendar control.

Select date., Selecting a day, a week or a month, Customize the calendar's appearance.
The Calendar control supports three important events:

Event Description

SelectionChanged This event is fired when you select a day, a week or an entire month.

DayRender This event is fired when each data cell of the calendar control is
rendered.

VisibleMonthChanged It is raised when user changes a month.

Calendar control supports SelectionMode property that allows you to select a single day, week,
or entire month.

MultiView control
MultiView control can be used when you want to create a tabbed page. In many situations, a web
form may be very long, and then you can divide a long form into multiple sub forms. MultiView
control is made up of multiple view controls. You can put multiple ASP.NET controls inside
view controls. One View control is displayed at a time and it is called as the active view. View
control does not work separately. It is always used with a Multiview control.

If working with Visual Studio 2010 or later, you can drag and drop a MultiView control onto the
form. You can drag and drop any number of View controls inside the MultiView control. The
number of view controls is depends upon the need of your application.

The MultiView control supports the following important properties

ActiveViewIndex: It is used to determine which view will be active or visible.
Views: It provides the collection of View controls contained in the MultiView control.
For understand the Multiview control, first we will create a user interface as given below.
In the given example, in Multiview control, we have taken three separate View control.

1. In First step we will design to capture Product details

2. In Second step we will design to capture Order details
3. Next we will show summary for confirmation.

Wizard Control
This control is same as MultiView control but the main difference is that, it has inbuilt
navigation buttons.

The wizard control enables you to design a long form in such a way that you can work in
multiple sub form. You can perform the task in a step by step process. It reduces the work of
developers to design multiple forms. It enables you to create multi step user interface. Wizard
control provides with built-in previous/nextfunctionality.

The Wizard control can contains one or more WizardStep as child controls. Only one
WizardStep is displayed at a time. WizardStep control has an important property called as
StepType. The StepType property determines the type of navigation buttons that will be
displayed for that step.
The possible values are:

The StepType associated with each WizardStep determines the type of navigation buttons that
will be displayed for that step. The StepTypes are:

 Start:
 Step:
 Finish:
 Complete:
 Auto:
Drag the Wizard control on the web page from toolbox, you will get the following code.

<asp:Wizard ID="Wizard1" runat="server" Height="75px" Width="140px">

<WizardSteps>
<asp:WizardStep runat="server" title="Step 1">
</asp:WizardStep>
<asp:WizardStep runat="server" title="Step 2">
</asp:WizardStep>
 </WizardSteps>
</asp:Wizard>

You can put WizardStep according to application need.

Important events of Wizard control are as follows:

 ActiveStepChanged:
 CancelButtonClick:
 FinishButtonClick:
 NextButtonClick:
 PreviousButtonClick:
Now we will create an application as we had done with MultiView control. We will create three
different WizardStep in Wizard control.

1. In First step we will design to capture Product details

2. In Second step we will design to capture Order details
3. Next we will show summary for confirmation.

AdRotator control
AdRotator control is used to display different advertisements randomly in a page. The list of
advertisements is stored in either an XML file or in a database table. Lots of websites uses
AdRotator control to display the advertisements on the web page.
Important properties of AdRotator control.

ImageUrl: The URL of the image that will be displayed through AdRotator control.
NavigateUrl: If the user clicks the banner or ad then the new page is opened according to given
URL.
AlternateText: It is used for displaying text instead of the picture if picture is not displayed. It is
also used as a tooltip.
Impressions: It is a number that sets how frequently an advertisement will appear.
Keyword: It is used to filter ads or identifies a group of advertisement.

Validation Controls

BaseValidator Class
The validation control classes are inherited from the BaseValidator class hence they inherit its
properties and methods. Therefore, it would help to take a look at the properties and the methods
of this base class, which are common for all the validation controls:

Members Description

ControlToValidate Indicates the input control to validate.

Display Indicates how the error message is shown.

EnableClientScript Indicates whether client side validation will take.

Enabled Enables or disables the validator.

ErrorMessage Indicates error string.

Text Error text to be shown if validation fails.

IsValid Indicates whether the value of the control is valid.

SetFocusOnError It indicates whether in case of an invalid control, the focus should switch to
the related input control.

ValidationGroup The logical group of multiple validators, where this control belongs.

Validate() This method revalidates the control and updates the IsValid property.

To perform validation, ASP.NET provides controls that automatically check user input and
require no code. We can also create custom validation for our application.

ASP.NET validation controls

Following are the validation controls

Validator Description

CompareValidator It is used to compare the value of an input control against a value

 of another input control.

RangeValidator It evaluates the value of an input control to check the specified

range.

RegularExpressionValidator It evaluates the value of an input control to determine whether it

matches a pattern defined by a regular expression.

RequiredFieldValidator It is used to make a control required.

ValidationSummary It displays a list of all validation errors on the Web page.

ASP.NET CompareValidator Control

 This validator evaluates the value of an input control against another input control on the
basis of specified operator.
 We can use comparison operators like: less than, equal to, greater than etc.
CompareValidator Properties

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

ControlToCompare It takes ID of control to compare with.

ControlToValidate It takes ID of control to validate.

ErrorMessage It is used to display error message when validation failed.

Operator It is used set comparison operator.

ASP.NET RangeValidator Control

 This validator evaluates the value of an input control to check that the value lies between
specified ranges.
 It allows us to check whether the user input is between a specified upper and lower
boundary. This range can be numbers, alphabetic characters and dates.
 The ControlToValidateproperty is used to specify the control to validate.
The MinimumValue and MaximumValue properties are used to set minimum and
maximum boundaries for the control.
RangeValidator Properties

Property Description

AccessKey It is used to set keyboard shortcut for the control.

TabIndex The tab order of the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

BorderWidth It is used to set width of border of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

ControlToValidate It takes ID of control to validate.

ErrorMessage It is used to display error message when validation failed.

Type It is used to set datatype of the control value.

MaximumValue It is used to set upper boundary of the range.

MinimumValue It is used to set lower boundary of the range.

ASP.NET RegularExpressionValidator Control

 This validator is used to validate the value of an input control against the pattern defined
by a regular expression.
 It allows us to check and validate predictable sequences of characters like: e-mail
address, telephone number etc.
 The ValidationExpression property is used to specify the regular expression, this
expression is used to validate input control.
RegularExpression Properties

Property Description

AccessKey It is used to set keyboard shortcut for the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

ErrorMessage It is used to set error message that display when validation fails.

ControlToValidate It takes ID of control to validate.

ValidationExpression It is used to set regular expression to determine validity.

ASP.NET RequiredFieldValidator Control

 This validator is used to make an input control required. It will throw an error if user
leaves input control empty.
 It is used to mandate form control required and restrict the user to provide data.
 The ControlToValidateproperty should be set with the ID of control to validate.
RequiredFieldValidator Properties

Property Description

AccessKey It is used to set keyboard shortcut for the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

ErrorMessage It is used to set error message that display when validation fails.

ControlToValidate It takes ID of control to validate.

ASP.NET ValidationSummary Control

 This validator is used to display list of all validation errors in the web form.
 It allows us to summarize the error messages at a single location.
 We can set DisplayMode property to display error messages as a list, bullet list or single
paragraph.
ValidationSummary Properties

Property Description
AccessKey It is used to set keyboard shortcut for the control.

BackColor It is used to set background color of the control.

BorderColor It is used to set border color of the control.

Font It is used to set font for the control text.

ForeColor It is used to set color of the control text.

Text It is used to set text to be shown for the control.

ToolTip It displays the text when mouse is over the control.

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.

ShowMessageBox It displays a message box on error in up-level browsers.

ShowSummary It is used to show summary text on the form page.

ShowValidationErrors It is used to set whether the validation summary should be shown or not.

CustomValidator
 The CustomValidator control allows writing application specific custom validation
routines for both the client side and the server side validation.
 The client side validation is accomplished through the ClientValidationFunction property.
The client side validation routine should be written in a scripting language, such as
JavaScript or VBScript, which the browser can understand.
 The server side validation routine must be called from the control's ServerValidate event
handler. The server side validation routine should be written in any .Net language, like
C# or VB.Net.
The basic syntax for the control is as given:
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction=.cvf_func. ErrorMessage="CustomValidator">
</asp:CustomValidator>