UM06CBBI57 Server Side Web Programming Unit II

C.P. PATEL & F.H. SHAH COMMERCE COLLEGE

(MANAGED BY SARDAR PATEL EDUCATION TRUST)
BCA, BBA (ITM) & PGDCA PROGRAMME
BBA (ITM) SEM VI
UM06CBBI57 SERVER SIDE WEB PROGRAMMING
UNIT 2: ASP.NET Standard Controls and Validation Controls

Using standard controls: [Control Properties]

Standard Controls— Enable you to render standard form elements such as

buttons, input fields, and labels.

They are server side objects. They are programmable objects that act as user
interfaces (UI) elements on a web page. The class of these controls is
System.Web.UI.WebControls.

Syntax:

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

There are different types of standard controls available in ASP.NET 3.5, from that
we refer some of that as below list:
1. Label
2. TextBox
3. Button
4. CheckBox
5.RadioButton
6. Link Button
7. Image Button
8. DropDownList

1 of 16
 UM06CBBI57 Server Side Web Programming Unit II

Common/Public Properties of Visual Basic Controls

 Every object, such as a web page or control, has a set of properties that describe
it. Although this set isn't identical for all objects, some properties (such as those
listed in the table below) are common to most controls. You can see every
design-time property for a given control by looking at the Properties window in
the IDE (some controls have properties that are available only at run-time).

The following table describes the properties inherited from the WebControl
class:

Property Description
AccessKey Obtains the access key that allows you to quickly
navigate to the web server control
BackColor The background color of a control
BorderColor The border color of a control
BorderStyle The border style of a control
BorderWidth The border width of a control
CssClass The CSS class applied to a control
Enabled A value indicating whether or not control is enabled
Font The font attributes for the control
EnableTheming Whether or not themes apply for a control
ForeColor The foreground color of the control
Height The height of the control
IsEnabled A value indicating whether or not control is enabled (Get
value only)
TabIndex The tab order of the control
ToolTip The text that appears when the user rests the mouse
pointer over a control
Width The width of the control

Common Methods of Visual Basic Controls

 Methods are blocks of code designed into a control that tells the control how to
do things, such as set input focus to the control. Just as with properties, not all
controls have the same methods, although some common methods do exist, as
shown in the table below:

Method Name Description

ApplyStyleSheetSkin Applies the style properties defined in the page
style sheet to the control.
DataBind() Binds a data source to the invoked server control

2 of 16
 UM06CBBI57 Server Side Web Programming Unit II

and all its child controls.

Dispose Enables a server control to perform final clean up
before it is released from memory.
FindControl(String) Searches the current naming container for a
server control with the specified id parameter.
Focus Sets input focus to a control.
HasControls Determines if the server control contains any
child controls.

Common Events of Visual Basic Controls

 Events are what happen in and around your program. For example, when a
user clicks a button, click_event ocuurs. Same as all controls have different
events and common events.

Event Name Description

DataBinding Occurs when the server control binds to a data
source.
Disposed Occurs when a server control is released from
memory, which is the last stage of the server
control lifecycle when an ASP.NET page is
requested.
Init Occurs when the server control is initialized,
which is the first step in its lifecycle.
Load Occurs when the server control is loaded into
the Page object.
PreRender Occurs after the Control object is loaded but prior
to rendering.
TextChanged Occurs when the content of the text box changes
between posts to the server.
Unload Occurs when the server control is unloaded from
memory.

1. Label:
Label controls are used to display text and cannot be edited by the user. They are
used to identify objects on a form — provide a description of what a certain control
will do if clicked, for example — or at run time, they can display information in
response to an event or process in your application.

Figure- The label control

You can also write code that changes the text displayed by a label control in response
to events at run time. For example, if your application takes a few minutes to process
a change, you can display a processing-status message in a label.

Properties:

Property Description

3 of 16
 UM06CBBI57 Server Side Web Programming Unit II

AssociatedControlID Gets or sets the identifier for a server control that

the Label control is associated with.
Text Gets or sets the text content of the Label control.

2. Textbox: The text box control is used to display information entered by the user at
run time, or assigned to the Text property of the control at design or run time.

Figure of text box control

Creating Multiline, Word-wrap Text Boxes:

By default, the TextMode property of the control is set to

TextBoxMode.SingleLine, which displays a single-line text box. However, you can also
use the TextBox control to display a multiline text box or a text box that masks user
input by changing the value of theTextMode property
to TextBoxMode.MultiLine or TextBoxMode.Password, respectively. The text displayed
in the TextBox control is specified or determined by using theText property.

The TextBox control contains several properties that allow you to control the
appearance of the control. The display width of the text box, in characters, is
determined by its Columns property.

If the TextBox control is a multiline text box, the number of rows it displays is
determined by the Rows property. To display text that wraps within
theTextBox control, set the Wrap property to true.

Creating a Password Text Box:

However, you can also use the TextBox control to display a password box or
that masks user input by changing the value of theTextMode property
to TextBoxMode.Password.

Controlling Input in a Text Box:

You can also specify how data is entered in the TextBox control by setting a few
properties. To prevent the text displayed in the control from being modified, set the
ReadOnly property to true. If you want to limit the user input to a specified number of
characters, set the MaxLength property.

Properties:

Property Description
AutoCompleteType Gets or sets a value that indicates the AutoComplete
behavior of the TextBox control
AutoPostBack A Boolean value that specifies whether the control is
automatically posted back to the server when the
contents change or not. Default is false
CausesValidation Gets or sets a value indicating whether validation is
4 of 16
 UM06CBBI57 Server Side Web Programming Unit II

performed when the TextBox control is set to validate

when a postback occurs.
Columns Gets or sets the display width of the text box in
characters.
MaxLength Gets or sets the maximum number of characters
allowed in the text box.
ReadOnly Gets or sets a value indicating whether the contents
of the TextBox control can be changed.
Rows Gets or sets the number of rows displayed in a
multiline text box, i.e the height of the textbox (only
used if TextMode="Multiline")
Text The contents of the textbox
TextMode Gets or sets the behavior mode (single-line, multiline,
or password) of the TextBox control.
ValidationGroup Gets or sets the group of controls for which
the TextBox control causes validation when it posts
back to the server.
Wrap Gets or sets a value indicating whether the text
content wraps within a multiline text box.

Events:

Event Means/Description
TextChanged Occurs when the user changes the text of a Textbox.

3. Button:

 The Button control is used to create a button that sends a request to a web
page. The Button control post data to the server when they are cliked.
 The Button control is used to display a push button. The push button may be a
submit button or a command button. By default, this control is a submit
button.
 A submit button does not have a command name and it posts the Web page
back to the server when it is clicked. It is possible to write an event handler to
control the actions performed when the submit button is clicked.
 A command button has a command name and allows you to create multiple
Button controls on a page. It is possible to write an event handler to control the
actions performed when the command button is clicked.

Figure of The button control

 Properties:

Property Description
5 of 16
 UM06CBBI57 Server Side Web Programming Unit II

CausesValidation Specifies if a page is validated when a button is

clicked
CommandArgument Specifies additional information about the command
to perform
CommandName Specifies the command associated with the
Command event
PostBackUrl Specifies the URL of the page to post to from the
current page when a button is clicked
Text Specifies the text on a button
UseSubmitBehavior Specifies whether or not a button uses the browser's
submit mechanism or the ASP.NET postback
mechanism
ValidationGroup Specifies the group of controls a button causes
validation, when it posts back to the server
Events:

Event Description
Click Occurs when the Button control is clicked.
Command Occurs when the Button control is clicked.

4. Checkbox:

The Checkbox control creates a check box that can be selected by clicking it. The
Checkbox control is displays checkmarks that allow the user to toggle between a
TRUE or FALSE condition.

Figure of The check box control

 Properties:

Property Description
AutoPostBack Specifies whether the form should be posted
immediately after the Checked property has changed or
not. Default is false
CausesValidation Specifies if a page is validated when a Button control is
clicked
Checked Specifies whether the check box is checked or not
InputAttributes Attribute names and values used for the Input element
for the CheckBox control
LabelAttributes Attribute names and values used for the Label element
for the CheckBox control

6 of 16
 UM06CBBI57 Server Side Web Programming Unit II

Text The text next to the check box

TextAlign On which side of the check box the text should appear
(right or left)
ValidationGroup Specifies the group of controls a check box causes
validation, when it posts back to the server

Events:

Event Description
CheckedChanged Occurs when the value of the Checked property
changes between various posts to the server.

5. Radio Button:

Similar to the Checkbox control, a Radio Button control creates a Single radio
button. The RadioButton can be grouped, where only one RadioButton control can be
selected at a time. In web, forms you have to set the Radiobutton’s GroupName
property to the same value to associate them into group.

Figure of the Radio Button control

 Properties:

Property Description
AutoPostBack A Boolean value that specifies whether the form
should be posted immediately after the Checked
property has changed or not. Default is false
Checked A Boolean value that specifies whether the radio
button is checked or not
Id A unique id for the control
GroupName The name of the group to which this radio
button belongs
Text The text next to the radio button
TextAlign On which side of the radio button the text should
appear (right or left)
Events:

Event Description
CheckedChanged Occurs when the value of the Checked property
changes between various posts to the server.

6. Link Button:

7 of 16
 UM06CBBI57 Server Side Web Programming Unit II

The LinkButton control is used to link the current web page to some other web page,
similar to Hyper Link control. The only difference between the wto is that the
Hyperlink control just allows the browser to navigate to a new web page, whereas in
the LinkButton control, we can also perform some other action by handling the Click
and command events of this control

Figure of The link Button control

 Properties:

Property Description
CausesValidation Specifies if a page is validated when a LinkButton
control is clicked
CommandArgument Additional information about the command to
perform
CommandName The command associated with the Command
event
PostBackUrl The URL of the page to post to from the current
page when the LinkButton control is clicked
Text The text on the LinkButton
ValidationGroup Specifies the group of controls a link button
causes validation, when it posts back to the
server

Events:

Event Description
Click Occurs when the Link Button control is clicked.
Command Occurs when the Link Button control is clicked.

7. Image Button:

The ImageButton control is a button control that displays an image instead of

text. The ImageButton control is specifically useful when you want to create image
maps. Image maps are checkable regions on images and can initiative various actions
depending on part of the image that you click.

Figure of the Image Button control

8 of 16
 UM06CBBI57 Server Side Web Programming Unit II

 Properties:

Property Description
CausesValidation Specifies if a page is validated when an
ImageButton control is clicked
CommandArgument Additional information about the command to
perform
CommandName The command associated with the Command
event
GenerateEmptyAlternateText Specifies whether or not the control creates
an empty string as an alternate text
PostBackUrl The URL of the page to post to from the
current page when the ImageButton control is
clicked
ValidationGroup Specifies the group of controls a link button
causes validation, when it posts back to the
server
Events:

Event Description
Click Occurs when the Image Button control is clicked.
Command Occurs when the Image Button control is clicked.

8. DropDownList:

The DropDownList control displays the list of data as a drop-down list from
which you can make a single selection. You cannot select multiple items in this
control because when you make a selection from the list, the list closes automatically.

Figure of the DropDownList control

 Properties:

Property Description
SelectedIndex The index of a selected item
ValidationGroup Specifies the group of controls a DropDownlist
causes validation, when it posts back to the server
Events:

Event Description

CallingDataMethods Occurs when data methods are being

9 of 16
 UM06CBBI57 Server Side Web Programming Unit II

Event Description
called. (Inherited from DataBoundControl.)

CreatingModelDataSource Occurs when the ModelDataSource object is being

created. (Inherited from DataBoundControl.)

SelectedIndexChanged Occurs when the selection from the list control

changes between posts to the server. (Inherited
from ListControl.)

Validation
It verifies control values entered correctly and block page processing until the
control values are valid. This is very critical to application security. Validation can be
done in serve side or client side.

There are two types of Validation:

1) Client side validation
2) Server side validation
1) Client side validation:
 When validation is done using a script (usually in the form of
JavaScript) in the page that is posted to the end user’s browser to
perform validations on the data entered in the form before the form is
posted back to the originating server. Then, client-side validation has
occurred.
 Client-side validation is quick and responsive for the end user.
client-side validation is the more insecure form of validation.
 When a page is generated in an end user’s browser, this end user can
look at the code of the page quite easily (simply by right-clicking his
mouse in the browser and selecting View Code).

2) Server side validation:

 When validation occurs on server, where application resides it is called
server side validation.
 The more secure form of validat ion is server-side validation.
 It is more secure because these checks cannot be easily bypassed.

The best approach is always to perform client -side validation first

and then, after the form passes and is posted to the server, to perform
the validation checks again us ing server-side validation.

Client side validation vs. server side validation

Server-Side Validation
You can use the validator controls to verify a page automatically when the user
submits it or manually in your code. The first approach is the most common. When
using automatic validation, the user receives a normal page and begins to fill in the
input controls. When finished, the user clicks a button to submit the page. Every
button has a

10 of 16
 UM06CBBI57 Server Side Web Programming Unit II

CausesValidation property, which can be set to true or false. What happens when the
user clicks the button depends on the value of the CausesValidation property:
• If CausesValidation is false, ASP.NET will ignore the validation controls, the page will
be posted back, and your event-handling code will run normally.
• If CausesValidation is true (the default), ASP.NET will automatically validate the
page when the user clicks the button. It does this by performing the validation for
each control on the page. If any control fails to validate, ASP.NET will return the page
with some error information, depending on your settings. Your click event-handling
code may or may not be executed—meaning you’ll have to specifically check in the
event handler whether the page is valid.

Client-Side Validation
ASP.NET automatically adds JavaScript code for client-side validation. In this
case, when the user clicks a CausesValidation button, the same error messages will
appear without the page needing to be submitted and returned from the server. This
increases the responsiveness of your web page.
However, even if the page validates successfully on the client side, ASP.NET still
revalidates it when it’s received at the server. This is because it’s easy for an
experienced user to circumvent client-side validation. For example, a malicious user
might delete the block of
JavaScript validation code and continue working with the page. By performing
the validation at both ends, ASP.NET makes sure your application can be as
responsive as possible while also remaining secure.

Overview of the Validation controls

Validation server controls are used to validate user-input. A Validation server
control is used to validate the data of an input control. If the data does not pass
validation, it will display an error message to the user.

The syntax for creating a Validation server control is:

<asp:control_name id="some_id" runat="server" />

There are different types of validation controls:

1) RequiredFieldValidator control
2) RangeValidator control
3) CompareValidator control
4) CustomValidator control
5) ValidationSummary control

Validation Control Description

RequiredFieldValidator It makes sure the user enters data in the associated
Data-entry control.
RangeValidator It makes sure that the user-entered data passes
validation criteria that you set yourself.
CompareValidator It uses comparison operates to compare user-entered
data to a constant value or the value in another
Data-entry.
CustomValidator It makes sure that the user-entered data passes
validations criteria that you set yourself.
11 of 16
 UM06CBBI57 Server Side Web Programming Unit II

ValidationSummary It displays the list of all the validation errors on the

web page.

Common Properties of validation controls:

Property Description
ControlToValidate Gets or sets the input control to validate.
Display Gets or sets the display behavior of the error message in a
validation control.
EnableClientScript Gets or sets a value indicating whether client-side
validation is enabled.
Enabled Gets or sets a value that indicates whether the validation
control is enabled.
ErrorMessage Gets or sets the text for the error message displayed
in a ValidationSummary control when validation fails.
ForeColor Gets or sets the color of the message displayed when
validation fails.
IsValid Gets or sets a value that indicates whether the associated
input control passes validation.
SetFocusOnError Gets or sets a value that indicates whether focus is set to
the control specified by the ControlToValidateproperty
when validation fails.
Text Gets or sets the text displayed in the validation
control when validation fails.
ValidationGroup Gets or sets the name of the validation group to which
this validation control belongs.

Common Methods of validation controls:

Property Description
Validate It performs validation on the associated input control and
updates the IsValid property.

To use this controls, you set the ErrorMessage property to the error message you
want to display, and the ControlToValidate property to the control you want to check.

1) RequiredFieldValidator Control: This is the simplest validation control that

makes sure that the users have entered data into a Data-entry control. Suppose that
the users are entering data for buying shoes in Data-entry control. In that case you
may want to make sure that the users enter the number of shoes they want to buy. If
they omit to enter a value, this validation control will display its error message.

This control has an Initial value property, which is set to an empty string (“”) by
default. If the data has not changed from that value when validation occurs, the
control displays its error message.
12 of 16
 UM06CBBI57 Server Side Web Programming Unit II

Figure of the RequiredfieldValidator

Properties:

Property Description
InitialValue Specifies the starting value of the input control. Default
value is ""

2) RangeValidator Control:

A Range validator tests if thevalue of a Data-Entry control is inside a specified

range of values. You use three main properties- ControToValidate, MinimumValue and
maximumValue. The ControlToValidte property contains the Data-Entry control to
validate, MinimumValue and MaximumValue properties hold the minimum and
maximum values of the valid range. If you set one of the MinimumValue and
MaximumValue properties, you also must set the other. Also set the Type property to
the data type of the value to compare, the possible values are the same as for
comparison validators.

Figure of the RangeValidator

Properties:

Property Description
MaximumValue Specifies the maximum value of the input control
MinimumValue Specifies the minimum value of the input control
Type Specifies the data type of the value to check. The types
are:

 Currency
 Date
 Double
 Integer
 String

3) CompareValidator Control:

A CompareValidator compares the value entered by the user into a Data-Entry

control with the value entered into another Data-Entry control or with a constant
value. As usual for validation controls, you indicate the Data-Entry control to validate
by setting the ControlToValidate property. If you want to compare a specific Data-
Entry control to another, set the ControlToCompare property to specify the control to
compare with.
13 of 16
 UM06CBBI57 Server Side Web Programming Unit II

You can also compare Date-Entry value to the constant value, for that you have
to set the ValueToCompare property.

Use the Type property to specify the type of comparision to perform. Here are
the possibilities:

Operator Discription
Equal Checks if the compared value are equal.
Not Equal Checks if the compared value are not equal.
GreaterThan Checks for the greater than relationship.
GreaterThanEqual Checks for the greater than or equal relationship.
LessThan Checks for the less than relationship.
LessThanEqual Checks for the less than or equal relationship.
DataTypeCheck Compares data types between the value enteres into the
Data-Entry control being validated and the data type
specified by the Type property

Figure of the CompareValidator

Properties:

Property Description
ControlToCompare The name of the control to compare with
Operator The type of comparison to perform. The operators are:

 Equal
 GreaterThan
 GreaterThanEqual
 LessThan
 LessThanEqual
 NotEqual
 DataTypeCheck

ValueToCompare A specified value to compare with

4) ValidationSummary control:

The Validationsummary control, which summarize the error messages from all
validators on a web page in one location. The summary can be displayed as a list, as a
bulleted list, or as a single paragraph, based on the DisplayMode property. You can
alos specify if the summary should be displayed in the web page and in a message box
by setting the ShowSummary and showMessagebox propertises, respectively.

Figure of the ValidationSummary

14 of 16
 UM06CBBI57 Server Side Web Programming Unit II

Properties:

Property Description
DisplayMode How to display the summary. Legal values are:

 BulletList
 List
 SingleParagraph

EnableClientScript A Boolean value that specifies whether client-side

validation is enabled or not
Enabled A Boolean value that specifies whether the validation
control is enabled or not
ForeColor The fore color of the control
HeaderText A header in the ValidationSummary control
ShowMessageBox A Boolean value that specifies whether the summary
should be displayed in a message box or not
ShowSummary A Boolean value that specifies whether the
ValidationSummary control should be displayed or
hidden
ValidationGroup Sets the group of controls for which the
validationSummary object displays validation
messages.

Master Page
Master page is a feature in ASP.NET 3.5 that helps define the overall layout of a
web application and reuse the defined layout in all the pages derived from the master
page. A master page contains markups and controls that you can share across
different web pages of your web site. This makes your website more manageable and
also avoids the duplication of code.

A master page contain markups, controls, banners, navigation menus and other
elements that you want to include in all the pages of your website. The web pages that
inherit the properties defined in master pages are called Content Pages. The content
pages display their own properties as well as the properties inherited from master
pages.

The following are the key features of the master pages:

 Defining common properties of a website, such as banner, navigation menus or
multiple master pages
 Allowing a single or multiple content pages to access single or multiple master
pages
 Displaying the content of each content page in the content place holder of the
master pages
15 of 16
 UM06CBBI57 Server Side Web Programming Unit II

To create a master page for a web site, identify the controls that you want
to display on all the pages and then add these controls to the master page. You then
create the ContentPlaceHolder control for the matser page to place the content of the
web pages. Whne this website is executed, then the layout of the master page and the
content in ContentPlaceHolder control are merged to display the output of the
webpage. A master page contains multiple ContentPlaceHolder.
There TWO type of master pages: Simple mater page and Nested master page.
1) Simple master page: A simple master page simplify your website design by
creating master pages and the content pages. You don’t need to create the submaster
pages. It is a page that is combined with the content page to display the combined
page. The master and content pages are combined together to generate a single page
that inherits its properties from both the pages.

Simple Content
Master Page
Page

Combined
Page

[Figure of the block diagram of a combined page]

2) Nested master page: A nested master page is very much same as that of single
master page. The only difference is that nested master pages are used in websites that
have several hierarchical levels. For example, An application can have number of
master pages depending on the level of hierarchy it incorporates.

Nested
Master
Page

Content Master Content Master

Page 1 Page 1 Page 2 Page 2

Combined Combined
Page 1 Page 2

16 of 16