Validation Controls,

User Controls,
Master Pages
Server Controls
Validation Controls

A validation control (or validator) determines whether

the data in another web control is in the proper format,
before the data is processed.

When the XHTM for o!r pa"e is created, the validator is

converted into JavaScript that performs the validation.

#avaScript is a scriptin" lan"!a"e that enhances the

f!nctionalit$ and appearance of web pa"es and is t$picall$
e%ec!ted on the client.

&eca!se some clients disable or do not s!pport scriptin",

AS'.()T validation controls can f!nction on the client,
on the server or both.
Server Controls
Validation Controls

*ich, declarative validation

Validation declared separatel$ from inp!t control

)%tensible validation framewor+

S!pports validation on client and server

Server,side validation is alwa$s done

'revents !sers from spoofin" Web -orms

Server Controls
Validation Controls

<asp:RequiredFieldValidator>

)ns!res that a val!e is entered

<asp:RangeValidator>

Chec+s if val!e is within minim!m and ma%im!m val!es

<asp:CompareValidator>

Compares val!e a"ainst constant, another control or data

t$pe

<asp:RegularExpressionValidator>

Tests if val!e matches a predefined pattern

<asp:CustomValidator>

ets $o! create c!stom client, or server,side validation

f!nction

<asp:ValidationSummary>

.ispla$s list of validation errors in one place

Server Controls
Validation Controls

Validation controls are derived from

System.Web.UI.WebControls.aseValidator, which is
derived from the !abel control

Validation controls contain te%t which is displa$ed onl$ if

validation fails

"ext propert$ is displa$ed at control location

Error#essage is displa$ed in s!mmar$

Server Controls
Validation Controls

Validation controls are associated with their tar"et

control !sin" the Control"oValidate propert$

Can create m!ltiple validation controls with the same

tar"et control
<asp:TextBox id=TextBox1 runat=server />
<asp:RequiredFieldValidator id="Req1"
ControlToValidate="TextBox1"
Text="Required Field" runat=server />
Server Controls
Validation Controls

$age.IsValid indicates if all validation controls on

the pa"e s!cceed
void Subit!"li"#$ob%e"t s& 'vent(r)s e* +
i, $-a)e./sValid* +
0essa)e.Text = "-a)e is valid1"2
3
3
Server Controls
Validation Controls

%isplay propert$ controls la$o!t

Stati&/ fi%ed la$o!t, displa$ won0t chan"e if invalid

%ynami&/ d$namic la$o!t

'one/ no displa$1 can still !se ValidationSummary

and $age.IsValid

"ype propert$ specifies e%pected data t$pe/

Curren&y, %ate, %ouble, Integer, String
Server Controls
Validation Controls

Can force down,level option

2nl$ server,side validation

http/33msdn.microsoft.com3en,!s3ma"a4ine3bb56789:.asp%
<4 5 -a)e 6an)ua)e=""7"
ClientTar)et="8o9n6evel" 4>
Server Controls
Validation Controls

.emo/ ValidationControls;.asp%

.emonstrates each t$pe of validation control

<configuration>
<appSettings>
<add
key="ValidationSettings:UnobtrusiveValidationMode"
value="none"/>
</appSettings>
</configuration>
Server Controls
Validation Controls

The code,behind file validates the information

a"ain in case the client has #avaScript
disabled.

The s!bmission of a form sends its data to the

server and ca!ses the c!rrent pa"e to be
re<!ested a"ain is called a postback.

The /s-ostBa"# propert$ of class $age

determines whether the pa"e is bein" loaded
d!e to a postbac+.

The c!rrent $age0s Validate method

validates the information as specified b$ the
validation controls in the Web -orm.
Server Controls
Validation Controls

=se the /sValid propert$ of class $age to

chec+ whether all the validators s!cceeded.

>o! sho!ld alwa$s call method Validate

before !sin" propert$ IsValid.

When data is posted to the web server, the

form0s data becomes accessible to the web
application thro!"h the properties of the
vario!s web controls.
Server Controls
Validation Controls
Examining the Client-Side XHTML for a Web Form
with Validation

?f a validation control0s
'nableClientS"ript propert$ is "rue, the
validator performs client,side validation as the
!ser edits the Web -orm.

>o! do not need to be able to create or even

!nderstand the #avaScript validation code@
the validators are converted to wor+in"
#avaScript b$ AS'.()T.

The EnableVie(State attrib!te

determines whether a web control0s c!rrent state
is remembered each time a postbac+ occ!rs.
Server Controls
Validation Controls

The defa!lt val!e, "rue, indicates that the control0s

state at the last postbac+ is retained.

A )idden inp!t called !!V/':ST(T' stores the

controls0 data as an encoded strin" so the server can
determine whether it has chan"ed.
Performance Tip
Setting 'nableVie9State to False reduces the amount of data
passed to the web server with each request.
Validation Controls )%ercise
Validation Controls )%ercise
Validation Controls )%ercise
Validation Controls )%ercise
Master 'a"es
Creating a Master Page

The master pa"e defines the elements we want to appear on each

pa"e. A master pa"e is li+e a base class in a vis!al inheritance
hierarch$.

The master pa"e contains placeholders for c!stom content

created in each content pa"e.

To create a master pa"e, ri"ht clic+ the location of the website in

the Solution Explorer and select Add New ItemA.

Select Master Page and specif$ &!"B&!".master as the file

name.

Master pa"es have the file,name e%tension .master and, li+e Web
-orms, can optionall$ !se a code,behind file to define additional
f!nctionalit$.

eave the bo% labeled Place code in a separate ile !nchec+ed

and clic+ Add to create the pa"e.
Master 'a"es

The mar+!p for a master pa"e is almost identical to that

of a Web -orm.

A master pa"e contains a 0aster directive, which

specifies that this file defines a master pa"e !sin" the
indicated !anguage for an$ code.

Code that wo!ld !s!all$ be placed in a code,behind file

can be placed in a s"ript element.

(e%t, set the title of the pa"e to ug*ug.

The master pa"e contains two Content-la"e;older

controls for content that will be defined b$ a content pa"e.
Master 'a"es

At this point, $o! can edit the master pa"e in

!esign mode as if it were an AS'X file.

The Content$la&e+older control appears as a

rectan"le with a p!rple o!tline indicatin" the control0s
t$pe and ?..

=sin" the Properties window, chan"e the ?. of this

control to bodyContent.
Master 'a"es

'lace the c!rsor to the left of Content$la&e+older and select

"able # Insert "able.

?n the Insert "able dialo", set $ows to B and %olumns to ;. ?n the

&a'out section, specif$ a %ell padding and a %ell spacing of 8.

Set both the width and hei"ht of the table to ;88 percent. Ma+e
s!re that the Si(e val!e in the )orders section is 8.

Clic+ OK to create a table that fills the pa"e and contains two rows.

Chan"e the st$le to have ,erti&al-align propert$ of the bottom

table cell to top and dra" the Content$la&e+older into this cell.

Set the +eig)t of the top table cell to ./0. Add an Image control
named )eaderImage with its ImageUrl propert$ set to the
bug*bug.png file.
ug*ug.master pa"e that defines a lo"o
ima"e header for all pa"es
Master 'a"es
Creating a Content Page

*i"ht clic+ the master pa"e in the Solution Explorer and

select Add %ontent Page. *ename the .efa!lt.asp% to
Content'a"e.asp%, then open it in Source mode

The $age directive indicates the 0aster-a)eFile that is !sed as

a startin" point for this new pa"e0s desi"n.

The Title propert$ specifies the title that will be displa$ed in the
web browser0s title bar when the content pa"e is loaded.

This val!e, which we set to Create a 'e( User, replaces the

val!e (i.e., ug*ugC set in the title element of the master pa"e.

&eca!se Create'e(User.aspx specifies ug*ug.master as

the pa"e0s #aster$ageFile, it implicitl$ contains the contents of
the master pa"e.
Master 'a"es

The content pa"e contains Content controls, in which we

will place pa"e,specific content that will replace the master
pa"e0s Content$la&e+olders.

The Content$la&e+olderI% propert$ of the Content

control identifies which Content$la&e+older the control
sho!ld replace

The relationship between a content pa"e and its master pa"e

is more evident in Design mode/
Master 'a"es
dding a Create<ser:i=ard Control to a Content Page

Create'e(User.aspx is the pa"e in o!r website that allows

first,time visitors to create !ser acco!nts.

To provide this f!nctionalit$, we !se a %reate*ser+i(ard

control.

'lace the c!rsor inside the Content control in !esign mode and
do!ble clic+ Create=serWi4ard in the "oolbox to add it to the pa"e.
2pen the %reate*ser+i(ard "asks smart,ta" men! and clic+ Auto
,ormat. Select the Proessional color scheme.

When the !ser clic+s the %reate *ser b!tton, AS'.()T verifies that
all the form0s re<!irements were f!lfilled and attempts to create the !ser
acco!nt. (we will !se this ne%t wee+C

?n Create'e(User.aspx, the $age directive indicates that this

content pa"e inherits content from ug*ug.master.
Creatin" Controls

AS'.()T provides two wa$s to create $o!r

own server,side controls

=ser Controls/ )ssentiall$ a mini .asp% file

C!stom Controls/ >o! derive a class from

System.Web.UI.Control
Creatin" Controls
=ser Controls

=ser controls simplif$ the re!se of code and =?

components within a Web application

A !ser control is a !ser,defined Web server control with an

.asc% e%tension

Contains HTM, b!t not the DHTME, D&2.>E, or

D-2*ME ta"s

)nables f!ll encaps!lation

S!pports nested controls

Separate code namespace

Separate code lan"!a"e

Can partition wor+ across m!ltiple developers

Freat wa$ to re!se wor+ across m!ltiple pa"es and

applications
Why Use User Controls?

Reuse user interface and code

Page2.aspx
Control1.ascx
Page1.aspx
Page3.aspx
Application A Application B
Addin" a =ser Control

*e"isters !ser control for !se on a pa"e

=se the G *e"ister directive to incl!de a !ser

control in an AS'.()T 'a"e

?nsert the !ser control in a Web -orm

=se Fet and Set properties of the !ser control

<45 Re)ister Ta)-re,ix="deo"
Ta)>ae="valid>u" Sr"="nuberbox.as"x" 4>
<45 Re)ister Ta)-re,ix="deo"
Ta)>ae="valid>u" Sr"="nuberbox.as"x" 4>
<deo:valid>u id="nu1" runat="server"/>
<deo:valid>u id="nu1" runat="server"/>
nu1.p>u = ?2 //uses Set
x = nu1.p>u2 //uses @et
nu1.p>u = ?2 //uses Set
x = nu1.p>u2 //uses @et
)%ample =ser Control

Create &efore=serControl.asp%

Add B "extbox controls with RequiredFieldValidator and

RangeValidator

Add a utton that adds the val!es in these te%tbo%es and

displa$s the s!m in a !abel

Create a +eb *ser %ontrol numberbox.ascx

Add a "extbox controls with RequiredFieldValidator and

RangeValidator

Create After=serControl.asp%

*e"ister the !ser control n!mberbo%.asc%

Add B numberbox controls

Add a utton that adds the p>u properties in these

numberboxes and displa$s the s!m in a !abel
Creatin" Controls
'ro"rammatic =se of =ser Controls

$age.!oadControl2string sour&e3

.$namicall$ instantiates a !ser control

Create an instance/
Control numbox. 4 $age.!oadControl25numberbox.as&x536

?nsert into the control hierarch$/

my$anel.Controls.7dd28oo36

Create.$namic=serControls.asp%
Creatin" Controls
C!stom Controls

A class that $o! create

.erived from System.Web.UI.Control

http/33msdn.microsoft.com3en,!s3librar$34tB9tfh$.asp%
using System
using System!"eb
using System!"eb!U#
public class My$ontrol : $ontrol %
protected override void &ender'()M*)e+t"riter ,- %
,!"rite'.</0>$ontrol output<//0>1-
2
2
Creatin" Controls
C!stom Controls

M!st implement Render23 method

Can e%pose properties, methods and events

Sho!ld maintain state

Sho!ld handle postbac+ data

Can "enerate client,side script to do postbac+

Sho!ld handle child controls

*ender them

Handle events

Can e%pose and implement templates

Can handle data bindin"

Creatin" Controls
C!stom Controls vs. =ser Controls
*ser %ontrols %ustom %ontrols
Food for application,specific =?
Food for re!se,
encaps!late common =?
)as$ to b!ild Can be more comple% to b!ild
ess fle%ibilit$, performance,
desi"ner s!pport
Total fle%ibilit$, better performance,
and desi"ner s!pport
(o template s!pport Can s!pport templates