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

 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
“

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


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

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

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


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


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

© 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

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

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

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


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
đ

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

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


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

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

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

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

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

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

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

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

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í

à
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
/

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

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

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

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

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

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

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

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

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
.

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


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


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


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
:

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


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

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

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


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