Bài 4: Thiết kê và lập trình web với ASP.NET - Làm việc với Control

Lp trình và Thit k Web 2
Bà
i
4
Bà
i
4
LàmLàm
vicvic
vivi
ControlControl
LàmLàm
vicvic
vivi
ControlControl
Ths
Trn
Th
Bích
Hnh
Ths
.
Trn
Th
Bích
Hnh
Khoa CNTT Khoa CNTT –– H.KHTNH.KHTN
© 2009 Khoa Công ngh thông tin
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
NidNid
Ni

d
ung
Ni

d
ung

HTML Server Controls

HTML

Server

Controls
 ASP.NET Server Controls
V lid ti C t l

V
a
lid
a
ti
on
C
on
t
ro
l
s

 Web User Controls
© 2009 Khoa CNTT - HKHTN
2
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
SCtlSCtl
S
erver
C
on
t
ro
l
s
S
erver
C
on
t
ro
l
s

Là
nhng
control
mà
Web server (IIS)
có
th
“

hiu
đc
”
Là
nhng
control

mà
Web

server

(IIS)

có
th
hiu
đc
 Mi server control bao gm
T
á
th 
tí h
(P ti )
–
T
pc
á
c
th

u

c
tí
n
h
(P
roper
ti
es
)
– Các s kin (Events)
– Các phng thcx lý s kin (Methods)
 Dùn
g
đ th hin
g
iao dinweb
g
g
© 2009 Khoa CNTT - HKHTN
3
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
VíVí
dd
VíVí
d

d


© 2009 Khoa CNTT - HKHTN
4
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
CáCá
l il i
SCtlSCtl
Cá
c
Cá
c
l
o
il
o
i
S
erver
C
on
t
ro
l
s
S
erver
C
on
t
ro
l

s
1.
HTML Server Controls
1.
HTML

Server

Controls
2. ASP.NET Server Controls
3. Validation Controls
4. Web User Controls
© 2009 Khoa CNTT - HKHTN
5
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
NidNid
Ni

d
ung
Ni

d
ung

HTML Server Controls

HTML

Server

Controls
 ASP.NET Server Controls
V lid ti C t l

V
a
lid
a
ti
on
C
on
t
ro
l
s
 Web User Controls
© 2009 Khoa CNTT - HKHTN
6
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
HTML S C t lHTML S C t l
HTML

S
erver
C
on
t
ro

l
s
HTML

S
erver
C
on
t
ro
l
s
 Là nhng tag HTML đcb sung thuc tính
runat=“server”
 Có th lptrìnhgnktx lý s kin, truy xutthuc tính
ca HTML Server Controls
<input type="text" id="Text1"
runat
="
server
"
runat
server

onserverchange="Text1_ServerChange" />
protected void Text1_ServerChange(object sender, EventArgs e)
{
Res
p
onse.Write

(
Text1.Value
);
© 2009 Khoa CNTT - HKHTN
p
(
);
}
7
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
NidNid
Ni

d
ung
Ni

d
ung

HTML Server Controls

HTML

Server

Controls
 ASP.NET Server Controls
V lid ti C t l


V
a
lid
a
ti
on
C
on
t
ro
l
s
 Web User Controls
© 2009 Khoa CNTT - HKHTN
8
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
ASP NET S C t lASP NET S C t l
ASP
.
NET

S
erver
C
on
t
ro
l
s
ASP

.
NET

S
erver
C
on
t
ro
l
s
 Là nhng tag đcbitca riêng ASP.NET

H
tr
nhiu
thuc
tính
x
lý

H
tr
nhiu
thuc
tính
x
lý
 cx lý trên server vithuc tính runat = “server”
 Có th dùng th hin các thành phnphctp


Tng
thích
trình
duyt
Tng
thích
trình
duyt
<
asp:TextBox
ID=
"
TextBox
1
"
runat
=
"
server
"
>
</
asp:TextBox
>
<
asp:TextBox
ID= TextBox
1

runat
= server >
</
asp:TextBox
>
<i t
"T tB
1
"
t"tt"
id "T tB
1
"/>
c Render thành
© 2009 Khoa CNTT - HKHTN
<i
npu
t
name=
"T
ex
tB
ox
1
"

t
ype=
"t
ex

t"
id
=
"T
ex
tB
ox
1
"

/>
9
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
KhiKhi
àà

dd
HTML S t l ???HTML S t l ???
KhiKhi
n
à
on
à
os

s

d
ng
d

ng
HTML

S
erver con
t
ro
l

???HTML

S
erver con
t
ro
l

???
S dng HTML control khi:

Nâng
cp
t
ASP
Nâng
cp
t
ASP
 Toàn quyn điukhin trên tag HTML
 Không có ASP.NET server control tng ng

© 2009 Khoa CNTT - HKHTN
10
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
ASP .NET Server Controls & HTML ControlsASP .NET Server Controls & HTML Controls
Server control HTML control
Hinth Text
Label Literal
TextBox
Label, Text Field, Text Area,
Hin

th

Text
Label
,
Literal
,
TextBox
Password Fiel
d
List
DropDownList, ListBox, DataList,
Re
p
eate
r
List Box, Dropdown
p
Hinth Image Image, ImageButton Image

Hinth Table Table, GridView Table
Thc
hin
lnh
Button
LinkButton
ImageButton
Button, Reset Button, Submit
Thc
hin
lnh
Button
,
LinkButton
,
ImageButton
Button
t giá tr
CheckBox, CheckBoxList,
RadioButton
,
RadioButtonList
Checkbox, Radio Button
© 2009 Khoa CNTT - HKHTN
,
11
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
ASP .NET Server Controls & HTML ControlsASP .NET Server Controls & HTML Controls
Server control HTML control
Liên

kt
Hyperlink
Anchor
<
a
>
Liên
kt
Hyperlink
Anchor

a
Ngàytháng Calendar none
Qung cáo AdRotator none
ng k none Horizontal Rule
…
…
…
© 2009 Khoa CNTT - HKHTN
12
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
Simple controlSimple control
Label, Literal Label, Literal HTML tagHTML tag

Label
Label
<asp:Label id="labMsg" runat="server" text="hello"/>
c
render
thành

c
render

thành
<span id="labMsg">hello</span>
 Literal
<asp:Literal id="litMsg" runat="server" text="hello"/>
c
render
thành
c
render

thành
Hello
© 2009 Khoa CNTT - HKHTN
13
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
Simple controlSimple control
Buttons Buttons HTML tagHTML tag

Button
Button
– <asp:Button id="Button1" runat="server" Text="Button">
</asp:Button>
 LinkButton
– <asp:LinkButton id="LinkButton1" runat="server">
</asp:LinkButton>
 ImageButton
<

asp:ImageButton
id "I B tt
1
“
t
"">
–
<
asp:ImageButton
id
=
"I
mage
B
u
tt
on
1
“
runa
t
=
"
server
">

</asp:ImageButton>
© 2009 Khoa CNTT - HKHTN
14
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control

Simple controlSimple control
Buttons Buttons HTML tagHTML tag
Text = “Click Me”
Text = “Link to click”
ImageUrl = “URL”
© 2009 Khoa CNTT - HKHTN
15
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
Simple controlSimple control
TextBoxTextBox HTML tagHTML tag

Tex t B o x

Tex t B o x
 <asp:TextBox id="TextBox1" runat="server">
<
/as
p
:TextBox>
Thuc tính S dng đ
Text L
y
/

t d li

u choTextBox.
p
y  
TextMode SingleLine, MultiLine (scrollable), Hoc Password.

Enabled
Enable/Disable TextBox
Enabled
Enable/Disable

TextBox
Visible Show/Hide TextBox

ReadOnly Ngn không cho ngi
d
ùng thay đ

i d liu trong TextBox.
AutoPostBack
Khi đc thit lp là True, mi khi ngi dùng thay đi d liu
TextChanged trong TextBox s k
í
ch hots kin post
-
back v
© 2009 Khoa CNTT - HKHTN
AutoPostBack
TextChanged

trong

TextBox

s

k
í
ch

hot

s

kin

post
back

v

server
16
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
Simple controlSimple control
TextBoxTextBox HTML tagHTML tag
© 2009 Khoa CNTT - HKHTN
17
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
List ControlList Control
ListBox, DropDownList, TableListBox, DropDownList, Table
Control S dng khi

ListBox
Hi


n th danh sách d liu rea
d
-only đn gin, s dng
scroll
Hi th dh
á
hd li d
l đ i  d 
DropDownList
Hi
n
th

d
an
h
s
á
c
h

d

li
u rea
d
-on
l
y
đ

n g
i
n, s


d
ng c

a
s s xung
Hin
th
thông
tin
di
dng
dòng
v
à
ct
Table control
cho
Table
Hin
th
thông
tin

di
dng

dòng
v
à
ct
.
Table

control

cho
phépxâydng cácbng đng bng mã lnh s dng các
thuctính tphpTableRowsvà TableCells
© 2009 Khoa CNTT - HKHTN
18
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
Li t C t l HTML tLi t C t l HTML t
Li
s
t

C
on
t
ro
l
:
HTML

t
ag

Li
s
t

C
on
t
ro
l
:
HTML

t
ag
 ListBox
<
asp:ListBox
id="ListBox1"
runat
="server">
</
asp:ListBox
>
–
<
asp:ListBox
id="ListBox1"

runat
="server">

</
asp:ListBox
>
 DropDownList
–
<
asp:DropDownList
id=
"
DropDownList1
"
runat
=
"
server
"
>
–
<
asp:DropDownList
id= DropDownList1

runat
= server >

</asp:DropDownList>
 Table
– <asp:Table id="Table1" runat="server" Width="100px"
Height="70px">
</asp:Table>

© 2009 Khoa CNTT - HKHTN
19
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
List ControlsList Controls
C    C    
C
h

nh s

a Thuc tính lúc Thi

t k
C
h

nh s

a Thuc tính lúc Thi

t k

© 2009 Khoa CNTT - HKHTN
20
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
List ControlList Control

Thêm các mc d liu vào thi đi

m chy ng dngThêm các mc d liu vào thi đi


m chy ng dng

ListBox và DropDownList:
– S dng phng thc Add và danh sách Items ca control
– Ví d:
protected void btnShow_Click(object sender, EventArgs e)
{
ListBox1.Items.Add(txtSource.Text);
DropDownList1.Items.Add(txtSource.Text);
}
}
© 2009 Khoa CNTT - HKHTN
21
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
List ControlList Control

L

y mc d liu đc chnL

y mc d liu đc chn

Dùng thuc tính SelectedItem đ lymcd liu đcchnhinti
trong
List
trong
List
p
rotected void Pa

g
eLoad
(
ob
j
ect sender
,
EventAr
g
s e
)
p
g
_
(j ,
g)
{
// Test if there is a selected item.
if (ListBox1.SelectedItem !
=
null)
if

(ListBox1.SelectedItem

!

null)
// Display the selected item.
Label1.Text = "The selected item is: " +

Li tB 1 S l t dIt T t
Li
s
tB
ox
1
.
S
e
l
ec
t
e
dIt
em.
T
ex
t
;
else
Label1.Text = "No item is selected.“;
}
}
© 2009 Khoa CNTT - HKHTN
22
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
NidNid
Ni

d

ung
Ni

d
ung

HTML Server Controls

HTML

Server

Controls
 ASP.NET Server Controls
V lid ti C t l

V
a
lid
a
ti
on
C
on
t
ro
l
s
 Web User Controls
© 2009 Khoa CNTT - HKHTN

23
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
V lid ti t lV lid ti t l
V
a
lid
a
ti
on con
t
ro
l
s
V
a
lid
a
ti
on con
t
ro
l
s

Validation control
kim
tra
tính
đúng
đn

ca
d
liu
do client

Validation

control

kim
tra
tính
đúng
đn
ca
d
liu
do

client

nhpvàotrc khi trang đcgiv cho server
Va
li
dat
i
o
n
co
n

t
r
o
l
S

d
n
g
khi
Validation

control
S

dng

khi
RequiredFieldValidator
Kimtranud liu trong control khác giá tr cho
trc(mc đnh là rng)
Ki

d
li
h
l
i
CompareValidator
Ki

mtran

umc
d
li
un
h
p trong contro
l
g
i
ng
vi control kháchoc so sánh vimt giá tr c th
RangeValidator
Kim tra nu mc d liu nhp trong control nm
RangeValidator
trong khong 2 giá tr
RegularExpressionValidator
Kim tra nu mc d liu nhp trong control tha 1
côn
g
thc đ

nh d

n
g
ch đ

nh

g   g 
CustomValidator
Kim tra tính đúng đn ca d liu nhp vào control
s dng client-side script hoc a server-side code,
hocc 2
© 2009 Khoa CNTT - HKHTN
hoc

c

2
ValidationSummary Hinth ttc cáclikimtraxy ra trong trang
24
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
S d V lid ti C t lS d V lid ti C t l
S

d
ng
V
a
lid
a
ti
on
C
on
t
ro
lS

d
ng
V
a
lid
a
ti
on
C
on
t
ro
l
 Các bc:
–
Kéo
th
1 validate control
vào
Web form
Kéo
th
1

validate

control

vào

Web

form
– Thitlpcácthuc tính cho validate control:
•
ControlToValidate
là
control
bn
mun
kim
tra
•
ControlToValidate
là
control

bn
mun
kim
tra
• ErrorMessage : Thông báo li
• Text : Hinth ca validate control
– S dng ValidationSummary control đ hinth ttc
các lixy ra trong trang
Mc dù vic kim tra xy ra  client, nhng nó ch thc hin khi có 1 s
ki

n
post

-
bac
k x
y
r
a
!
© 2009 Khoa CNTT - HKHTN
 post
bac ya
25
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
Ví dVí d
Ví

d

Ví

d


t
t
h
uc
t
ính Err
o
rM

essage
c
h
o
Va
li
date

co
n
t
r
o
l
t
tuc
t
o essage
co
adatecoto
© 2009 Khoa CNTT - HKHTN
26
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
Ví dVí d
Ví

d

Ví

d


S
dng
ValidationSummary

S
dng
ValidationSummary
© 2009 Khoa CNTT - HKHTN
27
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
Ví dVí d
Ví

d

Ví

d


S
dng
ValidationSummary
control
vi

S

dng
ValidationSummary
control

vi
ShowMessage=True
© 2009 Khoa CNTT - HKHTN
28
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
RidFildRidFild
V lid tV lid t
R
equ
i
re
d

Fi
e
ld

R
equ
i
re
d

Fi
e
ld

V
a
lid
a
t
o
rV
a
lid
a
t
o
r
Thuctính Ý ngha
ControlToValidate Control dùng đ thchinkimtra
InitialValue Giá tr dùng đ so sánh. Mc đnh là rng.
Mu
s
:<
asp:TextBox
ID
="
txtMauSo
"
runat
="
server
“
></

asp:TextBox
>
Mu
s
:

<
asp:TextBox
ID
txtMauSo

runat
server ></
asp:TextBox
>
<asp:RequiredFieldValidator ID= "reqMauSo" runat="server"
ControlToValidate="txtMauSo"
I
nitialValue="0"
Text="Passwords must match" />
© 2009 Khoa CNTT - HKHTN
29
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
CC
V lid tV lid t
C
ompare
C
ompare
V

a
lid
a
t
o
rV
a
lid
a
t
o
r
Thuctính Ý ngha
ControlToValidate Control dùng đ thchinkimtra
ControlToCompare Control dùng đ so sánh
Operator
Toán t so sánh: Equal, GreaterThan, GreaterThanEqual,
LessThan, LessThanEqual, NotEqual, hoc DataTypeCheck
l
i

h

đ
h
l lid
i
Va
l
ueToCompare G

i
átr

h
ng s

đ
so sán
h
Contro
l
ToVa
lid
ate v
i
Operato
r
Type
Kimtrakiud liuca ControlToValidate: String, Integer,
Double
,
Date
,
Currenc
y
,, y
© 2009 Khoa CNTT - HKHTN
30
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
VíVí

dd
KiKi
tt
MtMt
khkh
àà
XáXá
hh
tt
khkh
VíVí
d

d

Ki
m
Ki
m
t
ra
t
ra
MtMt
kh
u
kh
uv
à
v

à
Xá
c
Xá
cn
h
nn
h
nm
t
m
t
kh
u
kh
u
Enter Password: <asp:TextBox ID="txtPass1" runat="server"
TextMode="
p
assword"><
/
a
s
p
:TextBox><
/
br>
p/
p
/

Reenter Password: <asp:TextBox ID="txtPass2" runat="server"
TextMode="password"></asp:TextBox>
<asp:CompareValidator ID="compPass" runat="server"
ControlToValidate="txtPass2"
Op
erator="E
q
ual"
pq
ControlToCompare="txtPass1"
Text="Passwords must match" />
© 2009 Khoa CNTT - HKHTN
31
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
VíVí
dd
KiKi
tt
dd
lili
làlà

hh
hh
h h 
bb
1818
VíVí
d


d

Ki
m
Ki
m
t
ra
t
ra
dd
li
u
li
u
làlà
s

s

n
h
n
h
h
n
h
n
h
o


c
h
o

c
b
ng
b
ng
1818
A
ge
: <
asp
:T
e
x
t
B
o
x ID="
t
x
t
A
ge
" r
u
n

at
="
se
rv
e
r"><
/
asp
:T
e
x
t
B
o
x>
ge
asp e t o
ttge
uat
se e /
asp eto
<asp:CompareValidator ID="compAge" runat="server"
ControlToValidate="txtAge"
ValueToCompare="18"
Ot"
LThEl
“
O
pera
t

or=
"
L
ess
Th
an
E
qua
l
“
Type="Integer"
Text="You are too old to view this site" />
© 2009 Khoa CNTT - HKHTN
32
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
VíVí
dd
KiKi
tt
dd
lili
làlà
kiki
àà
tháthá
VíVí
d

d


Ki
m
Ki
m
t
ra
t
ra
dd
li
u
li
u
làlà
ki
u
ki
ung
à
yng
à
y
thá
ng
thá
ng
Sales Date: <asp:TextBox ID="txtDate"
runat
="server"></
asp:TextBox

>
runat
="server"></
asp:TextBox
>
<asp:CompareValidator ID="compDate" runat="server"
ControlToValidate="txtDate"
Operator="
D
ataTypeCheck"
Type="Date"
Text="Enter a valid date" />
© 2009 Khoa CNTT - HKHTN
33
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
RR
V lid tV lid t
R
ange
R
ange
V
a
lid
a
t
o
rV
a
lid

a
t
o
r
Thuc
tính
Ý
ngha
Thuc
tính
Ý

ngha
ControlToValidate Control dùng đ thchinkimtra
MinimumValue Giá tr cndi
MaximumValue Giá tr cntrên


Et b bt 1 d20<
b
/>
Type
Ki

mtraki

ud

liuca ControlToValidate: String, Integer,
Double, Date, Currency

E
n
t
er a num
b
er
b
e
t
ween
1
an
d

20
:
<
b
r
/>
<asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>
<asp:RangeValidator ID="rangeNum" runat="server"
ControlToValidate="txtNumber"
MinimumValue="1"
MaximumValue="20"
Type="Integer"
T t "Pl t b b t 1 d 20" />
© 2009 Khoa CNTT - HKHTN
34
T

ex
t
=
"Pl
ease en
t
er num
b
er
b
e
t
ween
1
an
d

20"

/>
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
RlE iRlE i
V lid tV lid t
R
egu
l
ar
E
xpress
i

on
R
egu
l
ar
E
xpress
i
on
V
a
lid
a
t
o
rV
a
lid
a
t
o
r
Em
a
il <
asp
:T
e
x
t

B
o
x ID=“
t
x
t
Em
a
il" r
u
n
at
="
se
rv
e
r"><
/
asp
:T
e
x
t
B
o
x
>
a
asp e t o
tt a

uat
se e /
asp eto
<asp:RegularExpressionValidator ID=“valEmail" runat="server“
ControlToValidate=“txtEmail”
V lid ti E i
"
\
+([
+']
\
+)*@
\
+([
]
\
+)*
\
\
+([
]
\
+)*“
V
a
lid
a
ti
on
E

xpress
i
on=
"
\
w+([
-
+
.
']
\
w+)*@
\
w+([

]
\
w+)*
\
.
\
w+([
-
.]
\
w+)*“
ErrorMessage=“Enter a valid Email“
/>
© 2009 Khoa CNTT - HKHTN
35

LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
RlE iRlE i
V lid tV lid t
R
egu
l
ar
E
xpress
i
on
R
egu
l
ar
E
xpress
i
on
V
a
lid
a
t
o
rV
a
lid
a
t

o
r
Ký hiu
Ý ngha
^ … $ Duhiubt đuvàkt thúc mt Expression
\
t
Có
cha
Ký
t
Tab
\
t
Có
cha
Ký
t
Tab
\n Có chaKýt xung dòng
Có
cha
Ký
t
bt
k
khác
\
n
.

Có
cha
Ký
t
bt
k
khác
\
n
[qwerty] Có chaKýt btk trong ngoc vuông
[^ t ]
Khô
h
ký
t
à
t

ô
[^
qwer
t
y
]
Khô
ng c
h
a
ký
t

n
à
o
t
rong ngo

cvu
ô
ng
[a-z] Có chakýt trong khong t a đnz

\w Có chamtt

b
tk (word). Tng t

[a-zA-Z0-0]
\W Có chamtchuibtk không philàmtt (nonword)
© 2009 Khoa CNTT - HKHTN
36
|Hoc
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
RlE iRlE i
V lid tV lid t
R
egu
l
ar
E
xpress

i
on
R
egu
l
ar
E
xpress
i
on
V
a
lid
a
t
o
rV
a
lid
a
t
o
r
Ký
hiu
Ý
ngha
Ký
hiu
Ý

ngha
\s Có chakýt khong trng

\S Không chakýt

khong tr

ng
\d Có chakýt s
\D Không phikýt s
*Chđnh 0 hoc nhiu
+Chđnh 1 hoc nhiu
?Chđnh 0 hoc1
{n} Chđnh có đúng chính xác n ln
{n,} Chđnh có nhiuhnn ln
© 2009 Khoa CNTT - HKHTN
37
{n,m} Chđnh có t n đnm ln
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
C t V lid tC t V lid t
C
us
t
om
V
a
lid
a
t

o
rC
us
t
om
V
a
lid
a
t
o
r
 T vitmãlnh kimtrachy trên server hoc client
 Trên Server
– tmãlnh kim tra trong hàm x lý s kin ServerValidate
 Hoc Trên Client
Ch
đnh
đon
script
kim
tra
cho
thuc
tính
–
Ch
đnh
đon
script

kim
tra
cho
thuc
tính
ClientValidationFunction ca CustomValidator
© 2009 Khoa CNTT - HKHTN
38
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
Ví d T Ki ttêSVí d T Ki ttêS
Ví

d
:
T

Ki
m
t
ra
t
r
ê
n
S
erve
rVí

d

:
T

Ki
m
t
ra
t
r
ê
n
S
erve
r
p
rotected void M
y
Validate(ob
j
ect source,
pyj
ServerValidateEventArgs args)
{
args IsValid =
false;
args
.
IsValid

=

false;
if (TextBox1.Text == "abc")
args.IsValid =
true;
© 2009 Khoa CNTT - HKHTN
}
39
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
Ví d T ki ttêClitVí d T ki ttêClit
Ví

d
:
T

ki
m
t
ra
t
r
ê
n
Cli
en
tVí

d
:

T

ki
m
t
ra
t
r
ê
n
Cli
en
t
<scri
p
t lan
g
ua
g
e="
j
avascri
p
t"
>
p
gg
jp
function ClientValidate(e, args)
{

args.IsValid = false;
if (args.Value == "abc")
args.IsValid = true;
}
</script>
© 2009 Khoa CNTT - HKHTN
40
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
NidNid
Ni

d
ung
Ni

d
ung

HTML Server Controls

HTML

Server

Controls
 ASP.NET Server Controls
V lid ti C t l

V
a

lid
a
ti
on
C
on
t
ro
l
s
 Web User Controls
© 2009 Khoa CNTT - HKHTN
41
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
WbU C t lWbU C t l
W
e
b

U
ser
C
on
t
ro
l
s
W
e
b

U
ser
C
on
t
ro
l
s
 Là các trang ASP.NET đcs dng nh là server
control
 Có th tđnh nghacácthuc tính & phng thc riêng

Có
kh
nng
tái
s
dng
cho
nhiu
trang
web asp net

Có
kh
nng
tái
s
dng

cho
nhiu
trang
web

asp
.
net
 Ch hot đng khi đc thêm vào mt trang web asp.net
 File user-control có phnm rng là (*.ascx)

Phi
đng
ký
trc
khi
s
dng

Phi
đng
ký
trc
khi
s
dng
© 2009 Khoa CNTT - HKHTN
42
Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
T WbU C t lT WbU C t l

T
o
W
e
b

U
ser
C
on
t
ro
lT
o
W
e
b

U
ser
C
on
t
ro
l
© 2009 Khoa CNTT - HKHTN
43
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
T W b U C t l (tt)T W b U C t l (tt)
T

o
W
e
b

U
ser
C
on
t
ro
l

(tt)T
o
W
e
b

U
ser
C
on
t
ro
l

(tt)
© 2009 Khoa CNTT - HKHTN
44

Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
T Th  tí h h W b U C t lT Th  tí h h W b U C t l
T
o
Th
u

c
tí
n
h
c
h
o
W
e
b

U
ser
C
on
t
ro
lT
o
Th
u

c

tí
n
h
c
h
o
W
e
b

U
ser
C
on
t
ro
l
public string Username {
get {
return txtUsername.Text;
}
set {
txtUsername.Text = value;
}
}
© 2009 Khoa CNTT - HKHTN
45
LptrìnhvàThitk Web 2 – Bài 4: Làm vicvi Control
S d WbU C t lS d WbU C t l
S

d
ng
W
e
b

U
ser
C
on
t
ro
lS

d
ng
W
e
b

U
ser
C
on
t
ro
l
© 2009 Khoa CNTT - HKHTN
46

Lp trình và Thitk Web 2 – Bài 4: Làm vicvi Control
TT
ktkt
T
ng
T
ng
ktkt

HTML Server Controls
HTML

Server

Controls
 ASP.NET Server Controls
 Validation Controls
 Web User Control
© 2009 Khoa CNTT - HKHTN
47