You are on page 1of 171

Ti liu kha hc lp trnh web vi ASP.

NET Bin son: Nguyn Minh Qu

MC LC
BI S 1: M U V ASP.NET....................................................................... 6
1.1. Gii thiu tng quan cng ngh .NET ........................................................................ 6
1.1.1 S ra i ca .NET............................................................................................................6 1.1.2 .NET Framework l g ......................................................................................................7 1.1.3 Mt s u im chnh ca .NET framework.....................................................................9

1.2. Gii thiu ASP.NET................................................................................................. 10 1.3. Ci t Visual Studio.NET 2008 .............................................................................. 10


1.3.1 Cc phin bn .NET ........................................................................................................10 1.3.2 Ci t Visual Studio.NET 2008.....................................................................................10

1.4. Gii thiu mi trng tch hp (IDE) ca ASP.NET................................................ 11 1.5. To/lu/m/chy ng dng ASP.NET...................................................................... 13
1.5.1 To mi ...........................................................................................................................13 1.5.2 Lu ng dng Web..........................................................................................................14 1.5.3 M (Chy) ng dng .......................................................................................................14

1.6. C bn v CSS v DHTML. ..................................................................................... 15


1.6.1 CSS..................................................................................................................................15 1.6.2 DHTML...........................................................................................................................15

1.7. nh dng cc th s dng CSS................................................................................ 16


1.7.1 nh dng mc dng (Inline) .......................................................................................16 1.7.2 nh dng bi b chn ID ...............................................................................................16 1.7.3 nh dng bi b chn th (tag)......................................................................................16 1.7.4 nh dng bi lp (Class) ...............................................................................................17 1.7.5 Vn t chc lu tr.....................................................................................................19

1.8. Truy xut thuc tnh cc th HTML v CSS bng JavaScript................................... 19


1.8.1 Truy xut cc thuc tnh ca th .....................................................................................19 1.8.2 Truy xut cc thuc tnh CSS..........................................................................................20

BI S 2: THC HNH ..................................................................................... 22 BI S 3: ASP.NET v Web form...................................................................... 32


3.1 M hnh lp trnh pha my ch................................................................................. 32 3.2 C ch x l file ASP.NET pha my ch. ................................................................ 34 3.3 Mt s v d minh ha............................................................................................... 36
3.3.1 Yu cu x l ti pha server thng qua Runat=Server ...............................................36 3.3.2 Yu cu x l bn pha server thng qua cp th <% %>...............................................37 3.3.3 Yu cu x l bn server thng qua Script......................................................................38 3.3.4 Yu cu x l bn pha server bng cch t trong Code file .........................................38

3.4 Webform trong ASP.NET ......................................................................................... 39 3.5 Tm hiu cu trc trang ASP.NET............................................................................. 39 3.6 Code behind v vit code pha Server........................................................................ 42 3.7 HTML Server Controls v Web controls ................................................................... 43
3.7.1 Gii thiu.........................................................................................................................43 3.7.2 Cch thc to phn t HTML Server Control v ASP.NET control...............................43

BI 4: THC HNH ........................................................................................... 45 BI 5: Tm hiu v s dng cc Server/Ajax Controls..................................... 53


5.1 HTML Server Controls.............................................................................................. 53 5.2 Web server Controls .................................................................................................. 53
5.2.1 Khai bo (to cc phn t web server control)................................................................53 5.2.2 C ch x l cc phn t web server control ..................................................................54 5.2.2 Thc thi cc cu lnh ti pha server ...............................................................................59

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 1

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


5.2.3 M hnh x l s kin trong ASP.NET ...........................................................................59

5.3 Ajax Control Toolkit..................................................................................................60


5.3.1 Gii thiu.........................................................................................................................60 5.3.2 Hng dn s dng mt s Ajax Control c bn ............................................................61

5.4 Tho lun cng ngh Ajax .........................................................................................62

BI 6: THC HNH ........................................................................................... 63 BI 7: To v s dng Custom Control ............................................................. 67


7.1 Gii thiu User Custom Control ................................................................................67 7.2 Cc bc to User Custom control ............................................................................67 7.3 Thm cc thuc tnh, phng thc v s kin vo UCC ............................................69
7.3.1 Thm thuc tnh vo UCC...............................................................................................69 7.3.2 Thm phng thc vo UCC ..........................................................................................70 7.3.3 Thm s kin vo UC.....................................................................................................71

7.4 Truy cp thuc tnh, phng thc ca cc phn t con trong UCC............................71 7.5 Minh ha to mt s iu khin .................................................................................73

BI 8: THC HNH ........................................................................................... 76 BI 9: Cc i tng trong ASP.NET................................................................ 83


9.1 Request Object...........................................................................................................83
9.1.1 i tng Request dng lm g ? ...............................................................................83 9.1.2 Cc thnh phn (thuc tnh v phng thc) chnh.........................................................83 9.1.3 V d s dng ..................................................................................................................83

9.2 Response Object ........................................................................................................86


9.1.1 i tng Response dng lm g ?.............................................................................86 9.1.2 Cc thnh phn (thuc tnh v phng thc) chnh.........................................................86 9.1.3 V d s dng ..................................................................................................................86

9.3 Server Object .............................................................................................................87


9.3.1 i tng Server dng lm g ?..................................................................................87 9.3.2 Cc thnh phn (thuc tnh v phng thc) chnh.........................................................87 9.3.3 V d s dng ..................................................................................................................87

9.4 Session Object ...........................................................................................................87 9.4.1. Bin Sesstion .........................................................................................................87 9.4.2. i tng Session .................................................................................................88 9.5 Application Object.....................................................................................................88
9.5.1 i tng Application dng lm g ? .........................................................................88 9.5.2. Khi nim bin ton ng dng .......................................................................................88 9.5.3. i tng Application....................................................................................................88

Mt s bi tp tng hp: ...................................................................................... 89 BI 10: THC HNH ......................................................................................... 94 BI 11. Truyn d liu gia cc webpage,......................................................... 94 MasterPage v g ri (Debug) chng trnh...................................................... 94
11.1 Truyn (Post) d liu gia cc trang bng m lnh C# ............................................94 11.2 Truy xut n cc phn t bng phng thc FindControl ......................................94 11.3 Truy xut n trang gi thng qua thuc tnh PreviousPage. ...................................94 11.4 MasterPage ..............................................................................................................94 11.5 G ri.......................................................................................................................97
11.5.1 Gii thiu.......................................................................................................................97 11.5.2 Chy ng dng ch g ri .....................................................................................97 11.5.3 Khi nim im dng ....................................................................................................97

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


11.5.4 Chy tng dng lnh vi ch Step Into (F8) ............................................................97 11.5.5 Chy tng dng lnh vi ch Step Over (Shift-F8)..................................................97 11.5.6 Chy tng dng lnh vi ch Step Out (Ctrl-Shift-F8) ............................................97

11.2 S dng Custom Error page..................................................................................... 97 11.3 Ghi cc vt gy li (Trace errors) ............................................................................ 97 11.4 S dng cng c g ri/ Menu Debug .................................................................... 97 11.5 Tracing li mc trang/ Mc ton ng dng .......................................................... 97

BI 12: THC HNH ......................................................................................... 97 BI 13: CNG NGH ADO.NET ...................................................................... 98


13.1 Gii thiu chung ...................................................................................................... 98 13.2 Kin trc ca ADO.NET ......................................................................................... 99 13.3 Cc lp thao tc vi CSDL: Connection, Command,......................................... 100
13.3.1 Lp Connection...........................................................................................................100 13.3.2 Lp Command.............................................................................................................102 13.3.3 Lp DataReader ..........................................................................................................104 13.3.7 Lp DataColumn.........................................................................................................106 13.3.8 Lp DataTable.............................................................................................................106 13.3.9 Lp DataRow ..............................................................................................................107 13.3.10 Lp DataSet...............................................................................................................108 13.3.11 Lp DataAdapter.......................................................................................................108

BI 14: THC HNH ....................................................................................... 111 BI 15: Tm hiu v ng dng c ch Data Binding....................................... 118
15.1 Gii thiu DataBinding.......................................................................................... 118 15.2 Data Binding ......................................................................................................... 118
15.2.1 Dng gn kt d liu n (Single DataBinding) .........................................................118 15.2.2 Dng gn kt d liu c s lp li (Repeated Data Binding) ......................................119

15.3 Cc iu khin Data Source (Data source controls). .............................................. 121


15.3.1 Gii thiu v DataSource controls ..............................................................................121 15.3.2 S dng SqlDataSouce chn (Select) d liu.........................................................122 15.3.3 S dng SqlDataSource cp nht d liu ...............................................................124 15.3.4 Xa bn ghi trong CSDL bng SqlDataSource ...........................................................127

BI 16: THC HNH ....................................................................................... 129 BI 17: Lm vic vi GridView ........................................................................ 133
17.1 Gii thiu tng quan .............................................................................................. 133 17.2 Tm hiu lp GridView ......................................................................................... 133
17.2.1 Cc thuc tnh v ct thuc tnh..................................................................................133 17.2.2 Cc style p dng cho GridView.................................................................................134 17.2.3 Cc s kin ..................................................................................................................135 17.2.4 Cc phng thc .........................................................................................................136

17.3 Cc tnh nng h tr ca GridView ....................................................................... 137


17.3.1 Phn trang....................................................................................................................137 17.3.2 Tnh nng t ng sp xp ..........................................................................................139 17.3.3 Cc mu hin th - Template .......................................................................................140

17.4 To cc ct ty bin HyperLink, BoundColunm................................................ 141


17.4.1 To ct BoundField th cng ......................................................................................141 17.4.2 To mt ct hyperlink .................................................................................................141

17.5 To v x l cc ct Select, Edit, Delete, Update .............................................. 144


17.5.1 Thm ct Select, Edit - Update, Delete .......................................................................144 17.5.2 Cp nht d liu ..........................................................................................................145

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 3

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


17.5.3 Xa d liu ..................................................................................................................146

BI 18: THC HNH ....................................................................................... 148 BI 19: S dng Templates ............................................................................... 155
19.1 Gii thiu tng quan ..............................................................................................155 19.2 Cc iu khin h tr Templates............................................................................155
19.2.1 Mt s iu khin h tr Template thng dng ........................................................155 19.2.2 Cc loi Template........................................................................................................155

19.3 Repeater control, DataList control, GridView control............................................156


19.3.1 To template vi GridView. ........................................................................................156 19.3.2 To template vi DataList ...........................................................................................160 19.3.3 To Template vi Repeater (light-weight) ..................................................................161 20. ng gi website ..............................................................................................................162

BI 20: THC HNH ....................................................................................... 163

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

TRUNG TM HNG YN APTECH


a ch in thoi E-mail Website : : : : Tng 2, Nh A i hc SPKT Hng Yn 0321-713.319; Fax: 0321-713.015 aptech@utehy.edu.vn; http://www.aptech.utehy.vn

TI LIU KHA HC LP TRNH ASP.NET


Bin son: - Nguyn Minh Qu - Phm Ngc Hng - L Quang Li

HNG YN 7/2008
V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 5

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI S 1: M U V ASP.NET
Mc tiu: Kt thc bi hc, sinh vin c th
Nu c cc c im chnh ca cng ngh .NET M t c cc thnh phn c bn bn trong .NET Framework Ci t v cu hnh h thng chy cc trang ASP/ ASP.NET S dng h thng IDE ca VS 2008 to, lu v chy ng dng web Nu c cc u im ca web ng - DHTML nh dng trang web s dng CSS Truy xut cc thuc tnh ca phn t web thng qua CSS v Javascript

Ni dung

1.1. Gii thiu tng quan cng ngh .NET


1.1.1 S ra i ca .NET Trc y v c ngy nay, trong lnh vc pht trin phn mm c rt nhiu (hng ngn thm ch hng vn) ngn ng lp trnh c s dng pht trin phn mm (nh Delphi, Ada, Cobol, Fortran, Basic, LISP, Prolog, Foxpro, Java, Pascal, C/C++, Visual Basic, VC++, C#...). Mi ngn ng u c nhng u v nhc im ring, chng hn Fortran l la chn s mt cho cc tnh ton khoa hc; Prolog l la chn rt tt pht trin cc phn mm thng minh (AI, Expert Systems); Java c li th pht trin cc ng dng mng, ng dng Mobile v c lp h iu hnh (Write One Run Everywhere); Visual Basic t ra d hc v d pht trin cc ng dng Winform; C# vt tri bi s kt hp gia sc mnh ca C++ v s d dng ca Visual Basic Nhng u im c tnh c th ca tng ngn ng l iu c khng nh. Tuy nhin, iu m ai cng thy r l rt kh c th tn dng c sc mnh ca tt c cc ngn ng lp trnh trong mt d n phn mm, chng hn khng th hoc rt kh khn vit mt ng dng c s dng ng thi c ngn ng Visual Basic v Java hay Foxpro vi Delphi v.v Ni cch khc, vic lin thng gia cc ngn ng l gn nh khng th. Cng do s khc bit gia cc ngn ng lp trnh m vic tip cn hay chuyn i sang ngn ng lp trnh mi s tn rt nhiu thi gian (Tuy rng v t tng v nguyn l c tng t nhau). V vy, khi cc d n s dng ngn ng lp trnh khc nhau th chi ph cho chuyn i/ hc hi s l rt ln, gy lng ph thi gian khng cn thit v cht lng phn mm chc chn khng cao. Ngoi ra, cng vi s pht trin nh v bo ca Internet th m hnh pht trin ng dng cng rt khc xa. Cc ng dng ngy nay khng ch chy ring l (stand-alone) trn my tnh PC m cn c th chy trn mi trng mng, cung cp hay truy cp cc dch v t xa (ng dng phn tn). Vai tr ca phn mm dn chuyn t ch cung cp cc chc nng (Funtional) c th sang cung cp cc dch v (Services). T nhng hn ch trong qu trnh pht trin phn mm nh nu, i hi phi c mt cch tip cn sao cho ti u nht, va m bo tn t chi ph chuyn i va m bo nhiu ngi c th tham gia cng mt d n m khng nht thit phi vit trn cng mt ngn ng lp trnh, ng thi ng dng phi hot ng tt trong mi trng mng Internet. chnh l l do Microsoft cho ra cng ngh pht trin phn mm mi .NET! Microsoft .NET l mt nn tng (Platform) pht trin ng dng mi v hon chnh nht t trc ti nay. S ra i ca Microsoft.NET c tnh cch mng, n em n cho cc nh lp trnh mt phong cch pht trin phn mm t ph, khc phc hu ht cc hn ch trc V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 6

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu y ca cc ngn ng lp trnh. Vic s dng .NET khng ch gip pht trin cc ng dng n l m cn c th pht trin cc ng dng phn tn qui m rt ln; .NET lm gim thiu thi gian pht trin ng dng, nng cao r rt cht lng sn phm phn mm. Phin bn .NET u tin (v 1.0) c Microsoft a ra th trng vo nm 2001. 1.1.2 .NET Framework l g . Thng thng, mi ngn ng lp trnh u c mt tp cc th vin ring, chng hn: VC++ th c th vin chnh l msvcrt.dll; Visual Basic th c msvbvm60.dll Cc th vin ny cha cc hm, th tc c bn ca mi ngn ng (v d hm, th tc x l xu, x l ton hc,). Tt c nhng th ny c ngha logic ging nhau nhng v cch s dng hay c php th hu nh l khc nhau. iu ny khin cho mt lp trnh vin C++ khng th p dng nhng kin thc h bit sang VB hoc ngc li. Hn na, vic pht trin b th vin ring cho mi ngn ng nh vy l qu d tha. tng ca Microsoft l KHNG xy dng mt tp th vin ring bit cho tng ngn ng lp trnh m s xy dng mt b th vin dng CHUNG. Tp th vin dng chung ny hnh thnh nn mt b khung (Framework) cc lp trnh vin vit ng dng trn b khung sn c . B Khung ny thc cht l mt tp cc th vin c xy dng sn, p ng mi nhu cu pht trin cc ng dng Desktop, Network, Mobile, web

M hnh xy dng phn mm bng ngn ng truyn thng Cc thnh phn v chc nng chnh trong .NET Framework Common Language Runtime (Trnh thc thi ngn ng chung): Sau khi ng dng c bin dch ra file Exe (exe ny khc vi file exe thng thng. Ni dung ca file exe ny tun theo mt chun/ngn ng chung, d l vit bng C# hay VB.NET. Ngn ng ny gi l ngn ng chung), tip theo file exe trung gian ny c th chy c trn my hin hnh th cn phi c bin dch ra m my tng ng. Vic bin dch v chy c l nh Chng trnh thc thi ngn ng chung CLR (Common Language Runtime). Base Class Library: L tp cc th vin cha cc lp c bn s dng trong tt c cc ngn ng .NET. V d cc lp x l xu, x l ton hc ADO.NET: L tp cc th vin chuyn dnh cho thao tc vi C s d liu. ASP.NET: Cc th vin dnh cho pht trin cc ng dng Web (webform). V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 7

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Windows Forms: Cc th vin dnh cho pht trin cc ng dng Windows (winform). Common Language Specification: Phn ny c nhim v c t ngn ng chung cc chng trnh vit trn cc ngn ng lp trnh khc nhau phi tun theo. Ni cch khc, bin dch cc chng trnh vit trn cc ngn ng lp trnh khc nhau v mt ngn ng thng nht chung (Common Language). Nh iu ny m Cc ngn ng lp trnh.

Kin trc ca .NET Framework

M hnh bin dch v thc thi chng trnh ca ng dng .NET (1)

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

M hnh bin dch v thc thi chng trnh ca ng dng .NET (2)

Mt ci nhn khc v m hnh bin dch v thc thi ng dng 1.1.3 Mt s u im chnh ca .NET framework Tt c cc ngn ng u tha hng mt th vin thng nht. Khi sa cha hay nng cp th vin ny th ch phi thc hin mt ln. Phong cch pht trin ng dng nht qun v tng t nhau gia cc ngn ng lp trnh. C th chuyn i sang ngn ng lp trnh .NET khc nhau mt cch d dng. Vit cc ng dng webform khng khc nhiu so vi ng dng winform. Cung cp mt tp th vin truy xut CSDL thng nht (ADO.NET) cho mi ngn ng .NET. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 9

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu H tr c ch Write one Run everywhere (Vit mt ln chy mi ni). Mt ng dng vit bng .NET c th chy trn bt c h iu hnh no m khng cn phi sa li code, min l my c ci .NET framework. Cung cp h thng kiu chung (Common Type), do vy m bo tnh thng nht v kiu d liu gia cc ngn ng lp trnh. Cho php s dng nhiu ngn ng lp trnh trong cng mt d n. Kt tha v s dng cho gia cc ngn ng lp trnh d dng nh trn cng mt ngn ng (C th vit mt class trn C#, sau k tha trong VB.NET v ngc li). Vic trin khai (Deploy) cc ng dng d dng. Ch cn Copy-and-run (copy l chy). Khng cn ci t v trnh c a ngc DLL nh trc y.

1.2. Gii thiu ASP.NET


ASP.NET l cng ngh pht trin cc ng dng trn nn web, th h k tip ca ASP (Active Server Page Trang web c x l bn pha my ch). ASP.NET l mt thnh phn ni ti (c sn) ca .NET Framework. V vy n tn dng c sc mnh ca .NET Framework. ASP.NET c mt s u im chnh: C th s dng pht trin cc ng dng web mi kch c, t ng dng nh nht cho n ng dng ton doanh nghip (Enterprise). ng dng vit bng ASP.NET d dng tng thch vi nhiu loi trnh duyt khc nhau. Nh pht trin khng cn phi quan tm nhiu n trnh duyt no c s dng duyt website, iu ny s c framework t render ra m tng ng. Khi s dng b IDE ca Visual Studio, cch thc lp trnh s ging ht nh lp trnh winform. Truy xut d liu bng cng ngh ADO.NET c sn ca .NET Framework. Chy ng dng cc nhanh bi c ch bin dch v Cached. C th tng tc ng dng bng cch Cache cc iu khin, cc trang. Bo mt vt tri. Tn t dng lnh hn so vi ASP/PHP/Perl khi thc hin cng mt cng vic. D dng bo tr v d c hn bi Code v Giao din c tch bit. iu ny cng gip cho tnh chuyn bit ha cao hn. (Mt ngi ch lo code phn x l nghip v, ngi khc th ch lo code phn giao din v.v). ASP s dng ngn ng lp trnh VB.NET hoc C# hoc c hai pht trin ng dng.

1.3. Ci t Visual Studio.NET 2008


1.3.1 Cc phin bn .NET Cho n thi im ny (2008), Visual studio .NET c cc phin bn: Visual Studio 2003, .NET Framework 1.1 Visual Studio 2005, .NET Framework 2.0 Visual Studio 2008, .NET Framework 3.5 1.3.2 Ci t Visual Studio.NET 2008 B Visual Studio.NET 2008 c ng gi trong mt a DVD (tng ng 8 a CD). Trong bao gm c b MSDN. Kch thc khong 4.5 GB.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

10

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Vic ci t v cng d dng, ch vic chy file Setup sau chn cc mc nh khi c hi. Tuy nhin, tit kim khng gian a th ch nn chn cc sn phm cn thit ci t.

1.4. Gii thiu mi trng tch hp (IDE) ca ASP.NET.


Mt iu tht tuyt vi l Visual Studio s dng mt trnh IDE chung cho ton b ngn ng lp trnh (ASP.NET, VB.NET, C#,). iu ny m bo tnh nht qun cho cc ngn ng trn nn .NET, gip bn ch cn Hc mt ln nhng p dng mi ni.

Ca s giao din chnh ca mi trng pht trin tch hp. Trong : - Tab Design hin th trang web ch Design, tc l cho php sa cha ni dung trang web trc quan.

M trang ch Design

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 11

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu - Tab Source: M trang ch m ngun HTML. Ti y ngi dng c th son tho trc tip cc th HTML.

M trang ch Source - Tab Split: Cho php xem trang web ng thi c hai ch .

M trang ch kt hp, va xem code HTML va xem Design.

M ca s son Code (C#, VB.NET *** Ngoi thao tc trc tip thng qua h thng menu, nt lnh, ngi dng cn c th s dng t hp cc phm tt. (M menu bar v xem t hp phm tt bn cnh). V d: Shift+F7 xem ch Design, F7 xem ch Code, F4 Focus ti Properties.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

12

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Giao din ca h thng IDE.

1.5. To/lu/m/chy ng dng ASP.NET


1.5.1 To mi C th vo menu File New Website hoc biu tng trn thanh cng c.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 13

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

1.5.2 Lu ng dng Web - Nhn Ctrl-S lu trang hin ti - Nhn Ctrl-Shift-S lu ton b cc trang. 1.5.3 M (Chy) ng dng a) M ng dng web. Nhn t hp phm Alt-Shift-O Vo Menhu File, chn : Open Web Site C th m ng dng web theo mt trong cc cch nh sau:

M ng dng web t nhiu ngun. b) Chy ng dng web i vi ASP.NET, ton b ng dng web c th c bin dch thnh file nh phn chy nhanh hn. Tuy nhin ASP.NET cng cho php ngi dng chy tng trang ring bit. Nhn F5 (Hoc biu tng Debug trn trnh duyt. trn thanh cng c) chy ng dng v cho php

Nhn Ctrl-F5 chy ng dng nhng khng cho Debug trn trnh duyt. Trong trng hp mun chy chng trnh v g ri mc dng lnh/ th tc th c th nhn F8, Shift-F8.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

14

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Ngi dng c th chy (Browse) trang web bt k bng cch chn, sau click chut phi v chn mc View In Browser (Hoc nhn t hp phm CtrlShift-W). Trong trng hp c nhiu trnh duyt trong my th c th chn trnh duyt mc nh khi View In Browser bng cch click chut phi ln trang v chn Browse With nh hnh bn.

Chn trnh duyt mc nh

1.6. C bn v CSS v DHTML.


1.6.1 CSS i vi cc trang HTML trc y, vic nh dng (format) cc phn t thng c t theo c php dng, <Loi_phn_t Thuc_Tnh1=Gi_Tr1 Thuc_Tnh2=Gi_Tr2...>. y l cch nh dng c kh nhiu hn ch, rt kh c code cng nh kh bo tr. c bit khi xt n gc lp trnh. khc phc c nhng hn ch ny, hin nay ngi ta xut ra mt qui tc nh dng mi, l s dng CSS (Cascading Style Sheet bng nh kiu). CSS thc cht l mt tp cc qui tc format/ nh kiu (style) cho cc phn t c hin th v nh v trn trang web. Nh vo CSS m vic nh dng (kiu) cho cc phn t tr nn d dng v linh hot hn rt nhiu. Theo qui tc nh dng ca CSS th cc thuc tnh ca mt phn t no s c thit lp theo cch nht qun, dng: Thuc_Tnh: Gi_Tr; Thuc_Tnh:Gi_Tr; ..Danh sch y cc thuc tnh ny c th tra cu d dng trn Internet hoc chnh trnh son tho VS 2008 s t lit k trong khi chng ta son code. 1.6.2 DHTML Dynamic HTML (DHTML) l kh nng ca cc trang web c th thay i ni dung hin th v nh v ng ca cc phn t. Vi cc trang web tnh (Static web) th khi ni dung trang web c hin th ln trn trnh duyt th ngi dng khng c kh nng sa i ni dung cng nh thay i v tr ca cc phn t HTML. Cn i vi nhng trang web c s dng JavaScript v CSS th k c khi trang web hin th ri th vn c kh nng thay i ni dung (thm, sa, xa, thay i nh dng, v tr cc phn t). Trang web nh th c gi l trang web ng (pha client). Ch rng, trang web ng ny khc vi trang web ng (pha server) m phn sau chng ta s cp cc phn sau ca ti liu ny.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 15

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

1.7. nh dng cc th s dng CSS


1.7.1 nh dng mc dng (Inline) nh dng mc dng tc l vic nh dng cc phn t theo kiu CSS ngay trong nh ngha phn t. C php chung nh sau: <Loi_PT Style = tt1:gt1; tt2:gt2; ; ttn: gtn .> trong : tt = thuc tnh; gt = gi tr V d: nh dng cho textbox di y c nn xanh, ch trng v vin .

<input style="border-color:Red; background-color:Blue; color:White" />


1.7.2 nh dng bi b chn ID Khi mun cho mt lot cc phn t c cng thuc tnh ID ging nhau c nh dng nh sau th ngi ta nh ngha mt b chn ID. C php c dng: <style Type = text/css> #Tn { Tn_Thuc_tnh: Gi_Tr; Tn_Thuc_tnh: Gi_Tr; Tn_Thuc_tnh: Gi_Tr; } </style> V d: - nh ngha b chn tn l Chuong (Chng), c mu , c ch 20 v m.
#Chuong { color:Red; font-size:20pt; font-weight:bold; }

- p dng: < P id = Chuong> y l mu , c ch 20pt v m </P> < H1 id = Chuong> y cng l mu , c ch 20pt v m </H1> <H1 id=xyz> y th khng phi mu , v c thuc tnh ID Chuong</H1>. 1.7.3 nh dng bi b chn th (tag) Khi mun cho mt lot cc phn t cng loi c nh dng ging nhau m khng cn ID ging nhau th ngi nh ngha CSS kiu b chn: C php: <style Type = text/css> Tn_Loi_Th { Tn_Thuc_tnh: Gi_Tr; Tn_Thuc_tnh: Gi_Tr; Tn_Thuc_tnh: Gi_Tr; } </style> V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 16

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

V d y v B chn ID

V d v nh ngha b chn th 1.7.4 nh dng bi lp (Class) Cn mt cch nh ngha khc hay dng nht v linh hot nht l cch nh ngha lp, tng ch o l: Ta nh ngha sn mt lp cha cc nh dng v khi mun p dng nh dng cho phn t no n th ch vic gn lp ny cho phn t. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 17

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu C php nh ngha lp nh sau:
<style type="text/css"> .<Tn_Lp> { Tn_Thuc_Tnh: Gi_tr; Tn_Thuc_Tnh: Gi_tr; Tn_Thuc_Tnh: Gi_tr; } </style>

V d: nh ngha 2 lp l NenXanh_ChuTrang v lp Lien_Ket.


<style type="text/css"> .NenXanh_ChuTrang { color: White; background-color:blue; } .Lien_Ket { cursor:hand; color:Blue; } </style> V d s dng:

V d y v kt qu. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 18

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 1.7.5 Vn t chc lu tr. Cc nh ngha v CSS c th c t ngay trong tp ngun nhng cng c th c t ring ra mt tp khc. Tp ny thng c ui m rng l style. Ni dung ca tp ch cha cc nh ngha CSS (Gm nh ngha b chn ID, b chn th v lp). V d v mt tp CSS v cch tham chiu (s dng) tp .

S dng

Ni dung tp CSS v cch s dng tp CSS trong file ngun.

1.8. Truy xut thuc tnh cc th HTML v CSS bng JavaScript


1.8.1 Truy xut cc thuc tnh ca th Nhn chung, cc trnh duyt u t chc lu tr cc i tng theo cu trc phn cp, trong i tng window l i tng ln nht, n bao gm cc i tng con l Location, history, screen, event. C th thy r hn s phn cp ny trong hnh v sau y. T m hnh cc i tng ny, ta c th d dng bit cch truy xut ti cc phn t mong mun. Mt s cch khc dng truy xut ti cc phn t trong trang web l s dng cc phng thc document.GetElementById(ID_Ca_Phn_T) (ID t trong cp du ), document.GetElementsByName(Tn_Phn_t) hay document.all.<ID ca phn t> V d: - truy xut n phn t c ID=txtHoVaTen, c th vit: document.GetElementById(txtHoVaTen) hoc document.all.txtHoVaTen - truy xut n thuc tnh value ca phn t c thuc tnh id = txtHoVaTen, ta vit: document.GetElementById(txtHoVaTen).value hoc document.all.txtHoVaTen.value. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 19

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu - ly tt c cc phn t c cng gi tr name = chkMatHang, ta vit: document.getElementsByName("chkMatHang"), lnh ny s tr v mt mng cc phn t c gi tr l chkMatHang. - ly tt c cc th l input, ta vit: document.getElementsByTagName("input"), lnh ny cng tr v cho ta mt mng cc phn t. ** Ch : Khi kt qu tr v l mt mng th c th duyt bng vng lp, v d:
<html> <body> <input type=text value = ASP.NET> <form id=form1 action= method=post> <script language="javascript" type="text/javascript"> var KetQua = document.getElementsByTagName("input"); var i; for (int i=0; i<KetQua.length; i++) { alert("Gi tr ca text box " + i + " l : " + KetQua[i].value); } </script> </form> </body> </html>

1.8.2 Truy xut cc thuc tnh CSS Trong qu trnh hot ng ca website, c th c nhng lc ta cn phi sa i gi tr thuc tnh CSS no ca mt phn t, khi ta cn phi truy cp n thuc tnh ny. C php truy cp nh sau: window.<ga tr ID>.style.<thuc_Tnh> hoc <gi tr ca th>.style.<thuc_Tnh> hoc window.<Gi tr Name>.style.<thuc_Tnh> hoc <Gi tr Name ca th>.style.<thuc_Tnh> V d, c th c t CSS nh sau:
<html> <body> <input type="text" id="txtThongBao" name="txtTB" Style = "color:white; background-color:Blue" value = "y l mt thng bo c ch trng v nn ...." /> <input type="button" value="Click here" onclick="ChangeColor()" /> <script language="javascript" type="text/javascript"> function ChangeColor() {

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

20

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


txtThongBao.style.color="yellow"; // Hoc txtTB.style.color="yellow"; // Hoc window.txtThongBao.style.color="yellow"; // Hoc window.txtTB.style.color="yellow"; } </script> </body> </html>

*** Ch : Trong cc ng dng web ngy nay, thuc tnh name t c dng v thuc tnh id c s dng ph bin hn. V vy, nh danh cho cc phn t trong trang web, chng ta nn s dng thuc tnh id thay v name (tr nhng ngoi l).

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 21

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI S 2: THC HNH
Mc tiu: Kt thc bi thc ny, ngi hc c th
To v nh dng cc th HTML bng CSS Truy xut cc i tng trnh duyt v cc phn t HTML bng JavaScript. To trang web ng k c x l tnh hp l ca d liu nhp vo. Ni dung:

nh dng cc phn t bng CSS v s dng JavaScript kim tra d liu Yu cu:
To mt trang web trong VS 2008 phc v vic nhp thng tin v cn b. Trang web ny c to trn IIS Cc b. S dng cc style nh ngha cho cc phn t. S dng JavaScript kim tra tnh hp l ca d liu. c t giao din, chc nng v cc rng buc: 1. Giao din (Trang bn) 2. c t x l - Khi ngi dng nhn vo nt th thc hin gi ton b ni dung ang nhp ca trang hin hnh sang trang CapNhatCanBo.aspx. - Khi ngi dng nhn vo nt reset tr v gi tr mc nh (nh trong hnh). 3. th ni dung trong cc nhp c

c t rng buc H v tn khng c rng v phi <= 40 k t. Ngy, thng nm phi hp l. Cc trng nh du * l bt buc phi c. Cc trng s (nh ngy sinh, h s lng,) phi l cc s, khng c l k t. Cc hp Textarea khng c qu 1000 k t. cc hp text, khi ngi dng click chut (focus) th gi tr mc nh s b xa cho ngi dng g gi tr mi. Nu ngi dng di chuyn sang phn t khc m khng nhp gi tr no th t li gi tr mc nh nh ban u. Khi trng no nhp sai th s t focus vo ng trng sai .

4. Mt s kin thc cn thit v gi : nh ngha style cho cc mc ging nhau t thuc tnh Action cho form chuyn thng tin cho trang bt k Dng hm isNaN (n) kim tra xem n c phi l s hay khng. Dng phng thc focus ca phn t t tiu im. To cc phn t kiu submit v kiu reset cho nt Cp nhp v nhp mi. Vit mt hm kim tra cho s kin Onclick ca nt Cp nht. Nu khng mun cho mt s kin no (v d onclick) kch hot th vit trong s kin l return false hoc return KQ; vi KQ l mt biu thc, hm c gi tr false

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

22

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 23

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Hng dn:
1. nh ngha style: Khi thit k giao din cho trang web, trc ht cn xc nh xem c nhng phn t no cng mt nh dng (style). Khi ta nn nh ra mt class cha cc nh dng mong mun p dng cho cc phn t cng loi ny.

Lession02.css
.HeadTitle { font-size: xx-large; font-weight: bold; text-align: center; color:Purple; margin-bottom:30px; } .CellSpace { border-spacing:1px; } .Tiu__Chnh { color:White; background-color:Purple; font-size:12pt; font-weight:bold; margin:5px 0px 5px 0px; height:25px; } .Ct1 { color:Gray; font-style:italic; text-align:right; width:30%; } .Ct2 { width:70%; text-align:left; } .TextboxDi { width:99%; text-align:left; }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

24

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


.TTBatBuoc { background-color:Yellow; } .Table { table-layout:auto; border-style:solid; border-color:Purple; border-width:1px; border-collapse:collapse; background-color:White; width:800px; } td { vertical-align:middle; } input { margin:2px 0px 2px 2px; } input.NgayThang { text-align:center; width:80px; } select { text-align:center; width:100px; }

2. Code trang giao din NhapHSCB.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapHSCB.aspx.cs" Inherits="Lession_02___LAB_YahooRegister" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Nhp h s cn b</title> <link rel="Stylesheet" href="Lession02.css" type="text/css" /> </head>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 25

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

<body > <form id="form1" action="CapNhatCanBo.aspx" method="post" > <div style="text-align:center"> <p style="border-bottom:solid; border-width:thin; font-size:20pt; margin:0; padding:0X; border-spacing:0px"> CHNG TRNH QUN L CN B VERSION 1.0 </p><br /> <br /> <p class="HeadTitle">NHP H S CN B</p> <table class="Table"> <tr class="CellSpace"> <td colspan="2" class="Tiu__Chnh">THNG TIN C NHN</td> </tr> <tr> <td class="Ct1">*H v tn</td> <td class="Ct2"><input type="text" id="HoVaTen" class="TextboxDi" /> </td> </tr> <tr> <td class="Ct1">*Ngy sinh (ngy/thng/nm)</td> <td class="Ct2"> <select id="NgaySinh"> <option value="">1</option> <option value="2">2</option> </select> / <select id="cboThangSinh" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> / <select id="NamSinh"> <option value="1950">1950</option> <option value="1951">1951</option> <option value="1952">1952</option> </select> Gii tnh: <input type="radio" id="optNam" checked="checked" /> Nam

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

26

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<input type="radio" id="optNu"/>N </td> </tr> <tr> <td class="Ct1">Chc v hin ti (ng, chnh quyn,...)</td> <td><input type="text" class="TextboxDi" /></td> </tr> <tr> <td class="Ct1">*Qu qun</td> <td class="Ct2"> <input type="text" class="TextboxDi"/></td> </tr> <tr> <td class="Ct1">*Ni hin nay</td> <td class="Ct2"> <input type="text" class="TextboxDi"/></td> </tr> <tr> <td colspan="2" class="Tiu__Chnh">TRNH HC VN</td> </tr> <tr> <td class="Ct1"> Dn tc : </td> <td class="Ct2"><input type="text" /> Tn gio: <input type="text" /> </td> </tr> <tr> <td class="Ct1">Thnh phn gia nh:</td> <td class="Ct2"> <input type="text" class="TextboxDi"/></td> </tr> <tr> <td class="Ct1">Ngh trc khi tuyn dng</td> <td class="Ct2"><input type="text" class="TextboxDi" /></td> </tr> <tr> <td class="Ct1">Tham gia cch mng: </td> <td class="Ct2"> Ngy <input value="..../...../......" style="width:15%; text-align:center" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);" /> T chc <input style="width:20%" /> Cng tc <input style="width:20%" /> </td> </tr> <tr> <td class="Ct1">Ngy vo ng: </td> <td class="Ct2"><input type="text" value="...../...../....." id="NgayVaoDang" class="NgayThang" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 27

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


ngy vo chnh thc <input type="text" class="NgayThang" value="...../...../....." onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> </td> </tr> <tr> <td class="Ct1">Ngy nhp ng:</td> <td class="Ct2"><input type="text" value="..../...../...." class="NgayThang" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> ngy xut ng <input type="text" class="NgayThang" value="..../...../....." onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> </td> </tr> <tr> <td class="Ct1">*Trnh Vn ha: </td> <td class="Ct2"><input style="width:15%" /> Hc hm: <select> <option value="">-----</option> <option value="Thc S">Thc s </option> <option value="Tin S">Tin s</option> </select> Hc v : <select> <option value="">-----</option> <option value="Gio s">Gio s</option> <option value="Ph gio s">Ph gio s</option> </select> </td> </tr> <tr> <td class="Ct1">L lun chnh tr </td> <td class="Ct2"> <select> <option>-----</option> <option value = "S cp">S cp</option> <option value="Trung cp">Trung cp</option> <option value="Cao cp">Cao cp</option> <option value="C nhn">C nhn</option> </select> </td> </tr> <tr> <td class="Ct1">Trnh ngoi ng</td> <td class="Ct2"> Anh <select><option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

28

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</select> Nga <select> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> Php <select> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <td class="Ct1">*Ngch cng chc, vin chc:</td> <td class="Ct2"> <input style="width:20%" /> M s: <input style="width:15%" /> *H s lng: <input style="width:15%" /> </td> </tr> <tr> <td class="Ct1">Danh hiu c phong (nm): </td> <td class="Ct2"><input class="TextboxDi" /></td> </tr> <tr> <td class="Ct1">S trng cng tc:</td> <td class="Ct2"><input class="TextboxDi" /></td> </tr> <tr> <td class="Ct1">Khen thng (hun,huy chng cao nht)</td> <td class="Ct2"><input class="TextboxDi" /></td> </tr> <tr> <td class="Ct1">K lut (ng, chnh quyn, nm, l do, hnh thc)</td> <td class="Ct2"> <textarea class="TextboxDi" cols="50" rows="3"></textarea> </td> </tr> <tr class="Tiu__Chnh"> <td colspan="2"> O TO, BI DNG CHUYN MN, NGHIP V, L LUN, NGOI NG </td> </tr>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 29

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

<tr> <td class="Ct1">Ghi r Tn trng, ngnh hc, thi gian, loi hnh,vn bng, chng ch</td> <td><textarea class="TextboxDi" cols="100" rows="5"></textarea> </td> </tr> <tr> <td colspan="2" style="color:Blue"> ** Loi hnh: Chnh qui, ti chc, chuyn tu, bi dng; vn bng: Tin s, thc s, c nhn, k s. </td> </tr> <tr class="Tiu__Chnh"> <td colspan="2">TM TT QU TRNH CNG TC</td> </tr> <tr> <td class="Ct1">Ghi r thi gian bt u v kt thc; chc danh, chc v, n v cng tc tng ng)</td> <td><textarea class="TextboxDi" cols="100" rows="5"></textarea></td> </tr> <tr class="Tiu__Chnh"> <td colspan="2">c im lch s bn thn</td> </tr> <tr> <td class="Ct1">c im lch s bn thn</td> <td class="Ct2"> <textarea class="TextboxDi" cols="100" rows="5"></textarea> </td> </tr> <tr> <td class="Ct1">Quan h vi ngi nc ngoi</td> <td class="Ct2"> <textarea class="TextboxDi" cols="100" rows="5"></textarea> </td> </tr> <tr> <td class="Ct1">Quan h gia nh (B, m, anh ch em rut)</td> <td class="Ct2"> <textarea class="TextboxDi" cols="100" rows="5"></textarea> </td> </tr> <tr> <td class="Ct1">Hon cnh kinh t gia nh</td> <td class="Ct2"> <textarea class="TextboxDi" cols="100" rows="5"></textarea>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

30

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</td> </tr> </table> <br /> <table class="Table" style="border:0"> <tr> <td style="text-align:right"><input type="submit" value=" Cp nht " onclick="return KiemTra();" /></td> <td style="text-align:left"><input type="reset" value=" Nhp mi /></td> </tr> </table> </div> </form> <script language="javascript" type="text/javascript"> var Gi_Tr_C; /// Hm x l khi ngi dng bm vo nt Nhp function KiemTra() { if (form1.HoVaTen.value.length==0) { alert("H tn phi khc rng !"); form1.HoVaTen.focus(); return false; } if( isNaN(form1.NgaySinh.value)==false) { alert("Ngy sinh phi l s "); form1.NgaySinh.focus(); return false; } return true; } /// Hm x l khi phn t nhn c focus function XuLyFocus(txt) { Gi_Tr_C=txt.value; txt.value=""; } /// Hm x l khi phn t mt focus function XuLyLostFocus(txt) { if (txt.value=="") txt.value=Gi_Tr_C; } </script> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 31

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI S 3: ASP.NET v Web form


3.1 M hnh lp trnh pha my ch
Trong th gii web, tt c cc giao tip gia Client (trnh duyt) v Server (web server) u c thc hin theo c ch Request and Response. Tc l, trc tin pha my khch cn phi requesst (gi yu cu) ti Server, sau pha server s response (hi p) li yu cu. Cng mt c ch ny, ngi ta c 2 cch tip cn x l request trang web t my khch: Cch 1: Khi my khch yu cu mt trang v d trang abc. th my ch s c ton b ni dung ca trang v gi v cho pha my khch m khng thc hin bt k x l no. N hon ton khng qua tm n ngha bn trong ca trang abc. Ni dung trang ny sau s c pha trnh duyt x l. Cch 2: Khi my khch yu cu mt trang v d trang xyz. th my ch s c ton b ni dung ca trang v x l ti Server (trc khi gi v cho client) c kt qu, tip theo ly kt qu x l c gi v cho pha my khch. Kt qu tr v cho my khch c th cha cc phn t HTML, cc cu lnh JavaScript, cc nh ngha kiu CSS.v tip tc c pha client (trnh duyt) x l nh cch 1. Vi cch 1, do vic x l khng din ra bn pha server nn trang web khng th c/ ghi cc d liu trn Server c (v d Danh sch khch hng, danh mc sn phm,.). V vy n ch ph hp vi cc trang web n gin, khng i hi x l chi tit. Vi cch 2, do vic x l thng tin ti server nn hon ton c th c/ ghi d liu trn chnh server . V vy, n ph hp vi cc d n ln v tnh bo mt cao. M hnh theo cch ny gi l m hnh lp trnh pha my ch. Di y l hnh nh minh ha cho 2 m hnh ny: M hnh lp trnh pha my khch (Client side)

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

32

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu M hnh lp trnh pha my ch

Cu hi: Khi no th mt trang s c x l bn Server trc ?. hay ni cch khc l khi no th c gi l x l theo m hnh pha server? Tr li: Cc trang (file) c ui m rng m server c th x l, v d: asp, php, jsp, aspx Cu hi: C th ly mt v d v mt trang s c x l pha server v trang s khng c x l pha server ? Trang Trang1.htm <html> <body> Hello world </body> </html> Trang2.aspx
<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div>
<% Response.Write (DateTime.Today.Date.ToString()); %>

2 dng ny s c x l bn pha server trc

</div> </form> </body> </html>

Cu hi: Chng trnh Client v server c nht thit phi nm trn hai my tnh ring bit khng ? v Client l cc trnh duyt ri (IE, FireFox), cn server l chng trnh no ? Tr li: Hai chng trnh ny hon ton c th nm trn cng mt my tnh. Chng trnh server thc cht l mt chng trnh c tn l IIS (Internet Information Service).

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 33

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Cu hi: Phi vit nh th no server hiu l cn phi x l bn pha server trc khi gi v cho pha Client ? Tr li: Trc tin phi t phn m rng cho file (v d .aspx), sau trong trnh duyt cn phi t nhng ni dung mun x l bn pha server trong cp th c bit, v d:

<% Response.Write (DateTime.Today.Date.ToString ()); %>


Hoc: <form id="form1" runat="server">
<asp:Calendar

runat="server"

ID="Lch"> </asp:Calendar>

</form> *** Chnh cc k hiu <% %> v Runat = Server mch bo Server l : Hy x l ni dung bn pha server i!. Nu khng c nhng k hiu ny th mc nhin server lm mi vic l gi tr li cho trnh duyt x l. Cu hi: Sao khng gi ngay cho trnh duyt x l nh trc y m c phi server x l !. Client x l s gim ti cho server, iu ny chng tt hn sao ? Tr li: V trnh duyt ch c th hiu v x l c cc th HTML v Javascript thi, cn n khng th x l c cc ni dung phc tp. V d n khng hiu asp:Calendar l g ?

3.2 C ch x l file ASP.NET pha my ch.


i vi cc trang ASP.NET, th c ch x l ging nh m t trn, tc l theo m hnh x l bn pha server. Nhng c b sung thm tnh nng Compile and Cache:

Gii thch c ch x l trn:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

34

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Bc 0: Ngi lp trnh phi to cc trang ASPX (gi s tn trang l abc.aspx) v t n vo trong th mc web ca web server (c tn l www.server.com). Trn thanh a ch ca trnh duyt, ngi dng nhp trang www.server.com/abc.aspx. Bc 2: Trnh duyt gi yu cu ti server vi ni dung: Lm n gi cho ti trang abc.aspx th tt !. Bc 3: web server s bin dch code ca trang aspx (bao gm c cc m code vb.net/ c# - gi l code behind hay code file) thnh class. Bc 4: Lp sau khi c bin dch s thc thi. Bc 5: tr kt qu v cho trnh duyt

Ring vi ASP.NET th vic bin dch s c thc hin thng minh hn, nh sau:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 35

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

3.3 Mt s v d minh ha.


3.3.1 Yu cu x l ti pha server thng qua Runat=Server

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

36

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 3.3.2 Yu cu x l bn pha server thng qua cp th <% %>

Ngoi 2 cch trn, cn 2 cch yu cu x l trang web trc tip trn server, l: t cc cu lnh ngay trong cp th Script, nhng c thuc tnh Runat = Server:
... <script language="C#" type="text/C#" runat="server"> /// <summary> /// Cc cu lnh/ khai bo bin/ khai bo hm/ nh ngha lp v.v... /// cn x l bn pha server th t vo y ! V d: /// </summary> string HoVaTen = "Aptech Center"; public int Tong (int a, int b) { return a + b; } // Hoc nh ngha lp public class Example { public int Tich (int a, int b) { return a * b; } } </script> ..

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 37

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 3.3.3 Yu cu x l bn server thng qua Script

3.3.4 Yu cu x l bn pha server bng cch t trong Code file

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

38

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

3.4 Webform trong ASP.NET


xy dng ng dng web, ASP.NET cung cp sn cho cc nh lp trnh rt nhiu lp ngay khi ci t .NET framework. Trong s ny c mt lp c bit quan trng l Page. Mi lp Page s trnh by mt trang ti liu tng ng vi mt window v c gi l mt web form. Web form l mt cng ngh cho php xy dng cc trang web trong c th lp trnh c. Cc trang ny gi l ASP.NET web form pages hay ngn gn l web form. Cc trang web xy dng bng ASP.NET s khng ph thuc vo trnh duyt (tc l trnh duyt no cng cho kt qu nh nhau v hin th ging nhau). Mt s u im ca web forms: Web forms c th c thit k v lp trnh thng qua cc cng c pht trin ng dng nhanh (RAD). Web form h tr mt tp cc iu khin (controls) c th m rng. Bt k mt ngn ng .NET no cng c th c dng lp trnh vi web forms. Asp s dng trnh thc thi ngn ng chung (CLR) ca .NET framework do tha hng mi u th ca .NET Framework. V d : Kh nng tha k.

3.5 Tm hiu cu trc trang ASP.NET


Mt trang ASP.NET bao gm c phn giao din ngi dng v phn x l logic bn trong. Giao din ngi dng chu trch nhim hin th cc thng tin v tip nhn d liu t ngi dng, trong khi phn x l (lp trnh) m nhim vic iu khin s tng tc ca ngi dng vi trang web. Phn giao din ngi dng bao gm mt file cha ngn ng nh du nh HTML hoc XML v server controls chng hn. File ny c gi l mt Trang (Page) v c ui m rng l aspx. Phn p ng cc tng tc ca ngi dng vi trang web c thc hin bi mt ngn ng lp trnh chng hn nh Visual Basic.NET v C#. Chng ta c th thc hin vic vit code bng bt k ngn ng lp trnh no c h tr bi CLR ngay trong trang ASPX hoc tch ra mt file ring. File tch ring ny c gi l file Code Behind hay mi y gi l Code file. ui m rng ca Code file l .VB (Nu dng ngn ng Visual Basic) hoc .CS (nu dng ngn ng C#).

Cch lu tr ny c minh ha qua mt ng dng c th di y. Trong , trang web th nht Default2.aspx cha c code (C#) v giao din (HTML) cn trang web th hai t code v giao din ra 2 file ring bit. default.aspx v default.cs. *** Ch : C th kt hp va t code trong file aspx va t code trong file cs. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 39

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Trang Default2.aspx cha code bn trong n.

Code c t trong default.cs Cn phn giao din cha trong default.aspx

Mt webform bao gm 2 thnh phn: Thnh phn giao din (trang thisfile.aspx) Thnh phn x l (lp trnh) thisfile.cs

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

40

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Phn tch mt trang ASP.NET thc t (Trang ny lu code v giao din trn 2 file):

File Default.aspx
<%@ Page Language="C#" CodeFile="~/Lession 03/Default.aspx.cs" Inherits ="Lession03_default"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Server side - example 3</title> </head> <body> <form id="form1" runat="server"> <asp:TextBox id="txtA" runat="server" width="50px" /> <asp:TextBox id="txtB" runat="server" width="50px"/> <asp:Button id="cmdTinhTong" Text="Tnh" runat="server" OnClick="Tong" /> <asp:TextBox id="txtKetQua" runat="server" width="50px"/> </form> </body> </html>

Ni dung file code (default.cs) nh sau: File Default.cs


using using using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

public partial class Lession03_default : System.Web.UI.Page { protected void Tong (object sender, EventArgs e) { txtKetQua.Text = (int.Parse (txtA.Text) + int.Parse (txtB.Text)).ToString (); } }

Trong file default.aspx:


- Page Language="C#" : ch ra rng ngn ng c s dng lp trnh l C# - CodeFile="~/Lession 03/Default.aspx.cs": Cho bit ni dung file cha code x l
l file ~/Lession 03/Default.aspx.cs. - Inherits ="Lession03_default": Cho bit l trang giao din tha k t lp no trong file ~/Lession 03/Default.aspx.cs (Bi v mt file c th c cha nhiu lp).

- <head runat="server">
<title>Server side - example 3</title>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 41

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</head> Cho bit l th ny cn c x l bn pha server. Tuy nhin ni dung trong th ny khng c g c bit x l v kt qu sau x l s l (khng c runat=server): <head> <title>Server side - example 3</title> </head> <form id="form1" runat="server"> : Cho bit l ni dung trong cp th form cn c x l bn pha server. <asp:TextBox id="txtA" runat="server" width="50px"/> : l th to ra phn t textbox, tuy nhin do c thuc tnh runat = server nn vic to ny s c thc hin bn server, c kt qu tr v (l <input type=TextBox id="txtA" style = width:50px>

<script language="C#" type="text/C#" runat="server"> public int Hieu (int a, int b) { return a - b; } </script>

on script ny c thuc tnh runat=Server, v vy n s c x l pha server. Thuc tnh language = C# cho bit ngn ng s dng vit l C Sharp.

Trong file default.cs


Ni dung file ny hon ton cha cc cu lnh ca ngn ng lp trnh VB.NET hoc C#. Vic vit code cho file hon ton ging nh vit cc chng trnh trn window form hay chng trnh Console. Ch : Trong file ny khng c cha trc tip cc th HTML. Cc cu lnh trong file ny HON TON C PHP TRUY CP TI CC PHN T trong file default.aspx c thuc tnh runat = server. Cu hi: Nu trong file default.cs c dng lnh sau:
cmdTinhTong.Text = Tnh tng; th chng trnh c bo li khng ? V sao ?

3.6 Code behind v vit code pha Server.


Cc file cha m code (VB.NET hoc C#) c gi l Code file (cch gi mi) hay Code behind (cch gi c). M lnh ti y thng x l cc tc v lin quan n nghip v, trong cng c cc cu lnh cho php gi kt qu v cho pha trnh duyt. C th l phng thc write ca i tng Response. V d mun tr mt xu S v cho trnh duyt hin th, ta vit: Response.write(S). Vic s dng phng thc write ny nh th no sinh ra cc phn t cho trnh duyt hiu l mt k nng quan trng. Nhn chung, ngi ta thng chia cc web form thnh 2 phn l trang cha giao din (aspx) v trang cha m code (.vb; .cs) m bo tnh chuyn mn ha v d bo tr hn.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

42

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

3.7 HTML Server Controls v Web controls


3.7.1 Gii thiu gip cho vic pht trin cc ng dng web nhanh chng v thun tin, ASP.NET cung cp cho chng ta mt tp hp cc iu khin sn c thc hin hu ht cc cng vic ph bin hng ngy. Cc iu khin ny chia lm 2 loi: HTML Server Control v ASP.NET server control. Cc iu khin (phn t) ny u c x l bn pha server (c thuc tnh runat=server) v vy chng ta u c th truy cp n cc phn t ny bng cc cu lnh C# (cc cu lnh nm bn trong Code file). im khc bit gia HTML Server control v ASP.NET server control ch: iu khin HTML Server control th c s lng v cch thc to ging ht cc phn t HTML m ta vn to trong trang HTML, ch khc mt iu l c thm runat = server; iu khin ASP.NET control th c nhiu thuc tnh hn, thc hin c chc nng phc tp hn HTMLServer controls.

3.7.2 Cch thc to phn t HTML Server Control v ASP.NET control a) HTML Server control C php to phn t HTML Server control: o <Tn_Loi_Th runat=server thuc_Tnh = gi tr .> o Trong : Tn loi th l input, select, p, h1, . V d: <input type = text id=txtHoTen runat = server> b) ASP.NET server control C php to phn t ASP.NET server control

o <asp: Loi_PT thuc_tnh = gi tr . runat = server> o Trong asp: l bt buc, Loi_PT c th l button, textbox, calendar, select,
treeview, adRotator, listview, gridview, image,. V d:

o o o

<asp:TextBox ID="txtHVT" runat="server"></asp:TextBox> <asp:Calendar ID="cal" runat="server" BorderColor="Blue"></asp:Calendar> <asp:Table> <asp:TableRow> <asp:TableCell>cell</asp:TableCell></asp:TableRow> </asp:Table>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 43

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu **** Ch **** c th truy xut ti cc phn t ny trong Code file (hay server script pha server) th mi phn t cn phi t cho n mt id duy nht. Trong tt c cc ng dung, nu c th c th nn dng cc ASP.NET server control m bo tnh tng thch vi trnh duyt. Cc iu khin ASP.NET server control hon ton c th do ngi dng to ra. (phn ny s c cp trong phn Lp trnh ASP.NET nng cao)

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

44

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 4: THC HNH
Mc tiu: Kt thc bi thc hnh ny, ngi hc c th
To cc phn t web server control S dng cc cu lnh pha server truy cp cc phn t trang web. To mt trang web cho php nhp thng tin v h s cn b.

Ni dung thc hnh 1. Yu cu


To mt trang nh bi thc hnh s 2 nhng s dng cc phn t ASP Server control thay v s dng cc phn t HTML.

2. Hng dn:
a) Cc kin thc c bn: To textbox:
<asp:TextBox runat="server" id="HoVaTen" class="TextboxDi" />

To textbox c nhiu dng:


<asp:TextBox runat="server" ID="txtKyLuat" TextMode="MultiLine" CssClass="TextboxDi" Rows="5" Columns="80"> </asp:TextBox>

To hp comboBox (HTML Server control)


<select runat="server" id="cboTiengAnh"> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select>

To hp ComboBox (ASP server control)


<asp:ListBox ID="cboTiengAnh" runat="server"> <asp:ListItem Text="A" Value="A"></asp:ListItem> <asp:ListItem Text="B" Value="B"></asp:ListItem> <asp:ListItem Text="C" Value="C"></asp:ListItem> </asp:ListBox>

Ch : Mun to danh sch dng ListBox, ch cn thm thuc tnh Rows vi gi tr > 1 - To nt Radio option (Nhng Radio c GroupName ging nhau s cng mt nhm)
<asp:RadioButton runat="server" type="radio" id="optNam" GroupName="GT" checked="true"/>

truy xut ti cc phn t server Control bng m lnh C#, c th thc hin nh lp trnh winform (console) thng thng. truy xut ti cc phn t trong mt danh sch v d ComboBox s dng thuc tnh Items. V d: cboNgaySinh.Items[1], b) Minh ha mu

NhapHSCB.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapHSCB.aspx.cs" Inherits="Lession_04" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 45

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Nhp h s cn b</title> <link rel="Stylesheet" href="Lession04.css" type="text/css" /> </head> <body > <form id="form1" action="CapNhatCanBo.aspx" method="post" runat="server" > <div style="text-align:center"> <p style="border-bottom:solid; border-width:thin; font-size:20pt; margin:0; padding:0X; border-spacing:0px"> CHNG TRNH QUN L CN B VERSION 1.0 </p><br /> <br /> <p class="HeadTitle">NHP H S CN B</p> <table class="Table"> <tr class="CellSpace"> <td colspan="2" class="Tiu__Chnh">THNG TIN C NHN</td> </tr> <tr> <td class="Ct1">*H v tn</td> <td class="Ct2"> <asp:TextBox runat="server" id="HoVaTen" class="TextboxDi" /> </td> </tr> <tr> <td class="Ct1">*Ngy sinh (ngy/thng/nm)</td> <td class="Ct2" > <asp:ListBox Rows="1" id="cboNgaySinh" runat="server"> </asp:ListBox> / <asp:ListBox Rows="1" id="cboThangSinh" runat="server" > </asp:ListBox> / <asp:ListBox Rows="1" id="cboNamSinh" runat="server" > </asp:ListBox> Gii tnh: <asp:RadioButton runat="server" type="radio" id="optNam" GroupName="GT" checked="true"/> Nam <asp:RadioButton runat="server" id="optNu" GroupName="GT"/>N </td> </tr> <tr> <td class="Ct1">Chc v hin ti (ng, chnh quyn,...)</td> <td><asp:TextBox runat="server" ID="txtChucVu" CssClass="TextboxDi" /></td> </tr> <tr>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

46

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<td class="Ct1">*Qu qun</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtQueQuan" CssClass="TextboxDi"/></td> </tr> <tr> <td class="Ct1">*Ni hin nay</td>
<td class="Ct2"> <asp:TextBox runat="server" ID="txtNoiOHienNay" CssClass="TextboxDi"/>

</td> </tr> <tr> <td colspan="2" class="Tiu__Chnh">TRNH HC VN</td> </tr> <tr> <td class="Ct1"> Dn tc : </td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtDanToc" Text="Kinh"/> Tn gio: <asp:TextBox runat="server" ID="txtTonGiao" Text="Khng" /> </td> </tr> <tr> <td class="Ct1">Thnh phn gia nh:</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtThanhPhan" cssclass="TextboxDi"/></td> </tr> <tr> <td class="Ct1">Ngh trc khi tuyn dng</td> <td class="Ct2">
<asp:TextBox runat="server" ID="txtNgheTruocKhiTuyen" CssClass="TextboxDi" />

</td> </tr> <tr> <td class="Ct1">Tham gia cch mng: </td> <td class="Ct2"> Ngy <asp:TextBox runat="server" ID="txtNgayThamGiaCM" Text="..../.../...."
style="width:15%; text-align:center" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);" />

T chc <asp:TextBox runat="server" ID="txtToChuc" style="width:20%" /> Cng tc <asp:TextBox runat="server" ID="txtCongTac" style="width:20%" /> </td> </tr> <tr> <td class="Ct1">Ngy vo ng: </td> <td class="Ct2">
<asp:TextBox runat="server" ID="txtNgayVaoDang" Text=".../.../..." CssClass="NgayThang"

onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> ngy vo chnh thc <asp:TextBox runat="server" ID="txtThangVaoDang"


cssclass="NgayThang" Text=".../.../..." onfocus="XuLyFocus(this)" onblur="XuLyLostFocus(this)"/>

</td> </tr> <tr> <td class="Ct1">Ngy nhp ng:</td>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 47

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<td class="Ct2"><input type="text" value="..../.../...." class="NgayThang" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> ngy xut ng <input type="text" class="NgayThang" value="..../.../..." onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> </td> </tr> <tr> <td class="Ct1">*Trnh Vn ha: </td> <td class="Ct2"><input style="width:15%" /> Hc hm: <select runat="server" id="cboHocHam"> <option value="">-----</option> <option value="Thc S">Thc s </option> <option value="Tin S">Tin s</option> </select> Hc v : <select runat="server" id="cboHocVi"> <option value="">-----</option> <option value="Gio s">Gio s</option> <option value="Ph gio s">Ph gio s</option> </select> </td> </tr> <tr> <td class="Ct1">L lun chnh tr </td> <td class="Ct2"> <select runat="server" id="cboTrinhDoLyLuan"> <option>-----</option> <option value = "S cp">S cp</option> <option value="Trung cp">Trung cp</option> <option value="Cao cp">Cao cp</option> <option value="C nhn">C nhn</option> </select> </td> </tr> <tr> <td class="Ct1">Trnh ngoi ng</td> <td class="Ct2"> Anh <select runat="server" id="cboTiengAnh"> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> Nga <select runat="server" id="cboTiengNga"> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> Php <select runat="server" id="cboTiengPhap"> <option>-----</option>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

48

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <td class="Ct1">*Ngch cng chc, vin chc:</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtNgach" style="width:20%" /> M s: <asp:TextBox runat="server" ID="txtMaNgach" style="width:15%" />
*H s lng: <asp:TextBox runat="server" ID="txtHeSoLuong" style="width:15%" />

</td> </tr> <tr> <td class="Ct1">Danh hiu c phong (nm): </td>


<td class="Ct2"><asp:TextBox runat="server" ID="txtDanhHieu" CssClass="TextboxDi" />

</td> </tr> <tr> <td class="Ct1">S trng cng tc:</td>


<td class="Ct2"><asp:TextBox runat="server" ID="txtSoTruongCT" CssClass="TextboxDi" />

</td> </tr> <tr> <td class="Ct1">Khen thng (hun,huy chng cao nht)</td>
<td class="Ct2"><asp:TextBox runat="server" ID="txtKhenThuong" CssClass="TextboxDi" />

</td> </tr> <tr> <td class="Ct1">K lut (ng, chnh quyn, nm, l do, hnh thc)</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtKyLuat" TextMode="MultiLine" CssClass="TextboxDi" Rows="5" Columns="80"></asp:TextBox> </td> </tr> <tr class="Tiu__Chnh"> <td colspan="2"> O TO, BI DNG CHUYN MN, NGHIP V, L LUN, NGOI NG </td> </tr> <tr> <td class="Ct1"> Ghi r Tn trng, ngnh hc, thi gian, loi hnh,vn bng, chng ch </td> <td><asp:TextBox runat="server" ID="txtQuaTrinhDaoTao"
CssClass="TextboxDi" TextMode="MultiLine" Columns="100" rows="5"></asp:TextBox>

</td>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 49

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</tr> <tr> <td colspan="2" style="color:Blue"> ** Loi hnh: Chnh qui, ti chc, chuyn tu, bi dng; vn bng: Tin s, thc s, c nhn, k s. </td> </tr> <tr class="Tiu__Chnh"> <td colspan="2">TM TT QU TRNH CNG TC</td> </tr> <tr> <td class="Ct1">Ghi r thi gian bt u v kt thc; chc danh, chc v, n v cng tc tng ng)</td> <td> <asp:TextBox runat="server" ID="txtQuaTrinhCongTac" CssClass="TextboxDi" TextMode="MultiLine" Columns="100" rows="5"> </asp:TextBox> </td> </tr> <tr class="Tiu__Chnh"> <td colspan="2">c im lch s bn thn</td> </tr> <tr> <td class="Ct1">c im lch s bn thn</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtDDBanThan" CssClass="TextboxDi" TextMode="MultiLine" Columns="100" rows="5"> </asp:TextBox> </td> </tr> <tr> <td class="Ct1">Quan h vi ngi nc ngoi</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtQHNguoiNN" CssClass="TextboxDi" TextMode="MultiLine" Columns="100" rows="5"> </asp:TextBox> </td> </tr> <tr> <td class="Ct1">Quan h gia nh (B, m, anh ch em rut)</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtQHGD" CssClass="TextboxDi" TextMode="MultiLine" Columns="100" rows="5"></asp:TextBox> </td> </tr> <tr> <td class="Ct1">Hon cnh kinh t gia nh</td> <td class="Ct2"> <asp:TextBox runat="server" ID="txtHoanCanhKT" CssClass="TextboxDi" TextMode="MultiLine" Columns="100" rows="5"></asp:TextBox>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

50

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</td> </tr> </table>
<asp:Label runat="server" id="lblTrangThai" visible="false" style="text-align:center" > </asp:Label>

<br /> <table class="Table" style="border:0"> <tr> <td style="text-align:right"> <asp:Button runat="server" id="cmdSubmit" Text=" </td> <td style="text-align:left"> <input type="reset" value=" Nhp mi " /> </td> </tr> </table> </div> </form> <script language="javascript" type="text/javascript"> var Gi_Tr_C; /// Hm x l khi phn t nhn c focus function XuLyFocus(txt) { Gi_Tr_C=txt.value; txt.value=""; } /// Hm x l khi phn t mt focus function XuLyLostFocus(txt) { if (txt.value=="") txt.value=Gi_Tr_C; } </script> </body> </html>

Cp nht " />

NhapHSCB.aspx.cs
using using using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 51

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


public partial class Lession_04 : System.Web.UI.Page { protected void Khi_To_Cc_Controls () { int i; ListItem L; //Ngy sinh for (i = 1; i <= 31; i++) { L = new ListItem (i.ToString (), i.ToString ()); cboNgaySinh.Items.Add (L); } // Thng sinh for (i = 1; i <= 12; i++) { L = new ListItem (i.ToString (), i.ToString ()); cboThangSinh.Items.Add (L); } //Nm sinh for (i = 1950; i <= 1990; i++) { L = new ListItem (i.ToString (), i.ToString ()); cboNamSinh.Items.Add (L); } } public void KiemTra () { if (txtHoVaTen.Text.Trim ().ToString () == "") { lblTrangThai.Visible = true; lblTrangThai.Text = "H tn khng c rng !"; } else { lblTrangThai.Visible = false; } } protected void Page_Load (object sender, EventArgs e) { Khi_To_Cc_Controls (); } protected void cmdSubmit_Click (object sender, EventArgs e) { KiemTra (); } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

52

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 5: Tm hiu v s dng cc Server/Ajax Controls


Mc tiu ca bi: Kt thc bi hc ny hc vin c th: Nu c chc nng ca mt s phn t HTML Server control v ASP Server Control thng dng. Khai bo s kin v vit c trnh x l s kin gn vo cc Controls. Phn tch c c ch x l s kin trong mt trang ASP.NET. S dng cc iu khin HTML, ASP Server control xy dng mt s ng dng n gin. Trnh by c tng quan v cng ngh AJAX.

5.1 HTML Server Controls


y l cc iu khin c to bng cch thm thuc tnh ID v RUNAT = "Server" bn trong mi th HTML thng thng. Cch ny thng c dng khi mun chuyn i mt trang ASP trc y sang ASP.NET. Tuy nhin, cc iu khin loi ny khng c nhiu thuc tnh phc v cng vic lp trnh. So vi ASP Server Control (hay web server control) th c dng t hn, do web server control tng thch vi nhiu trnh duyt hn v tp thuc tnh, phng thc cng phong ph hn rt nhiu. V l do v cng trnh s ln ln gia HTML Server control v web server control, k t nay v sau chng ta thng nht ch s dng web server control m khng s dng n HTML Server control (tr nhng ngoi l).

5.2 Web server Controls


c th s dng code bn pha server truy xut ti cc phn t trong webform, ASP.NET cung cp cho chng ta mt s phn t c bit, gi l web server control hay ASP Server controls. Vi cc phn t loi ny, chng ta c th to ra cc phn t rt phc tp ch vi mt hoc vi dng code. V d phn t Calendar, phn t GridView, Container,.Cc phn t ny h tr phong cch lp trnh theo m hnh hng i tng. 5.2.1 Khai bo (to cc phn t web server control) C php khai bo thng c dng: Dng 1 (Khng c th ng) <asp: Tn_iu_Khin ID = "nh danh duy nht" runat = "Server" tt1="gt1" tt2="gt2" /> Dng 2 (c th ng tng minh) <asp: Tn_iu_Khin ID = "nh danh duy nht" runat = "Server" tt1="gt1" tt2="gt2" > </ asp: Tn_iu_Khin>

Trong : 2 thuc tnh thng bt buc phi c l ID v runat. Thuc tnh ID l tn duy nht c dng tham chiu khi vit code pha server. Thuc tnh runat="Server" ch ra rng phn t ny cn phi c x l pha server trc khi gi v cho Client. C th t gi tr cho cc thuc tnh ngay bn trong cc th ny, thm ch c th a cc m JavaScript ! V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 53

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 5.2.2 C ch x l cc phn t web server control C ch x l cc phn t ny nh sau: Pha my ch s c nhng th no c thuc tnh runat = "Server" v em x l, kt qu sau khi x l s c gi tr v cho pha trnh duyt. Ta xt mt v d c th di y hiu r c ch x l cc phn t webserver control bn pha my ch: V d 1: X l th form c thuc tnh runat="Server"
<form runat="server"> </form> Server s c th form ny v x l (v c thuc tnh runat = "server"), v cho kt qu l: <form name="ctl01" method="post" action="Default.aspx" id="ctl01"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMRYrsdybepETo3ZpHQh9iJeRBA==" /> </div> </form> Nh vy, r rng l server "ch bin" thm mt cht trc khi tr v cho trnh duyt, l b thuc tnh runat="Server" nhng thm thuc tnh name="ct01", method, action, id ngoi ra cn thm cc th <div>, <input>. Ni cch khc l server bin ci ban u m trnh duyt khng th hiu c (phn c runat="server" trn) thnh ci m trnh duyt c th x l c (phn kt qu di).

V d 2: X l phn t TextBox:
<asp:TextBox ID="HVT" runat="server" Text="Hello" BackColor="blue"></asp:TextBox>

Server s ch bin (gender) thnh:


<input name="HVT" type="text" value="Hello" id="HVT" style="background-color:blue;" />

v d ny, sau khi x l server b thuc tnh runat, asp:TextBox, BackColor v to ra th tng ng m trnh duyt c th hiu l input, type="text", background-color, name V d 3: X l phn t Calendar Vi cc phn t phc tp hn th Server s phi mt nhiu cng ch bin hn. V d i vi th Calendar nh sau (ch c 1 dng):

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

54

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

<asp:Calendar ID="Cal" runat="server">

</asp:Calendar>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 55

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Th server s to ra on code HTML rt "khng" !!!:
<table id="Table1" cellspacing="0" cellpadding="2" title="Calendar" border="0" style="border-width:1px;border-style:solid;border-collapse:collapse;"> <tr> <td colspan="7" style="background-color:Silver;"> <table cellspacing="0" border="0" style="width:100%;"> <tr> <td style="width:15%;"> <a href="javascript:__doPostBack('cal','V3074')" style="color:Black" title="the previous month">&lt; </a> </td> <td align="center" style="width:70%;">July 2008</td> <td align="right" style="width:15%;"> <a href="javascript:__doPostBack('cal','V3135')" style="color:Black" title="Go to the next month">&gt; </a> </td> </tr> </table> </td> </tr> <tr> <th align="center" abbr="Sunday" scope="col">Sun</th> <th align="center" abbr="Monday" scope="col">Mon</th> <th align="center" abbr="Tuesday" scope="col">Tue</th> <th align="center" abbr="Wednesday" scope="col">Wed</th> <th align="center" abbr="Thursday" scope="col">Thu</th> <th align="center" abbr="Friday" scope="col">Fri</th> <th align="center" abbr="Saturday" scope="col">Sat</th> </tr> <tr> <td align="center" style="width:14%;"> <a href="javascript:__doPostBack('cal','3102')" style="color:Black" title="June 29">29</a> </td> <td align="center" style="width:14%;"> <a href="javascript:__doPostBack('cal','3104')" style="color:Black" title="July 01">1</a> </td> <td align="center" style="width:14%;"> <a href="javascript:__doPostBack('cal','3105')" style="color:Black" title="July 02">2</a> </td> <td align="center" style="width:14%;"> <a href="javascript:__doPostBack('cal','3106')" style="color:Black" title="July 03">3</a> </td> <td align="center" style="width:14%;"> <a href="javascript:__doPostBack('cal','3107')"

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

56

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


style="color:Black" title="July 04">4</a> </td> <td align="center" style="width:14%;"> <a href="javascript:__doPostBack('cal','3108')" style="color:Black" title="July 05">5</a> </td> </tr> >>>>> Cn gp khong 5 ln on code trn na >>>>>

V trang HTML truyn thng khng c mt phn t no c th hin th y mt lch biu (Calendar) nn ASP.NET phi to ra phn t bng cch kt hp t rt nhiu th HTML n gin (table, th, tr, td, a, ) nh trn. V d ny l mt minh chng cho thy ASP.NET lm n gin ha qu trnh pht trin ng dng. Gim thiu vic phi vit code v bo tr chng trnh d dng hn rt nhiu.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 57

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu V d 4: X l phn t web server control nhng c thm thuc tnh pha client l mt on script (Lu : Thuc tnh onClick khng c trong danh sch thuc tnh ca asp:label):
<asp:Label runat="server" ID="lblHello" Text="Hello world" onClick="alert('Hello world');"> </asp:Label>

Kt qu server x l phn t Label trn l:


<span id="Span1" onClick="alert('Hello world');">Hello world</span>

Ta bit rng phn t asp:Label khng c thuc tnh onClick (bng chng l khi g khng thy xut hin trong danh sch). Nhng khi chy trang web khng thy c bo li. Vy c ch x l ca ASP.NET l nh th no i vi nhng phn t nh th ny ? Cch thc nh sau: Khi cc th c runat="server" th s c web server c v x l tt c cc ni dung nm bn trong th . Tuy nhin, nu gp th no m c th n cha hiu (v d ch client hiu c) th n tr nguyn phn cho pha client. Chnh v vy m ta thy kt qu tr v cho pha client vn cha nguyn phn
onClick="alert('Hello world');". y cng l cch m ngi ta hay s dng an xen cc on code va c x l pha server, va x l pha client.

V d 5: X l cc phn t server m trong c cha m ca Client.


<asp:TextBox runat="server" ID="ht" Text="Hello" onmousemove="document.bgColor='blue';" onmouseout="document.bgColor='yellow';" />

Kt qu m server gi tr v trnh duyt sau khi x l l:


<input name="ht" type="text" value="Hello" id="Text1" onmousemove="document.bgColor='blue';" onmouseout="document.bgColor='yellow';" /> V hai s kin omMouseMove v onMouseOut khng c trn server nn n s gi nguyn gi tr cho pha trnh duyt. i vi trnh duyt th 2 s kin ny qu quen thuc: omMouseMove xut hin khi ngi dng di chut trn phn t textbox v s kin onMouseOut xut hin khi ngi dng di chuyn chut ra ngoi textbox.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

58

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 5.2.2 Thc thi cc cu lnh ti pha server Trong rt nhiu trng hp chng ta mun thc thi mt s cu lnh ngay ti pha server khi ngi dng thc hin mt thao tc no v d click chut th c th vit sn cc th tc s kin thc thi ng vi cc s kin ny. gi mt th tc (phng thc) pha server khi mt s kin xy ra i vi phn t web server control, th vit nh sau: <asp:Tn_Phn_T runat = "Server" onClick = "Tn_Phng_Thc" .> V d: Gi phng thc KiemTra khi ngi dng nhn vo nt "cmdKiemTra":
<asp:Button ID="cmdKiemTra" runat="server" OnClick="KiemTra" /> Lu : Tn ca phng thc trong phn OnClick khng cha tham s v du ngoc. Nhng khi nh ngha phng thc ny th thng phi c 2 tham s nh v d sau: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class _default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void KiemTra (object sender, EventArgs e) { /// t cu lnh y ! } }

5.2.3 M hnh x l s kin trong ASP.NET 1. Ln u tin khi trang web c chy. ASP.NET to trang v cc i tng v thc hin khi to, sau trang s c chuyn i (rendered) thnh trang HTML tr v cho pha client. Cc i tng ca trang sau cng c gii phng khi b nh ca server. 2. Ti mt thi im no , nu ngi dng thc hin mt s cng vic (v d click chut ln button c runat = "Server") khi h thng s t ng thc hin hnh ng gi l "Postback" (Dch l gi/gi tr li Server) v lc ton b d liu trong phn t form s c gi v Server. 3. ASP.NET to li cc i tng ca trang v tr v client trng thi cui cng khi chng c gi i. 4. Tip theo, ASP.NET s kim tra xem thao tc no gy ra s kin postback v kch hot (gi) s kin tng ng (v d Button.Click). Thng thng, trong phn

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 59

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu x l s kin ny chng ta thng thc hin mt s x l nh cp nht CSDL, kim tra,. 5. Trang ny sau c bin i (chuyn i) thnh trang HTML v gi v cho client (trnh duyt). Tip theo cc i tng ca trang (nh asp:Button; asp:ListBox,) s c gii phng khi b nh. Nu c s kin Postback khc xut hin th ASP.NET s lp li x l bc 2 cho n bc 4. Ch : Khi to mt s phn t nh Button th mc nh h thng s t ng Postback mi khi ngi dng click chut. i vi mt s phn t khc nh TextBox th mc nh l khng Postback. Nu mun Postback th t thuc tnh AutoPostback = "true", v d: <asp:DropDownList runat="server" ID="ds" AutoPostBack="true"></asp:DropDownList> Hay : <asp:TextBox runat="server" ID="txtHVT" AutoPostBack="true"></asp:TextBox> Khi t AutoPostBack = "true" th mi khi ngi dng chn mt mc khc (i vi DropDownList) v thay i ni dung (i vi TextBox) th h thng s PostBack trang web v bn Server. V s kin SelectedIndexChanged v TextChanged tng ng s c gi: using System; using System.Collections; using System.Configuration; using System.Data; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class _default : System.Web.UI.Page { protected void ds_SelectedIndexChanged (object sender, EventArgs e) { } protected void txtHVT_TextChanged (object sender, EventArgs e) { } }

5.3 Ajax Control Toolkit


5.3.1 Gii thiu R rng l ASP.NET cung cp cho chng ta rt nhiu cc iu khin (asp server control), gip gim ng k cng sc pht trin ng dng. Tuy nhin, vi chng th vn cha v vn cn v s nhng hn ch cn phi khc phc. c bit l cc iu khin hin th trn mn hnh, cc iu khin kim tra d liu nhp (Data Validation control), B Ajax Toolkit Control l mt tp cc iu khin nhm p ng cc yu cu . B Ajax Toolkit control khng phi l thnh phn ni ti ca ASP.NET. N ch l mt thnh phn b sung cho ASP.NET. C th download ti a ch http://asp.net V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 60

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Sau khi ci t file ASPAJAXExtSetup.msi, h thng s c mt file l AjaxControlToolkit.dll, chng ta s vo menu website Project Reference 5.3.2 Hng dn s dng mt s Ajax Control c bn Cc bc s dng: Bc 1: Thm tham chiu Ajax control toolkit vo Project Bc 2: Chn mt ScriptManager vo trang v To cc phn t theo c php
<ajaxToolkit:Tn_Phn_T ID="Gi_Tr_ID" runat="server" TargetControlID="ID ca phn t m ta mun p dng cho" />

Mt s phn t Ajax V d: Cho php ngi dng chn ngy thng v nm khi ngi dng focus vo textbox:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 61

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:TextBox runat="server" ID="txtNgaySinh" autocomplete="off" /> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxtoolkit:calendarextender ID="defaultCalendarExtender" runat="server" TargetControlID="txtNgaySinh" /> </form> </body> </html>

5.4 Tho lun cng ngh Ajax

M hnh x l trang web truyn thng

M hnh x l ca Ajax

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

62

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 6: THC HNH
Mc tiu: Sau khi kt thc bi thc hnh, ngi hc c th: S dng ngn ng lp trnh C# lp trnh x l pha server. S dng c mt s iu khin Ajax trnh by giao din v kim tra d liu nhp. Ni dung: 1. Vit lnh pha server Yu cu: Kim tra d liu nhp bi trc (Nhp h s cn b), m bo cc yu cu sau: H tn khng c rng, ch cha ch ci v du cch. di <= 30; Ngy thng nm sinh phi hp l. V d thng 2 ca nm nhun c 29 ngy, cc nm khc l 28 ngy. Ngy sau phi "ln hn" ngy trc. V d ngy xut ng phi trc ngy nhp ng. Cc trng s ch cha gi tr l s dng, khng cha k t thng thng. Cc textbox nhiu dng, cha ti a l 1000 k t. Chng no d liu cn nhp sai th cn phi focus n yu cu ngi dng sa li. Nu mi d liu nhp u hp l th gi n cc iu khin v ch mt dng thng bo l : "H s c cp nht" ra gia mn hnh !. Hng dn: c gi tr value ca mc ang c chn trong DropDownList th vit: DDL_Name.Text . Trong : DDL_Name l id ca dropdownlist. truy xut ti mt phn t c ch s i trong Dropdownlist, vit: DDL_Name.Items[i]; xa cc mc: DDL_Name.Clear(); m s mc : DDL_Name.Count; thm mt mc vo DDL (Dropdownlist)

o o o

DS.Items.Add ("Mc mi"); Hoc DS.Items.Add (new ListItem ("text", "value"));

Hm chuyn ngy thng dng xu sang kiu Date: DateTime d; o DateTime D = DateTime.Parse (s);

int D.Day; D.Month; D.Year tr v ngy, thng nm ca D. focus ti mt phn t: Vit <Gi tr ID>.Focus(); VD: DS.Focus(); Php ton ly phn nguyn, phn d: o Ly nguyn: 20/ 6 3 o Ly phn d: 20 % 6 2 2. S dng mt s iu khin Ajax Control Toolkit Cch ng k v a Ajax Control Toolkit vo d n:

Cn c 3 file sau:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 63

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Bc 1, vo menu website Add Reference Chn Tab Browse. Sau chn 2 tp (1) v (2) trn. Click OK. Bc 2: Click chut phi ln hp toolbox v chn "Choose Items". Khi hp thoi m ra, Browse ti file (3) trn. Click OK. 2.1 S dng Calendar Yu cu: Vit mt trang cho php ngi dng nhp vo ngy sinh ca h. Ngy sinh ny c nhp bng cch chn trc tip trn lch (Canlendar).
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Calendar</title> </head> <body> <form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="Server" EnableScriptGlobalization="true" EnableScriptLocalization="true" />


<b>Nhp ngy sinh:</b> <asp:TextBox runat="server" ID="txtNS"></asp:TextBox>

<ajaxToolkit:CalendarExtender ID="cal" TargetControlID="txtNS" runat="server" >


</ajaxToolkit:CalendarExtender> </form> </body> </html>

Lu : - Trong th <ajaxToolkit:CalendarExtender ID="cal" TargetControlID="txtNS" runat="server" >. Thuc tnh TargetControlID cho bit l s hin th Calendar khi ngi dng focus iu khin c id l txtNS. o Trong trang cn phi c th <asp:ScriptManager v t trong th Form. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 64

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 2.2 Nhp ngy thng theo nh dng (s dng iu khin MaskedEdit extender)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaskedEdit.aspx.cs" Inherits="MaskedEdit" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Maskedit</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="SM1" runat="server" EnablePartialRendering="True" /> Nhp ngy thng theo dng: MM/dd/yyyy (culture sensitive)<br /> <asp:TextBox ID="TextBox1" runat="server" Width="130px" ValidationGroup="Demo1" MaxLength="1" style="text-align:justify" /> <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TextBox1" Mask="99/99/9999" MessageValidatorTip="true" MaskType="Date" DisplayMoney="Left" AcceptNegative="Left" /> <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ControlExtender="MaskedEditExtender1" ControlToValidate="TextBox1" IsValidEmpty="False" EmptyValueMessage="Phi nhp ngy thng" InvalidValueMessage="Ngy thng nhp sai" ValidationGroup="Demo1" Display="Dynamic" TooltipMessage="Nhp vo mt ngy" /> </form> </body> </html>

** Ch : Trng hp ny cn phi t 2 iu khin Ajax, mt ci l


ajaxToolkit:MaskedEditExtender v mt ci l ajaxToolkit:MaskedEditValidator. Ci th hai cn phi gn vi ci th nht bng cch t thuc tnh ControlExtender.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 65

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


2.3 S dng Dialog modal

%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupDialog.aspx.cs" Inherits="PopupDialog" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Modal Dialog</title> </head> <body>

Phn tiu ca hp thoi. t trong mt Panel.

<form id="form1" runat="server"> <asp:Button ID="cmdOpenPopup" runat="server" Text="Ca s Login" /> <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager> <asp:Panel ID="NoiDung" runat="server" style="background-color:White; margin:10px 10px 10px 10px; border: solid 2px"> <asp:Panel ID="TieuDe" runat="server" > <div style="background-color:Yellow">Thng bo </div> </asp:Panel>
User name: <asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> <br /> Password : <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br />

<asp:Button ID="cmdCancel" runat="server" Text="Hy b" /> <asp:Button ID="cmdLogin" runat="server" Text="ng nhp" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="Popup01" runat="server" TargetControlID="cmdOpenPopup" PopupControlID="NoiDung" OkControlID="cmdLogin" DropShadow="true" PopupDragHandleControlID="TieuDe"> </ajaxToolkit:ModalPopupExtender> </form> </body> </html>

Phn ni dung hp thoi. t trong mt Panel.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

66

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 7: To v s dng Custom Control


7.1 Gii thiu User Custom Control
Visual studio cung cp cho chng ta rt nhiu cc iu khin pht trin ng dng gi l iu khin ni ti (Instrict control). Ngoi ra, n cn cung cp cho chng ta kh nng t xy dng cc iu khin ty bin nu cc iu khin hin hnh khng p ng c yu cu. V d: Nu ng dng ca bn cn chic my tnh (Calculator) rt nhiu trang th gii php tt nht l to mt iu khin Calculator ring thay vic kt hp cc iu khin truyn thng, khi ta c th s dng iu khin ny trong ton b ng dng. Bi hc ny s hng dn cch to v s dng iu khin do lp trnh vin t xy dng hay cn gi l iu khin ty bin (Custom Control). Tip theo s minh ha thm mt s v d v to iu khin ty bin ngi c hiu r hn. Thc cht ca User Custom Control (UCC) chnh l mt "trang con", trong c th cha bt k ni dung no (tr cc th <HTML> <BODY>,<FORM>, v mt trang ch c duy nht mt ln xut hin cc th ny) . "Trang con" ny sau c th c chn (Include) vo cc trang khc s dng. Khi mun cp nht ni dung tt c cc trang, ta ch vic sa i duy nht UCC ban u. Kh nng ny ca ASP.NET gip chng ta xy dng ng dng nhanh hn, d bo tr hn. Mi mt UCC c t trong mt trang c phn m rng l *.ascx. File ny c c im l khng truy cp trc tip t trnh duyt m ch c chn vo cc trang aspx.

7.2 Cc bc to User Custom control


Vic thc hin to User custom control tri qua 3 bc chnh nh sau: Bc 1: Thm mt web form vo Project hin hnh Vo menu website, chn Add new item. Chn loi Web user control t tn cho web user control. Bc 2: Son ni dung ca trang. Bc 3: Lu li ni dung ca trang. V d: To mt UCC cha thng tin lin h ca Trung tm Hng Yn Aptech, thng tin ny s c dng lm Footer (chn trang) ca tt c cc trang trong h thng phn mm qun l cn b.

Kt qu sau khi a UCC vo trang web. y ta cn to 2 trang, trang Footer.ascx cha ni dung ca UCC v trang Default.aspx, s dng UCC Footer.ascx.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 67

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Ni dung trang Footer.ascx v Default.aspx nh sau: Footer.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Footer.ascx.cs" Inherits="Footer" %>
<table border="0px" width="100%"> <tr> <td align="center" style="font-style:italic" runat="server" id="NoiDung"> <hr /> Phn mm qun l cn b - phin bn 2.0 <br /> &copy;Bn quyn h thng thuc v Trung tm o to Hng Yn - Aptech 2008 <br /> Tel: 0321-713.179; E-Mail: aptech@utehy.edu.vn; website: <asp:LinkButton runat="server" ID="AptechLink" PostBackUrl="http://aptech.utehy.vn" Text="www.aptech.utehy.vn"> </asp:LinkButton> </td> </tr> </table>

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="Aptech" TagName="Footer" Src="~/Footer.ascx" %>


<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Phn mm qun l cn b - Version 2.0</title> </head> <body> <form id="form1" runat="server"> <div> </div> </form> TagPrefix </body> </html>

<Aptech:Footer ID="Footer1" runat="server" /> TagName

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

68

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu *** Mt s im cn lu khi to UCC: Trang UCC cng c trang Code C# tng ng l : .ascx.cs u trang ascx, thay v vit ch dn <%@ Page ta thay bng:<%@ Control Trong UCC khng c cp th HTML, BODY, FORM. Khi "chn" UCC vo trang aspx, cn phi thm th <%@ Register ngay sau th <%@ Page Tuy nhin c th dng phng php ko-th bng cch click
vo trang ascx v "ko-th" vo form .aspx ( ch Design view). Mt UCC c th xut hin nhiu ln trong mt trang. Mun thay i UCC trn cc trang th phi tr v trang ascx ban u chnh sa.

7.3 Thm cc thuc tnh, phng thc v s kin vo UCC


Mi UCC thc cht l mt Class, do vy hon ton c th thm cc thuc tnh, phng thc, s kin .. 7.3.1 Thm thuc tnh vo UCC thm thuc tnh, m file cha code (file c phn m rng l ascx.cs) v khai bo thuc tnh cn thit. V d: Thm thuc tnh Mau_Nen cho UCC Footer trn t Mu nn cho dng Footer. Footer.ascx.cs using System; using System.Web.UI; public partial class Footer : UserControl { private string mau_nen; public string Mau_Nen { set { mau_nen=value; NoiDung.BgColor = mau_nen; } get { return mau_nen; } } protected void Page_Load (object sender, EventArgs e) { } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 69

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Ch : - NoiDung l ID ca phn t <TD> trong trang Footer.ascx. Do vy vit NoiDung.BgColor = mau_nen; trong on chng trnh trn l t mu nn cho phn t <td>. - T kha value trn l gi tr c gn cho thuc tnh. V d nu ta vit NoiDung.Mau_Nen="blue" th value khi ny c gi tr l "blue". - Mi khi ta gn gi tr cho thuc tnh th phn bn trong set { } s c gi v khi ta c gi tr ca thuc tnh th phn get { } s c gi. Trong mi phn set v get ny hon ton c th t cc cu lnh x l. Sau khi thm thuc tnh, bn c th c/ghi gi tr ny thng qua cu lnh hoc gn gi tr trc tip trong ch code v design. V d t li mu nn:

.
<Aptech:Footer ID="Footer1" runat="server" Mau_Nen="purple"/>

t trc tip trong ca s Properties 7.3.2 Thm phng thc vo UCC Tng t nh cc Class, chng ta c th thm cc phng thc vo cho lp nh khi xy dng cc lp thng thng. V d: Thm mt phng thc lm n/ hin UCC trn. Footer.aspx.cs using System; using System.Web.UI; public partial class Footer : UserControl { private string mau_nen; public string Mau_Nen { set { mau_nen=value; NoiDung.BgColor = mau_nen; } V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 70

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu get { return mau_nen; } } /// Value= true ==> Hin. /// Value=False ==> n public void ShowHideUCC (Boolean Value) { if (Value == true) this.Visible = true; else this.Visible = false; } protected void Page_Load (object sender, EventArgs e) { } } Vic gi cc phng thc ny cng ging nh nhng phng thc thng thng trc y. 7.3.3 Thm s kin vo UC Phn ny s c gii thiu trong cc chuyn cao hn.

7.4 Truy cp thuc tnh, phng thc ca cc phn t con trong UCC.
V mt UCC c th cha nhiu iu khin bn trong, v vy c nhng lc ta cn truy cp n mt s thuc tnh, phng thc ca iu khin con ny. Tuy nhin iu ny l khng c php, gii php cho vn ny l: To thm phng thc dng Public hoc Protected ca UCC c th truy cp n cc phn t con bn trong. V d: Thm mt phng thc SetAptechLinkText cho php thay i li nhn lin kt n trang Aptech. Code ca trang s nh sau: Footer.ascx.cs
using System; using System.Web.UI; public partial class Footer : UserControl { private string mau_nen; public string Mau_Nen { set { mau_nen=value; NoiDung.BgColor = mau_nen; } get

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 71

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


{ return mau_nen; } }

/// Value= true ==> Hin. /// Value=False ==> n public void ShowHideUCC (Boolean Value) { if (Value == true) this.Visible = true; else this.Visible = false; }
/// Phng thc cho php thay i nhn ca lin kt n trang Aptech

public void SetAptechSiteText (string newText) { AptechLink.Text = newText; }


protected void Page_Load (object sender, EventArgs e) { } }

Khi s dng: Trang Default.aspx.cs


using System; using System.Web.UI; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Footer1.SetAptechSiteText ("Trang ch ca Aptech"); } }

Nu iu khin con bn trong c rt nhiu thuc tnh (v d Table) th r rng truy cp ti cc thuc tnh ca n (rt nhiu) ta s phi to v s thuc tnh cho UCC. Trong trng hp nh vy, trnh phi khai bo qu nhiu thuc tnh, ta to mt thuc tnh v tr v l i tng cn truy xut, v d bn ngoi c th truy xut n ton b cc thuc tnh v phng thc ca Textbox1 nm trong UCC th ta to mt thuc tnh kiu nh sau cho UCC: .. public TextBox txtUserName { get { return TextBox1; } } V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 72

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

7.5 Minh ha to mt s iu khin


V d 1: To mt menu cho ng dng Qun l cn b, c dng:

Kt qu File Menu.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MainMenu.ascx.cs" Inherits="MainMenu" %> <style type="text/css"> .HLink { font-family:Tahoma; font-weight:bold; font-size:10pt; text-decoration:none; border-bottom-style:dotted; border-bottom-width:1px; border-bottom-color:Silver; margin:5px 2px 2px 5px; width:100%; } </style> <table border="0px" style="border-collapse:collapse; border:solid 1px purple;width:150px"> <tr> <td align="center" style="background-color:Purple; color:White;font-weight:bold"> Main Menu </td> </tr> <tr>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 73

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<td> <asp:LinkButton runat="server" ID="lnkHome" CssClass="HLink" Text="Trang ch" PostBackUrl="~/Default.aspx"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton1" CssClass="HLink" Text="Gii thiu"></asp:LinkButton> <br /> <asp:LinkButton runat="server" ID="LinkButton2" CssClass="HLink" Text="Hng dn"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton8" CssClass="HLink" Text="Lin h"></asp:LinkButton> <hr /> <asp:LinkButton runat="server" ID="LinkButton" CssClass="HLink" Text="Nhp h s cn b"></asp:LinkButton> <br /> <asp:LinkButton runat="server" ID="LinkButton3" CssClass="HLink" Text="Sa i h s"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton4" CssClass="HLink" Text="Tm kim"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton5" CssClass="HLink" Text="Thng k"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton6" CssClass="HLink" Text="In n"></asp:LinkButton><br /> </td> <tr> <td align="center" style="background-color:Purple; color:White;font-weight:bold"> ng nhp </td> </tr> <tr> <td> User name: <br /> <asp:TextBox runat="server" ID="txtUserName" Width="92%"></asp:TextBox> <br /> Password: <br /> <asp:TextBox runat="server" ID="txtPassword" Width="92%"></asp:TextBox> <asp:Button runat="server" ID="cmdLogin" Text="ng nhp" /> </td> </tr> </table>

V d 2: To mt textbox nhp ngy thng (c tch hp Calendar) dng chung trong ton ng dng.

Kt qu. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 74

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

File MyCalendar.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyCalendar.ascx.cs" Inherits="MyCalendar" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <table> <tr> <td> <asp:TextBox runat="server" ID="txtNT" style="width:100px"></asp:TextBox> </td> </tr> </table> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtNT"> </cc1:CalendarExtender>

Fiel MyCalendar.ascx.cs
using System; using System.Web.UI; public partial class MyCalendar : System.Web.UI.UserControl { private string gt; public string GiaTri { set { gt = value; txtNT.Text = gt; } get { return gt; } } protected void Page_Load(object sender, EventArgs e) { } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 75

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 8: THC HNH
Mc tiu: Kt thc bi thc hnh ny hc vin c th: To mt s iu khin UCC phc v cho h thng Qun l cn b Thm v s dng c cc thuc tnh, phng thc cho iu khin UCC Ni dung: Bi 1: To mt iu khin Login,c giao din nh sau:

Chng trnh minh ha: Trang Login.ascx <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Login.ascx.cs" Inherits="Login" %>
<table runat="server" id="NoiDungLogin" style="border:solid 1px purple;border-collapse:collapse">

<tr> <td colspan="2" style="text-align:center; background-color:purple;color:White"> ng nhp </td> </tr> <tr> <td style="text-align:center;width:40%">User name:</td> <td> <asp:TextBox runat="server" ID="txtUserID" Width="99%"></asp:TextBox> </td> </tr> <tr> <td style="text-align:center; width:40%">Password:</td> <td>
<asp:TextBox runat="server" ID="txtPassword" Width="99%" TextMode="Password">

</asp:TextBox> </td> </tr> <tr> <td></td> <td> <asp:Button runat="server" ID="cmdCancel" Text="Cancel" /> <asp:Button runat="server" ID="cmdLogin" Text="Login" /> </td> </tr> </table>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

76

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Bi 2: To iu khin Login1 c giao din nh bi 1 nhng thm thuc tnh cho php t rng ca iu khin. Hng dn: Phn giao din code nh trn, cn phn code C# s thm thuc tnh nh sau: Trang Login.ascx.cs
using System; using System.Web.UI; public partial class Login : System.Web.UI.UserControl { private string dorong; public string DoRong { set { dorong = value; NoiDungLogin.Width = dorong; } get { return dorong; } } protected void Page_Load (object sender, EventArgs e) { } }

Ti trang aspx, khi mun thay i rng, ch vic thm thuc tnh DoRong trong th. Bi 3: Yu cu nh bi 2 nhng c thm 3 phng thc. Phng thc CheckAccout() kim tra, nu User name="asp.net" v password = "123456" th tr v true, tri li tr v false; Phng thc GetUserName tr v gi tr trong User name; phng thc GetPassword tr v gi tr trong Password. Ngoi ra, khi ngi dng bm vo nt "Login" th s in ra thng bo (trn mt nhn pha di) : "Bn ng nhp vi User name l : Password l: .." Hng dn: V bn ngoi khng th truy xut c vo cc thuc tnh ca i tng con thuc UCC, do vy nu thc s mun truy cp th ta cn phi xy dng cc phng thc Public cung cp cc chc nng truy cp (c/ ghi) ny. Vit li trang Login.ascx.cs nh sau (Phn giao din khng i)
using System; public partial class Login : System.Web.UI.UserControl { private string dorong; public string DoRong { set { dorong = value; NoiDungLogin.Width = dorong;

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 77

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


} get { return dorong; } } public Boolean CheckAccount () { return (txtUserID.Text == "asp.net" && txtPassword.Text == "123456"); } /// Ly User name trong User name public string GetUserName () { return txtUserID.Text; } /// ly Password trong Password public string GetPassword () { return txtPassword.Text; } protected void Page_Load (object sender, EventArgs e) { } }

Trang aspx s dng iu khin ny s c dng:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginDemo.aspx.cs" Inherits="LoginDemo" %> <%@ Register src="Login.ascx" tagname="Login" tagprefix="uc1" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Login testing</title> </head> <body> <form id="form1" runat="server"> <div> <uc1:Login ID="Login1" runat="server" DoRong="200px" /> <br /> <asp:Label runat="server" ID="lblThongBao"></asp:Label> </div> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

78

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

using System; using System.Web; public partial class LoginDemo : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (this.IsPostBack==true) ///Nu khng phi ln u np trang { lblThongBao.Text = "Bn nhp User name=" + Login11.GetUserName() +" Mt khu : " + Login11.GetPassword(); } } }

Ni dung trang C# ca trang ASPX Bi 4: To phn Header v Footer c th chn vo cc trang. Giao din nh sau:

Ni dung ca iu khin Header.ascx (Hc vin c th ty bin) To mt UCC, c tn Header.ascx nh sau:


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Header.ascx.cs" Inherits="Header" %> <style type="text/css"> A { float:right; width:80px; text-decoration:none; color:white; background-color:purple; border-right:1px solid white; text-align:center; } A:Hover { background-color:#ff3300; color:Purple;

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 79

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


} </style> <table border="0px" style="width:790px;border-collapse:collapse"> <tr style="height:80px;background-image:url('body_bg.gif')"> <td style="text-align:center; vertical-align:middle; font-family:compact; font-size:20pt; font-weight:bold"> HUMAN RESOURCE MANAGEMENT SYSTEM - V2.0 </td> </tr> <tr style="height:30pt"> <td style="text-align:right;vertical-align:top; font-weight:bold;text-decoration:none; color:White"> <a href="LoginDemo.aspx">Login</a> <a href="Products.aspx">Products</a> <a href="Downloads.aspx">Download</a> <a href="Contact.aspx">Contact</a> <a href="Forums.aspx">Forum</a> </td> </tr> </table>

Bi 5: To Menu cho h thng phn mm qun l cn b. (Lm li bi trong ti liu dng cho l thuyt). Nhng thm mt s hyperlink khc.. Bi 6: Lp ghp header, footer v Menu c trang nh sau:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

80

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Trang code giao din ca UCC MainMenu.ascx.cs


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MainMenu.ascx.cs" Inherits="MainMenu" %> <style type="text/css"> .A_MainMenu { float:none; width:100px; text-decoration:none; color:purple; text-align:left; } A:Hover { background-color:silver; color:Purple; } </style> <table border="0px" style="border-collapse:collapse; border:solid 1px purple;width:150px"> <tr> <td align="center" style="background-color:Purple; color:White;font-weight:bold"> Main Menu </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="lnkHome" Text="Trang ch" PostBackUrl="~/HeaderDEMO.aspx"> </asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton1" Text="Gii thiu"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton8" Text="Lin h"></asp:LinkButton> </td> </tr> <tr>

Giao din UCC ca MainMenu.ascx

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 81

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton" Text="Nhp h s cn b"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton3" Text="Sa i h s"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton4" Text="Tm kim"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton5" Text="Thng k"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton6" Text="In n"></asp:LinkButton> </td> </tr> <tr> <td align="center" style="background-color:Purple; color:White;font-weight:bold"> ng nhp </td> </tr> <tr> <td> User name: <br /> <asp:TextBox runat="server" ID="txtUserName" Width="92%"> </asp:TextBox> <br /> Password: <br /> <asp:TextBox runat="server" ID="txtPassword" Width="92%"></asp:TextBox> <asp:Button runat="server" ID="cmdLogin" Text="ng nhp" /> </td> </tr> </table>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

82

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 9: Cc i tng trong ASP.NET


Trong bt k ng dng no, d l winform based hay webform based th vic giao tip (tng tc) vi ngi dng v gia cc webform vi nhau l iu bt buc. V d ta cn phi ly thng tin t hng do ngi dng nhp vo v hin th tr li ngi dng mt s thng tin hu ch khc, nh kt qu thanh tonhay mt trang chuyn tip kt qu cho mt trang khc x l v.v cc bi trc, lm iu ny chng ta thc hin d dng thng qua cc server controls nh textbox, listbox, dropdownlist, label, Tuy nhin nhng iu khin ny ch c tc dng trong mt Page cn cc trang khc th hon ton khng th c/ghi gi tr nm trong cc iu khin ny. thc hin vic giao tip (truyn d liu) gia cc webform ASP.NET cung cp mt tp cc iu khin gip ta lm vic mt cch d dng, l: i tng Request v i tng Response. Trong bi hc ny, chng ta cng tm hiu thm mt s i tng khc cng rt hay dng khi xy dng ng dng l i tng Server, Application v Session.

9.1 Request Object


9.1.1 i tng Request dng lm g ? Request l mt i tng ca ASP.NET, n cho php c cc thng tin do cc trang khc gi (Submit) n. Post M hnh gi/c gi tr: Trang Gi Form1 User name : Password: aptech ******* Trang nhn Request("txtUserName") => aptech Request("txtPassword") => 123456

9.1.2 Cc thnh phn (thuc tnh v phng thc) chnh Phng thc: Request.QueryString.Get("Tn_Phn t cn c"): c gi tr ca mt phn t c gi theo phng thc Get (Method = "Get") Phng thc Request.Form.Get("Tn_Phn t cn c"): c gi tr ca mt phn t c gi theo phng thc Post (Method = "Post"). Ch : C th dng Request.Form.GetValues v Request.Form.GetValues c. 9.1.3 V d s dng Xy dng 2 trang web : trang Default.aspx, trong c 2 textbox cha tn v mt khu. Khi ngi dng click vo nt submit th gi tn v mt khu sang trang Webform1.aspx hin th. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 83

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Trang ngun (gi): Default.aspx

Kt qu nhn v. Code ca 2 trang s nh sau:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

84

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Default.aspx

Webform1.aspx

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 85

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Code x l ca trang webform1.aspx.cs

9.2 Response Object


9.1.1 i tng Response dng lm g ? i tng ny c dng gi ni dung (mt xu) bt k v cho trnh duyt. 9.1.2 Cc thnh phn (thuc tnh v phng thc) chnh Phng thc: Response.write(<Biu thc>) dng gi gi tr biu thc truyn vo cho pha trnh duyt. Phng thc: Flush dng a d liu cn trong b m pha server v cho pha trnh duyt. Phng thc Response.Redirect(a ch URL): Chuyn ti mt trang khc. 9.1.3 V d s dng To mt trang Login hon ton bng phng thc Response.write nh sau:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

86

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Trang code s nh sau:

9.3 Server Object


9.3.1 i tng Server dng lm g ? Dng to cc i tng COM Ly thng tin v tn my nh x ng dn o thnh ng dn vt l. 9.3.2 Cc thnh phn (thuc tnh v phng thc) chnh CreateObject(COM Specification) t dng trong ng dng .NET MachineName: String; Tr v tn ca my tnh server ang chy. Mappath(Virtual path): Tr v ng dn vt l ca ng dn o tng ng. 9.3.3 V d s dng In ra tn ca my ch hin hnh: Response.Write(Server.MachineName); Cho bit ng dn thc s trn cng (th mc vt l) ca trang hin hnh (trang default.aspx) : Server.Mappath(default.aspx); Cho bit ng dn vt l ng vi tp QLCB.Mdb, bit rng tp ny nm trong mt th mc con l App_Data: Server.Mappath(App_Data/QLDB.MDB);

9.4 Session Object 9.4.1. Bin Sesstion


Khi vo mt website, ngi dng c th duyt rt nhiu trang web ca website . Nu mun lu tr thng tin v khch thm ny trong c phin lm vic th c th lu vo cc bin, gi l bin Session. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 87

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Ni cch khc, bin session l mt bin m mi trang trong mt phin (Session) u c th truy xut.

9.4.2. i tng Session


L i tng dng qun l (to, c, ghi) cc bin sesstion v mt s thng s khc. + C php to bin Session nh sau:

Session.Add("Tn_Bin","Gi tr khi to");


Lu : Tn bin phi t trong cp du nhy kp. <Gi tr> c th l xu k t hoc s... V d : To mt bin tn l MaNguoiDung v gn gi tr l TK34 Session.Add(MaNguoiDung,TK34); + C php c gi tr ca mt bin sesstion nh sau: Session.Contents[Tn_Bin] hoc dng ch s: Session.Contents[i]; + C php ghi (thay i) gi tr ca bin session: Session.Contents[Tn_Bin] = <Gi tr mi> V d: Response.write(M ngi dng l : &Session.Contents[MaNguoiDung]) Ring vi i tng Session, n cn c cc s kin. Cc s kin ny t ng c gi mi khi mt phin lm vic c to ra. Cc s kin ny c tn l On_Start v On_End. Cc s kin ny c t trong file Global.asax.

9.5 Application Object


9.5.1 i tng Application dng lm g ? Dng qun l cc bin c phm vi ton ng dng. C tc dng n mi ngi dng. 9.5.2. Khi nim bin ton ng dng Bin ton ng dng l bin c tc dng i vi mi ngi dng truy cp vo website. Mi trang aspx.cs u c th truy cp n bin ny v d bt k thi im no. 9.5.3. i tng Application Dng qun l (To, c, ghi) cc bin c phm vi ton ng dng. + C php to bin Application: Application.Add(Tn_Bin, <Gi tr khi to>); + V d: To bin So_Nguoi_Truy_Cap Application.Add(So_Nguoi_Truy_Cap, 0) + Truy xut n bin Application: Application.Contents[Tn_Bin] hoc ch s: Application.Contents[i] + V d : c v ghi bin Application.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

88

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Application.Contents[So_Nguoi_Truy_Cap] = Application.Contents[So_Nguoi_Truy_Cap] + 1 Response.write(Bn l v khch th: & Application.Contents[So_Nguoi_Truy_Cap]) Ngoi ra, i tng Application cn c 2 phng thc thng dng l Application.Lock(): kha khng cho ngi khc sa i cc bin ton cc v Application.UnLock() m kha . i tng Application cng c 2 s kin l Application_OnStart v Application_OnEND. S kin OnStart ch c kch hot duy nht mt ln khi yu cu u tin pht sinh. S kin OnEND c kch hot khi dch v web dng (unload). i tng Application c 2 phng thc l Lock v Unlock. Khi gi phng thc Lock (kha) th tt c cc ng dng khng c php thay i cc gi tr Application. cc ng dng khc c php thay i cc bin Application th gi phng thc Unlock. M lnh vit cho 2 s kin ny cng c t trong file Global.asa.

Mt s bi tp tng hp:
Bi 1: To mt trang Login, nu ngi dng nhp user name v mt khu tng ng l asp.net v 123456 th c php truy cp cc trang Index.aspx, tri li mi ln ngi dng truy cp n trang Index.aspx th u c chuyn ti trang Login.aspx. Minh ha: Cn to 3 trang l Home.aspx/cs, Login.aspx/cs v Global.asax nh sau:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Thanh ton - Trang cn phi Login trc khi xem</title> </head> <body> <form id="form1" runat="server"> <div> <h1 style="text-align:center"> y l ni dung rt quan trng, bn ch c th thy dng ny sau khi Login ! </h1> </div> </form> </body> </html>

Ni dung trang Home.aspx V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 89

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

using System; using System.Web; public partial class Home : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Session.Contents ["TrangThai"].ToString () == "chuadangnhap") { Response.Redirect ("Login.aspx"); } } }

Trang Home.aspx.cs

<%@ Application Language="C#" %> <script runat="server"> void Application_Start(object sender, EventArgs e) { // Code that runs on application startup } void Application_End(object sender, EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender, EventArgs e) { // Code that runs when an unhandled error occurs } void Session_Start(object sender, EventArgs e) { // Code that runs when a new session is started Session.Add ("TrangThai", "chuadangnhap"); } void Session_End(object sender, EventArgs e) { } </script>

Trang Global.asax

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

90

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>System Login</title> </head> <body> <form id="form1" runat="server"> <table> <tr> <td>User name (asp.net): </td> <td> <asp:TextBox runat="server" ID="txtUserID" TextMode="Password"> </asp:TextBox> </td> </tr> <tr> <td>Password (123456): </td> <td><asp:TextBox runat="server" ID="txtPassword"></asp:TextBox> </td> </tr> <tr> <td> </td> <td> <asp:Button runat="server" Text="Login" ID="cmdLogin" onclick="cmdLogin_Click"/> </td> </tr> </table> </form> </body> </html>

Trang Login.aspx

using System; public partial class Login : System.Web.UI.Page { protected void cmdLogin_Click (object sender, EventArgs e) { if (txtUserID.Text == "asp.net" && txtPassword.Text == "123456") { Session.Contents ["TrangThai"] = "DaDangNhap"; Response.Redirect ("Home.aspx"); } } }

Trang Login.aspx.cs V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 91

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Bi 2: To mt trang m s lng ngi truy cp. Dng bin tp text lu. Hng dn: To 2 trang l Index.aspx/cs v Global.asax vi ni dung sau: Trang Index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Home Page - Hit counter</title> </head> <body> <form id="form1" runat="server"> <h1>Cho mng bn n website ca chng ti</h1> <asp:Label runat="server" ID="lblSLKhach"></asp:Label> </form> </body> </html>

Trang Index.aspx.cs
using System; public partial class Index : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { lblSLKhach.Text="Bn l v khch th: " + Application.Contents["SLTruyCap"].ToString(); } }

Trang Global.asax
<%@ Application Language="C#" %> <script runat="server"> void Application_Start(object sender, EventArgs e) { Application.Lock (); System.IO.StreamReader sr; sr = new System.IO.StreamReader (Server.MapPath ("SL.txt")); string S = sr.ReadLine (); sr.Close (); Application.UnLock (); //To mt bin Applciation l SLTruyCap v khi to gi tr S Application.Add ("SLTruyCap", S); }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

92

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


void Application_End(object sender, EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender, EventArgs e) { // Code that runs when an unhandled error occurs } void Session_Start(object sender, EventArgs e) { //Tng s lng ngi truy cp ln 1 khi c mt ngi mi thm Application.Contents ["SLTruyCap"] = int.Parse (Application.Contents ["SLTruyCap"].ToString ()) + 1; //Lu vo file SL.txt (m v ghi ) System.IO.StreamWriter sw; sw = new System.IO.StreamWriter (Server.MapPath ("SL.txt")); sw.Write (Application.Contents ["SLTruyCap"].ToString ()); sw.Close (); } void Session_End(object sender, EventArgs e) { } </script>

Sau khi to, chy file Index.aspx kim chng s thy rng s lng ngi truy cp lun lun tng ln bt k l server c tt hay my tnh b trc trc. y l cch c dng chnh thc m s lng lt ngi truy cp. Bn hon ton c th ci tin hin th s lng ngi truy cp bng hnh nh cho sinh ng hn.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 93

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 10: THC HNH BI 11. Truyn d liu gia cc webpage, MasterPage v g ri (Debug) chng trnh.
11.1 Truyn (Post) d liu gia cc trang bng m lnh C#
Nh bi trc cp, truyn (Post) d liu t mt trang X n trang Y no ta thng to mt Button trong c thuc tnh PostBackURL = Y. Vi cch ny th mi khi chng ta click chut ln Button th n s chuyn thng n trang Y m khng ph thuc vo m lnh x l bn trong. iu ny s bt li nu nh nh vic chuyn ti trang Y cn ty thuc vo kt qu x l hin ti. V d: To mt trang c mt textbox v mt nt nhn. Khi ngi dng click nt nhn (submit) th kim tra nu rng th thng bo sai, tri li th Post ti trang XuLy.aspx.

11.2 Truy xut n cc phn t bng phng thc FindControl


Phng thc FindControl cho php ta tm kim (tr/ truy xut) ti mt phn t nm bn trong n. V d: To mt trang c mt textbox v mt nt nhn. Khi ngi dng click vo nt nhn th hin th dng ch "Bn dng FindControl truy xut !". FindControl()

11.3 Truy xut n trang gi thng qua thuc tnh PreviousPage.


Khi mt trang X post (gi) d liu n mt trang Y, th thuc tnh PreviousPage trong trang Y s tr ti trang X. Hay c th vit hnh tng l: Y.PreviousPage = X. V d: To mt trang Login.aspx, Sau khi click nt Login, s post n trang XuLyDangNhap.aspx. Ti trang ny s c d liu nm trong textbox username, Password.

11.4 MasterPage
Master Page l mt trang c bit cho php cc trang khc hin th bn trong n. MasterPage thng dng to ra mt mu sn (V d cha Header, MainMenu v Footer), cn cc trang ni dung khng phi km thm cc phn Header, footer ny. Cch to: Chn trang web dng MasterPage Cch cho trang khc hin th bn trong n: Khi to form, chn loi web content. T ln sau, ch cn tick vo phn: Select MasterPage. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 94

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

V d: To mt trang Master cha 3 ni dung l Header, MainMenu v Footer. V 2 trang khc Home.aspx v GioiThieu.aspx (Main menu c ZZ2 lin kt cc trang ny).

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 95

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Header Trang ch Gii thiu Sn phm Vng ny dng hin th cc trang khi click hyperlink menu cnh

Footer

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

96

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

11.5 G ri
C 2 loi li: - Li bin dch (Compile error): L loi li c pht hin ngay khi dch chng trnh - Li lp trnh (logic) hay cn gi l li Run-time: Li xy ra khi chy chng trnh. Vic tm ra cc li run-time gi l qu trnh g ri (hay Debug). 11.5.1 Gii thiu 11.5.2 Chy ng dng ch g ri 11.5.3 Khi nim im dng 11.5.4 Chy tng dng lnh vi ch Step Into (F8) 11.5.5 Chy tng dng lnh vi ch Step Over (Shift-F8) 11.5.6 Chy tng dng lnh vi ch Step Out (Ctrl-Shift-F8)

11.2 S dng Custom Error page 11.3 Ghi cc vt gy li (Trace errors) 11.4 S dng cng c g ri/ Menu Debug 11.5 Tracing li mc trang/ Mc ton ng dng

BI 12: THC HNH

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 97

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 13: CNG NGH ADO.NET


13.1 Gii thiu chung
Khi pht trin cc ng dng trn nn web th cng vic ch yu phi gii quyt l x l cc nghip v, trong phn ln l x l C s d liu. Trong mi trng pht trin Microsoft .NET tt c cc ng dng webform hay winform u thng nht s dng chung mt b th vin truy xut v thao tc C s d liu gi l ADO.NET (Active Data Object). - ADO.NET l mt tp cc lp nm trong b th vin lp c s ca .NET Framework, cho php cc ng dng windows (nh C#, VB.NET) hay ng dng web (nh ASP.NET) thao tc d dng vi cc ngun d liu. - Mc tiu chnh ca ADO.NET l: Cung cp cc lp thao tc CSDL trong c hai mi trng l phi kt ni (Disconected data) v kt ni (Connected data). Tch hp cht ch vi XML (Extensible Markup Language) Tng tc vi nhiu ngun d liu thng qua m t d liu chung. Ti u truy cp ngun d liu (OLE DB & SQL server). Lm vic trn mi trng Internet. Cc lp ca ADO.NET c t trong Namespace l System.Data/ System.Data.oledb ADO.NET bao gm 2 Provider (2 b th vin thng dng) thao tc vi cc CSDL l: OLE DB Provider (nm trong System.Data.OLEDB) dng truy xut n bt k CSDL no c h tr OLEDB; SQL Provider (nm trong System.Data.SQLClient) chuyn dng truy xut n CSDL SQL Server (Khng qua OLE DB nn nhanh hn). Hin nay, cc hng th ba cn cung cp cc Provider khc nh : MySQL, Oracle provider cho php ng dng .NET truy xut n cc c s d liu khng phi ca Microsoft khc. V tr ca ADO.NET trong kin trc ca .NET Framework

V tr ca ADO.NET trong kin trc ca .net Framework

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

98

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu T kin trc ta thy rng: ADO.NET l mt thnh phn ni ti (Instrict) ca .NET framework, do vy n c th c s dng trong tt c cc ngn ng h tr .NET nh C#, VB.NET m khng c s khc bit no (Tc l cc chc nng cng nh cch s dng hon ton ging nhau).

13.2 Kin trc ca ADO.NET


ADO.NET cho php lm vic c hai ch , ch Kt ni (Connected) v phi kt ni (Disconnected). B ba Connection, Command v DataReader: cho php lm vic ch Connected; cn DataAdapter, Connection, Command v Dataset lm vic ch Disconnected. Trong ch Connected th mi khi thao tc (nh sa, xa, thm) th u i hi ng dng phi kt ni v thao tc trc tip vi c s d liu (CSDL); cn trong ch Disconnected th vn c th thm, sa, xa d liu trn i tng cc b; khng nht thit phi kt ni ngay n CSDL (Xem m hnh di).

~ Recordset

Mdb; mdf, XML

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 99

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

13.3 Cc lp thao tc vi CSDL: Connection, Command,.


13.3.1 Lp Connection + Chc nng: L i tng c nhim v thc hin kt ni n C s d liu cc i tng nh Command thao tc vi CSDL thng qua Connection ny. + Khai bo (c nhiu cch):
public OleDbConnection Cn1; public OleDbConnection Cn2 = new OleDbConnection (); public OleDbConnection Cn3 = new OleDbConnection ("Provider=Microsoft.jet.....");

Mt s phng thc: + Open: Dng m kt ni: Cnn. (): M kt ni n CSDL do ta ch nh trong ConnectionString Lu : sau khi gi phng thc Open, c th xem kt ni thanh cng hay khng thng qua thuc tnh State ca Connection: if (Cnn.State == 1) Kt ni thnh cng ! + Close(): Dng ng kt ni: Cnn.Close(); Thng th nn vit nh sau trnh li : if (Cnn.State == 1) Cnn.Close(); + GetSchema: Ly thng tin v CSDL (V d tn cc bng, cc trng trong bng) Mt s thuc tnh: + State: Cho bit trng thi kt ni. (ConnectionState.Open
+ ConnectionString: Cha cc thng tin kt ni. V d v mt trang thc hin kt ni n CSDL C:\Nwind.mdb kt ni c m)

Open

using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_Default : System.Web.UI.Page { /// <summary> /// Hm kt ni n C s d liu /// </summary> /// <param name="DBFileName">ng dn ti file MDB</param> /// <returns>Tr v i tng OledbConnection hoc null</returns> public static OleDbConnection OpenDB (string DBName) { try { OleDbConnection Conn = new OleDbConnection ();
Conn.ConnectionString="Provider=Microsoft.jet.oledb.4.0;data source="+DBName;

Conn.Open (); return Conn; } V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 100

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu catch (Exception ex) { return null; } } // Kt ni n c s d liu v thng bo kt qu kt ni trn mt Label. protected void Page_Load (object sender, EventArgs e) { OleDbConnection Conn; Conn = OpenDB (@"c: \Nwind.mdb"); if (Conn != null) { if (Conn.State = = ConnectionState.Open) lblThongBao.Text = " kt ni thnh cng ! " ; } else { lblThongBao.Text = "Khng th kt ni c !"; } } } Ch : Thng thng tp c s d liu c lu trong th mc App_Data. Khi c th kt ni n CSDL ny m khng cn bit th mc hin c t trong C:\ hay D:\ th cn vit ng dn ca tp nh sau:
Conn = OpenDB (Server.MapPath("../App_Data/nwind.mdb"));

V tr ca tp CSDL nwind.mdb

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 101

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu - Nu a cha tp CSDL c nh dng l NTFS v c t quyn truy cp th cn phi m bo rng th mc cha tp CSDL c quyn read/write cho ngi dng l IUSR_. (C th thay i quyn hoc ngi dng truy cp n th mc bng cch Right click ln th mc , chn Properties, tip theo chn th Security v Add thm ngi dng/ quyn..) 13.3.2 Lp Command Chc nng: Thc hin cc thao tc i vi CSDL, nh Insert, Update, delete, Select. Tuy nhin, thc hin c cc lnh ny th cn phi thng qua mt Connection no ang c m. Cch to (chnh tc): OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Cu lnh SQL"; Cmd.Connection= OleDbConnection_Obj; Hoc vit gn hn: OleDbCommand Cmd=new OleDbCommand("Lnh SQL",OleDbConnection_Obj);

Trong OleDbConnection_Obj l mt OleDbConnection m trc Open ri.

Cu lnh SQL: l mt xu cha cu lnh SQL bt k. Mt s phng thc dng thc thi cu lnh SQL: int ExecuteNonQuery(): S dng khi CommandText trn thuc dng Insert, Delete, Update. Hm ny tr v s bn ghi b tc ng (affected). Object ExecuteScalar(): S dng khi CommandText trn l cu lnh SQL ch tr v mt kt qu n, v d cu lnh m tng s bn ghi : Select Count(*) Hm ny tr v hng v ct u tin ca kt qu thc thi truy vn. Cc hng v ct khc b b qua. OleDbDataReader ExecuteReader(): Dng khi CommandText l mt cu lnh chn (Select). Hm tr v l mt i tng OleDbDataReader cha kt qu thc thi cu lnh (thng l cu lnh Select). XMLReader ExecuteXMLReader(): Dng c d liu l mt tp XML. Phng thc ny ch p dng cho mt s Provider (v d SqlClient) Mt s thuc tnh CommandText: Cha cu lnh SQL cn thc thi, v d: "Select * from Employees", "Insert into Employees (.) values (.)", "Delete from Employees where " Connection: cho bit l i tng Command s dng kt ni no. CommandType: Cho bit CommandText cha StoreProcedure, tn bng hay l cu lnh SQL. Mc nh thuc tnh ny c gi tr l Text.

V d: Xy dng mt trang web hin th tng s bn ghi ca bng Products trong c s d liu nwind.mdb.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

102

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Default.aspx.cs
using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_Default : System.Web.UI.Page { // Kt ni n c s d liu v thng bo kt qu trn mt Label. protected void Page_Load (object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn=new OleDbConnection(); Conn.ConnectionString="Provider=Microsoft.jet.oledb.4.0; data source=" ; Conn.ConnectionString += Server.MapPath("../App_Data/nwind.mdb"); Conn.Open(); // To i tng Command v thc thi cu lnh m s bng ghi OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select Count(*) from Products"; Cmd.Connection = Conn; // Hin th kt qu trn Label int SL = (int) Cmd.ExecuteScalar(); lblThongBao.Text = "S bn ghi trong bng Products: " + SL.ToString (); // Gii phng kt ni. Cmd.Dispose (); Conn.Close (); } }

V d: Thm Tn nh cung cp vo bng Suppliers: Trang giao din


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Command_InsertData.aspx.cs" Inherits="Lession_12_Command_InsertData" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Insert data</title> </head> <body> <form id="form1" runat="server"> <h2> <asp:TextBox runat="server" ID="txtNCC"></asp:TextBox> <asp:Button runat="server" ID="cmdAdd" Text="Thm" onclick="cmdAdd_Click"

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 103

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


/> </h2> </form> </body> </html>

Trang Code behind:


using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_Command_InsertData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void cmdAdd_Click (object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/nwind.mdb"); Conn.Open (); // To i tng Command v thc thi cu lnh m s bng ghi OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Insert into Suppliers(CompanyName) values('" + txtNCC.Text + "')"; Cmd.Connection = Conn; Cmd.ExecuteNonQuery (); Cmd.Dispose (); Conn.Close (); } }

13.3.3 Lp DataReader Chc nng: Dng n nhn kt qu tr v t phng thc ExecuteReader ca i tng Command. N tng t nh mt Recordset ca ADO, tuy nhin d liu nhn v l Readonly v ch c theo chiu tin. Mt s phng thc: Bool Read(): Thc hin vic c mt bn ghi (mt hng) trong kt qu, sau chuyn ti bn ghi tip theo. Hm ny tr v true nu vn cn d liu, false nu c ht. DataTable: GetTableSchema() Tr v mt dataTable m t thng tin v DataReader nh tn cc ct. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 104

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu String: GetName(int i) Tr v tn ca ct i GetInt(int i), GetString(int i),, GetXXX(int i) Tr v gi tr ca ct i v chuyn v dng Int, String, Mt s thuc tnh: Boolean: HasRows cho bit l DataReader c cha d liu hay khng ? int FieldCount Cho bit s trng (Ct) ca DataReader. Bin DataReader v d Dr cho php c d liu ca tng (ct/ trng) ca hng hin hnh nh sau: Dr["Tn trng"/ hoc ch s]. V d : Np Tn ca tt c sn phm trong bng Products v a vo mt ListBox. Trang giao din:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataReader.aspx.cs" Inherits="Lession_12_DataReader" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>OleDbDataReader demo</title> </head> <body> <form id="form1" runat="server"> <h2> Danh mc sn phm</h2> <asp:ListBox runat="server" ID="lstDSSP" Rows="20"> </asp:ListBox> </form> </body> </html>

Trang Code Behind


using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_DataReader : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/nwind.mdb"); Conn.Open (); // To i tng Command v thc thi cu lnh m s bng ghi OleDbCommand Cmd; Cmd.CommandText = "Select ProductName from Products"; Cmd.Connection = Conn;

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 105

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


OleDbDataReader Dr; /// Dr = Cmd.ExecuteReader ();

khng c new

//Duyt v a vo lstDSSP while (Dr.Read() == true) { lstDSSP.Items.Add (Dr ["ProductName"].ToString()); } Cmd.Dispose (); Conn.Close (); } }

Cu hi: Vit lstDSSP.Items.Add (Dr [0].ToString()) c c khng ?. 13.3.7 Lp DataColumn Chc nng: L mt thnh phn to nn DataTable. Khai bo: DataColumn Dc; Dc = new DataColumn (Tn_Ct); Hoc, to ct v ch nh kiu d liu cho ct: DataColumn Dc; Dc = new DataColumn ("Hello", System.Type.GetType(Tn_Kiu)); Trong Tn_Kiu c th l String, Int32, . Mt s phng thc: Mt s thuc tnh: Caption: Tiu ca ct ColumnName: Tn ca ct. V d : To mt ct c tn l H tn, kiu String, Tui kiu Int:
DataColumn Dc_HVT; Dc_HVT = new DataColumn ("HoVaTen", System.Type.GetType ("String")); Dc_HVT.Caption = "H v tn"; DataColumn Dc_Tuoi; Dc_HVT = new DataColumn ("Tuoi", System.Type.GetType ("Int32")); Dc_HVT.Caption = "Tui";

13.3.8 Lp DataTable Chc nng: Qun l d liu dng bng 2 chiu (Cc hng v cc ct). Khai bo:
DataTable Dt ;

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

106

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


Dt=new DataTable(); hoc Dt = new DataTable("Tn_Bng");

Mt s phng thc: DataRow NewRow() : Tr v mt i tng DataRow; Clear(): Xa tt c cc d liu trong DataTable Mt s thuc tnh: Columns: L mt tp hp, qun l ton b cc ct (Thm, xa, sa) ca DataTable. Columns li c cc phng thc thm/xa ct. Rows: L mt tp hp, qun l ton b cc hng trong DataTable. Rows cng c cc phng thc thm/xa hng. Truy xut n [i,j] ca bng: Tn_Bng.Rows[i][j]. C th dng vng lp kiu nh for (i=0; i < Dt.Rows.Count; i++) for (j=0; j < Dt.Columns.Count; j++) { Dt.Rows[i][j] } duyt ton b cc trong Table. V d : To mt bng c 2 ct l H tn (Kiu String) v Tui (Kiu Int32) .
DataColumn Dc_HVT; Dc_HVT = new DataColumn ("HoVaTen", Type.GetType ("String")); Dc_HVT.Caption = "H v tn"; DataColumn Dc_Tuoi; Dc_HVT = new DataColumn ("Tuoi", Type.GetType ("Int32")); Dc_HVT.Caption = "Tui"; DataTable Dt ; Dt=new DataTable(); Dt.Columns.Add (Dc_HVT); Dt.Columns.Add(Dc_Tuoi);

// To ct h tn nh vo Column trn // To ct tui.

Hoc c th thm ngn gn hn: Dt.Columns.Add("HoVaTen",Type.GetType("String")); 13.3.9 Lp DataRow Chc nng: L mt i tng qun l mt hng ca mt DataTable. Khai bo: DataRow Dr; Lu : V Dr ph thuc vo bng (DataTable) nn n ch c
to ra bi mt DataTable c sn, khng th to DataRow theo kiu: DataRow Dr=new DataRow() !!!

Truy xut cc ct () trong mt DataRow nh sau: Dr[Ch s] hoc Dr[Tn_Ct]. Trong Dr: l mt bin kiu DataRow V d : To mt bng c hai ct H tn v Tui, sau chn vo bng ny 2 bn ghi c gi tr tng ng l {"Nguyn Vn An", 30} v {"Nguyn Vn Bnh", 20}.
.. DataTable Dt ; Dt=new DataTable();

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 107

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


Dt.Columns.Add (Dc_HVT); Dt.Columns.Add(Dc_Tuoi); DataRow Dr; Dr = Dt.NewRow (); // To mt hng trng Dr ["HoVaTen"] = "Nguyn Vn An"; Dr ["Tuoi"] = 30; Dt.Rows.Add (Dr); // Thm vo bng Dr = Dt.NewRow (); // To mt hng trng Dr ["HoVaTen"] = "Nguyn Vn Bnh"; Dr ["Tuoi"] = 20; Dt.Rows.Add (Dr); // Thm vo bng ..

13.3.10 Lp DataSet Chc nng: L mt i tng cha cc DataTable. N l ni lu tr d liu tm thi cho ng dng trong qu trnh x l. Lp DataSet ny nm trong System.Data. 0 1 2

DataSet Object Khai bo: DataSet Ds; DataSet Ds = new DataSet(); Mt s phng thc: Mt s thuc tnh: Tables: Cha tt c cc bng cha trong Dataset. Tables[i] hoc Tables[Tn_Bng] : Tham chiu n mt bng c th trong Dataset. V d : Xem v d mc 13.3.11 13.3.11 Lp DataAdapter Chc nng: ng vai tr cu ni / Chuyn i d liu gia Ngun d liu (DataSource) v cc i tng thao tc d liu (nh DataSet chng hn). Mt s phng thc: Fill (DataSet, Tn_Cho_DataSet): in d liu ly c vo DataSet.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

108

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


Update(DataSet/DataTable) : Cp nht d liu trong DataSet, DataTable ngc tr v C s d liu.

Mt s thuc tnh: SelectCommand, UpdateCommand, DeleteCommand, InsertCommand: tr v hoc cho php thit lp cc cu lnh SQL Chn (Select), Cp nht (Update), Delete, Insert vo C s d liu. V d: Hin th ton b bng Suppliers ra mn hnh Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataSet.aspx.cs" Inherits="Lession_12_DataSet" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DataSet demo</title> </head> <body> <form id="form1" runat="server"> <h2>Danh sch nh cung cp</h2> <asp:DataGrid runat="server" ID="dgrNCC"> </asp:DataGrid> </form> </body> </html>

Trang Code
using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_DataSet : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/nwind.mdb"); Conn.Open (); // To i tng Command v select ton b bng Suppliers OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select * from Suppliers"; Cmd.Connection = Conn; OleDbDataAdapter Da; Da=new OleDbDataAdapter();

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 109

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


Da.SelectCommand=Cmd; DataSet DsNCC = new DataSet (); Da.Fill (DsNCC, "DS_NCC"); // Hin th trn mt bng dgrNCC.DataSource = DsNCC.Tables ["DS_NCC"]; dgrNCC.DataBind (); } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

110

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 14: THC HNH


Mc tiu: Kt thc bi hc ny, hc vin c th: To c c s d liu cho h thng qun l cn b S dng c cc lp truy xut ca ADO.NET Hin th d liu trn trnh duyt bng cc iu khin ASP Server controls. Hon thin chc nng Nhp h s cn b, trong c lu vo Database. Ni dung: 1. To c s d liu Access QLCB.MDB c nhng bng vi cu trc nh sau: Bng tblCanBo

Bng Bng cp: tblBangCap

Bng phng ban: tblPhongBan

Bng trnh chuyn mn: tblChuyenMon

Bng chc v: tblChucVu

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 111

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Bng ngi dng

Mi quan h gia cc bng (Ch chn Cascading Update/ Delete khi to)

2. Nhp d liu cho bng. y ch hng dn cch nhp mu cho bng tblUser, v bng ny cha c d liu dng Xu, s, bool, datetime. Hc vin to cc bng khc mt cch tng t. 2.1 Thit k trang giao din (Ch : Cc trang cn phi c gn vo trong h thng giao din c xy dng bi trc, v d: a vo MasterPage) Trang giao din NhapNguoiDung.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapNguoiDung.aspx.cs" Inherits="Lession_13_NhapNguoiDung" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Nhp thng tin ngi dng</title> <style type="text/css"> .CanPhai {text-align:right; font-style:italic} </style> </head> <body> <form id="form1" runat="server"> <div> <table style="border:solid 1px purple; border-collapse:collapse;">

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

112

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<tr> <td colspan="2" style="background-color:Purple;color:White"> <h3 style="margin:3px 3px 3px 3px">Nhp thng tin ngi dng</h3> </td> </tr> <tr> <td class="CanPhai"> Tn ng nhp </td> <td> <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> </td> </tr> <tr> <td class="CanPhai"> Mt khu </td> <td> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> </td> </tr> <tr> <td class="CanPhai"> Quyn hn </td> <td> <asp:DropDownList ID="ddlQuyenHan" runat="server" style="text-align:left"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td class="CanPhai"> Ghi ch </td> <td> <asp:TextBox ID="txtGhiChu" runat="server" Rows="2" TextMode="MultiLine"></asp:TextBox> </td> </tr> <tr> <td> </td> <td> <asp:Button ID="cmdThem" runat="server" Text="Thm" onclick="cmdThem_Click" /> </td> </tr> </table> </div> </form>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 113

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</body> </html>

2.2 Vit code behind. NhapNguoiDung.aspx.cs


using System; using System.Data; using System.Data.OleDb; public partial class Lession_13_NhapNguoiDung : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void cmdThem_Click (object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/QLCB.mdb"); Conn.Open (); string strSQL; string TenDN=txtUserName.Text; string MatKhau=txtPassword.Text; string GhiChu=txtGhiChu.Text; string NgayTao=DateTime.Now.Month.ToString() +"/" + DateTime.Now.Day.ToString(); NgayTao += "/" + DateTime.Now.Year.ToString(); int QuyenHan=int.Parse(ddlQuyenHan.Text); strSQL="Insert into tbluser(TenDangNhap, MatKhau, QuyenHan, NgayTao, GhiChu) "; strSQL += " values ('" + TenDN + "','" + MatKhau + "'," + QuyenHan + ",'" + NgayTao + "','" + GhiChu +"')"; // To i tng Command v select ton b bng Suppliers OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = strSQL; Cmd.Connection = Conn; Cmd.ExecuteNonQuery (); txtUserName.Text = ""; txtPassword.Text = ""; txtGhiChu.Text = ""; ddlQuyenHan.Text = "1"; txtUserName.Focus (); } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

114

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 3. Hin th d liu trong bng ln trnh duyt 3.1 Trang giao din HienThiNguoiDung.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HienThiNguoiDung.aspx.cs" Inherits="Lession_13_HienThi" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <div> <h2> Danh sch ngi dng</h2> <asp:DataGrid runat="server" id="dgrDSNS"></asp:DataGrid> </div> </form> </body> </html>

3.2 Trang code behind Trang HienThiNguoiDung.aspx.cs


using System; using System.Data; using System.Data.OleDb; public partial class Lession_13_HienThi : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/QLCB.mdb"); Conn.Open (); // To i tng Command v select ton b bng Suppliers OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select * from tblUser"; Cmd.Connection = Conn; OleDbDataAdapter Da; Da = new OleDbDataAdapter (); Da.SelectCommand = Cmd; DataSet DsNCC = new DataSet (); Da.Fill (DsNCC, "DS_USer"); // Hin th trn mt bng dgrDSNS.DataSource = DsNCC.Tables ["DS_USer"]; dgrDSNS.DataBind (); } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 115

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 4. Cp nht d liu bng DataSet v DataAdapter cp nht d liu vo trong CSDL, ta c th dng cu lnh SQL dng nh "UPDATE WHERE ." v thc thi bng phng thc ExecuteNonQuery ca i tng Command. Tuy nhin cn c mt cch khc cp nht na, l dng phng thc Update ca i tng DataSet v DataAdapter. M hnh dng nh sau:

Cc bc cn phi thc hin khi Update bng DataAdapter: 1. To kt ni n CSDL 2. To i tng Command v t cu lnh Select cho thuc tnh CommandText. Vic t cu lnh Select y l v sau DataAdapter bit c cc trng ca bng gm nhng trng no ? 3. in (Fill) d liu vo mt DataSet. 4. Chnh sa d liu trong cc bng ca DataSet 5. To mt th hin ca CommandBuilder (OleDBCommandBuilder/ SqlCommandBuilder) 6. Gi phng thc Update ca DataAdapter cp nht thc s vo Database. V d: Sa i trng thi ng nhp (Trng TrangThai) ca tt c ngi dng trong bng tblUser thuc c s d liu QLCB.mdb thnh 1. Trang giao din UpdatewithDataAdapter.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatewithDataAdapter.aspx.cs" Inherits="Lession_13_UpdatewithDataAdapter" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Cp nht d liu thng qua Data Adapter</title> </head> <body> <form id="form1" runat="server"> <h2>Sa trng thi ng nhp thnh 1</h2> <asp:Button runat="server" ID="cmdEnableAllUser" Text="Enable all users"

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

116

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


onclick="cmdEnableAllUser_Click" /> </form> </body> </html> Trang code behind: UpdatewithDataAdapter.aspx.cs using System; using System.Data; using System.Data.OleDb; public partial class Lession_13_UpdatewithDataAdapter : System.Web.UI.Page { protected void cmdEnableAllUser_Click (object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/QLCB.mdb"); Conn.Open (); // To i tng Command v select ton b bng tblUser OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select * from tbluser"; Cmd.Connection = Conn; OleDbDataAdapter Da; Da = new OleDbDataAdapter (); Da.SelectCommand = Cmd; // in d liu vo DataSet DataSet Ds=new DataSet(); Da.Fill(Ds,"DSND"); // Sa d liu ca bng tblUser trong Dataset for (int i=0; i < Ds.Tables["DSND"].Rows.Count; i++) { Ds.Tables["DSND"].Rows [i]["TrangThai"] = 1; } //Cp nht tr li C s d liu OleDbCommandBuilder CmdBuilder = new OleDbCommandBuilder (Da); Da.Update (Ds,"DSND"); /// Cp nht bng DSND trong Ds vo C s d liu //Gii phng cc i tng khng cn s dng Cmd.Dispose (); Da.Dispose (); Conn.Close (); } }

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 117

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 15: Tm hiu v ng dng c ch Data Binding


15.1 Gii thiu DataBinding
ASP.NET cung cp cho chng ta rt nhiu iu khin cho php hin th cng nh tip nhn thng tin t ngi dng. C nhng iu khin cho php chng ta hin th nhng thng tin tnh (Static tc l gi tr xc nh c ngay khi lp trnh), mt s hin th c c nhng thng tin ng (Dynamic - tc l c tnh ton khi chy chng trnh). vic hin th thng tin ng ny mt cch n gin v nhanh chng, ASP.NET cung cp cho chng ta mt c tnh gi l "Data Binding" (Tm dch: "Gn kt d liu"). Thut ng Data Binding y c hiu l "Gn/ lin kt cc iu khin vi mt ngun d liu no hin th, thao tct ng". T "Data" cng cn phi c hiu theo ngha rng, n khng nht thit phi l ci g lin quan n C s d liu nh ta thng ngh m c th l mt thuc tnh, mt mng, mt tp hp, mt danh sch, mt trng d liu trong bng CSDL.hay tng qut l mt biu thc tr v gi tr. im khc bit chnh ca c ch Data binding so vi cc c ch lin kt d liu khc l tnh khai bo. Vic khai bo ny khng phi trong file Code behind (*.CS) m l trong file giao din (*.ASPX). iu ny lm cho code v iu khin tch bit v sng sa hn. Bi hc ny s gii thiu c tnh Databinding bng cc iu khin ASP.NET Server.

15.2 Data Binding


15.2.1 Dng gn kt d liu n (Single DataBinding) Trong ASP.NET, c th gn mt gi tr n l vo trang c gi l Single Data Binding. C php gn d liu n vo trang nh sau: <%# Gi_Tr %>. Trong : Gi_Tr c th l mt hng, mt bin, mt hm, mt biu thc hoc c th l mt thuc tnh khc. V d:

<%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" %> <head runat="server"> <title>Data Binding demo</title> </head> <body> <form id="form1" runat="server"> Hng s: <%# 20 %> <br /> Hng xu: <%# "Xin cho" %> <br /> Biu thc: <%# 10+5 %> <br /> Hm : <%# "Sin(3.14/2) = " + Math.Sin(3.14/2) %> <br /> Thuc tnh khc: <%# "Tiu ca trang l " + this.Title %> </form> </body> </html>

C th gn kt ti mt biu thc, mt bin, thuc tnh bt k. Ch : Trong th tc Page_Load cn thm lnh this.DataBind() thc s gn kt.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

118

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu 15.2.2 Dng gn kt d liu c s lp li (Repeated Data Binding) C rt nhiu trng hp d liu cn hin th l mt danh sch (V d Mng, bng, DataReader,) hay tng qut l mt tp hp cc mc (Collection Items ). Trong trng hp nh vy, ta hon ton c th dng c ch DataBinding trong ASP.NET gn kt qu vo mt iu khin dng danh sch (V d ListBox, DropdownList, CheckboxList,) hin th m khng cn phi vit nhiu dng code. Cc iu khin cho php gn kt d liu thng c 3 thuc tnh vi cc ngha nh sau: DataSource: L thuc tnh ch n ngun d liu cn gn kt. Ngun d liu ny phi l mt tp hp. V d: DataTabe, Array, DataSourceID: Ch n mt i tng cung cp ngun d liu. C th s dng hoc thuc tnh DataSourceID hoc DataSource nhng khng c c hai. DataTextField: Cho bit l gn kt vi trng no ca mi mc d liu. V d 1: To mt mng c 100 phn t (t 0 n 99), sau hin th trn mt Listbox thng qua c ch DataBinding:

Trang giao din: ArrayBinding.aspx Ch : V y mi mt phn t ca mng ch c mt gi tr duy nht, do vy trong 3 thuc tnh DataSource, DataSouceID v DataTextField ta ch cn t gi tr duy nht l DataSouce khi thc hin bind mng ny vo ListBox hin th. C th nh trong trang Code behind sau y. Nhc li rng, vic Bind d liu thc s din ra, ta cn gi phng thc DataBind ca iu khin hoc DataBind ca trang (Nu gi phng thc DataBind ca trang th tt c cc iu khin con thuc trang s t ng gi phng thc DataBind ca ring n).

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 119

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Trang Code v kt qu: ArrayBinding.aspx.cs V d 2: Dng c ch DataBind, hin th tt c tn ng nhp trong bng tblUser thuc CSDL QLCB.MDB vo mt ListBox:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataReaderBinding.aspx.cs" Inherits="Lession_14_DataBinding" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>DataReader Binding</title> </head> <body> <form id="form1" runat="server"> <h2>Danh sch ngi dng</h2> <asp:ListBox ID="lstDSND" runat="server"></asp:ListBox> </form> </body> </html>

Trang giao din

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

120

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

using System; using System.Data.OleDb; public partial class Lession_14_DataBinding : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // To i tng Connection v m kt ni n CSDL OleDbConnection Conn; Conn = new OleDbConnection (); Conn.ConnectionString="Provider=Microsoft.jet.oledb.4.0; data source="; Conn.ConnectionString += Server.MapPath ("../App_Data/QLCB.mdb"); Conn.Open (); // To i tng Command v select ton b bng Suppliers OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select * from tblUser"; Cmd.Connection = Conn; OleDbDataReader Dr; Dr = Cmd.ExecuteReader (); // Bind kt qu vo Listbox hin th trn trang web lstDSND.DataSource = Dr; // Ly d liu t ngun Dr lstDSND.DataTextField = "TenDangNhap"; // Hin th TenDangNhap lstDSND.DataBind (); // Thc hin gn kt. } }

Trang code thc hin vic Binding Ch : - Ta gn kt d liu gia Listbox vi DataReader c bi v Dr cha mt tp hp phn t - V mi mc d liu ca ngun d liu (Dr) trong trng hp ny li cha nhiu trng, do vy ta cn phi ch r thm l Listbox s gn/ly trng no ra hin th thng qua vic gn tn trng cn hin th cho thuc tnh DataTextField. - Sau cng, cn phi gi phng thc DataBind () thc hin gn kt v hin th thc s.

15.3 Cc iu khin Data Source (Data source controls).


15.3.1 Gii thiu v DataSource controls bi trc chng ta s dng cc i tng truy xut d liu (nh datareader) kt hp vi vng lp (while (Dr.DataRead() == true)) duyt v c ton b bn ghi ly v. Tuy nhin, cn mt cch khc c d liu m khng phi vit code l dng cc iu khin Data Source. Hin ti ASP.NET cung cp mt s Data source controls sau y:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 121

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu SqlDataSouce: Cho php truy xut ti bt k ngun d liu s dng trnh iu khin (Provider) ca ADO.NET. Bao gm OleDb, SqlClient, ODBC, Oracle. (bi ny s s dng SqlDataSource minh ha) ObjectDataSource: Truy xut ti ngun d liu do ngi dng t nh ngha. AccessDataSource: Truy xut ti ngun d liu Access XmlDataSource: Truy xut ti ngun d liu l file XML.

tng ca DataSource control l: "Bn ch vic t vi thng s kt ni v cu lnh sql, sau c th gn vo control ny ly li d liu.". Vic gn v ly d liu ny thc hin d dng thng qua cc thuc tnh khi khai bo control. Tuy nhin, vi DataSouce control th khng ch c vy, n cn cho php thc hin cc thao tc cp nht khc nh Update, delete, 15.3.2 S dng SqlDataSouce chn (Select) d liu a) To iu khin SqlDataSouce: C php:
<asp:SqlDataSource runat="server" ProviderName="Tn_Provider" ConnectionString="ng dn ti file CSDL hoc thng s kt ni" SelectCommand/ UpdateCommand/ DeleteCommand ="Cu lnh SQL tng ng" ID="Gi tr ID">

Lu : cho linh hot, thng s kt ni thng c t trong file cu hnh (web.config). c xu kt ni ny ta c th thc hin thng qua k php dng: <%$ %>. V d: To mt iu khin SqlDataSouce c ton b ni dung ca bng tblUser trong c s d liu QLCB. Ni dung ca file web.config nh sau: web.config ..
<connectionStrings> <add name="QLCB" connectionString="Provider=Microsoft.jet.oledb.4.0; Data Source=|DataDirectory|\QLCB.mdb"/> </connectionStrings>

.. Trong : |DataDirectory| s cho ta ng dn ti th mc App_Data. Nu c s d liu cn kt ni l SQL Server th xu s c dng: web.config ..


<connectionStrings> <add name="QLCB" connectionString="Provider=SQLOLEDB.1;Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=QLCB;Data Source=localhost"/> </connectionStrings>

..

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

122

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

To mt SqlDataSource v select d liu trong bng tblUser Sau khi to mt ngun d liu trn ri th vic s dng ngun d liu ny hin th kh n gin. V d: Hin th bng tblUser va ly c trn. Hin th danh sch ngi dng
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="datasourceControl.aspx.cs" Inherits="Lession_15_datasourceControl" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>SqlDataSouce control</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ProviderName="System.Data.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select * from tblUser" ID="DSND" > </asp:SqlDataSource> <asp:GridView runat="server" ID="dgr" DataSourceID="DSND" > </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 123

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

V d 2: Hin th tn cc nh cung cp trong mt Dropdownlist; Phn tch: y Dropdownlist ch hin th c mt ct (trng d liu) trong khi Dr cha c mt bng (c nhiu ct). Do vy, cn phi ch cho Dropdownlist bit l gn vi trng no ca Dr thng qua thuc tnh DataTextField.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataTextField.aspx.cs" Inherits="Lession_15_DataTextField" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Hin th danh sch nh cung cp trong nwind.mdb</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSNCC" ProviderName="System.Data.OleDb" ConnectionString="<%$ ConnectionStrings:NWIND %>" SelectCommand="Select * from Suppliers"> </asp:SqlDataSource> <h2> Danh sch nh cung cp</h2> <asp:DropDownList runat="server" ID="ddlDSNCC" DataSourceID="DSNCC" DataTextField="CompanyName"> </asp:DropDownList> </form> </body> </html>

Trong : Xu kt ni NWIND ca file web.config c gi tr nh sau:


<connectionStrings> <add name="NWIND" connectionString="Provider=Microsoft.jet.oledb.4.0; Data Source=|DataDirectory|\nwind.mdb"/>

</connectionStrings> 15.3.3 S dng SqlDataSource cp nht d liu cp nht d liu th trong khai bo iu khin SqlDatasource ta cn cung cp c th cu lnh Update cho thuc tnh UpdateCommand. Lu : Khi thc hin Update, thng thng ta s truyn gi tr vo thng qua cc tham s. Do vy, cn phi Add cc tham s (parameter) ny trc khi thc hin thao tc Update. V d 1: Hin th bng tblUser trong gridview, nhng c thm chc nng cp nht. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 124

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Giao din trang web c th cp nht c thc s vo CSDL, thc hin my cng vic sau: 1. Hin th ct Update, trong gridview: t thuc tnh
AutoGenerateEditButton="true". 2. Thm thuc tnh UpdateCommand cho SqlDataSource 3. Truyn tham s v gi tr cho cc trng m ta mun cp nht. 4. Gi phng thc Update ca SqlDataSource.

Trong 1) v 2) vit trong trang ASPX; 3) 4) vit trong s kin Row_Updating ca GridView. Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDeleteUser.aspx.cs" Inherits="Lession_15_DisplaytblUser" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Cp nht ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSND" ProviderName="System.Data.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select TenDangNhap, MatKhau from tbluser" UpdateCommand="Update tblUser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" </asp:SqlDataSource> <h2>Cp nht thng tin ngi dng</h2>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 125

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<asp:GridView runat="server" ID="dgrDS" DataKeyNames="TenDangNhap" DataSourceID="DSND" AutoGenerateEditButton="true" onrowupdating="dgrDS_RowUpdating" > </asp:GridView> </form> </body> </html>

Trang code
using using using using using using using System; System.Data; System.Data.OleDb; System.Web; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

public partial class Lession_15_DisplaytblUser : System.Web.UI.Page { protected void dgrDS_RowUpdating (object sender, GridViewUpdateEventArgs e) { string TenDN; string MKMoi; TenDN = e.NewValues ["TenDangNhap"].ToString (); MKMoi = e.NewValues ["MatKhau"].ToString (); // To 2 tham s vi gi tr tng ng l TenDN v MKMoi, // Sau add vo UpdateCommand ca i tng SQLDataSource DSND.UpdateParameters.Add ("MatKhau", MKMoi); DSND.UpdateParameters.Add ("TenDangNhap", TenDN); DSND.Update (); } }

Phn tch: Trong thuc tnh UpdateCommand trn, ta c dng:


UpdateCommand="Update tblUser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap"

y @MatKhau v @TenDangNhap c gi l cc tham s. Tham s ny rt a dng, n c th l ni dung ca mt textbox hay cng c th do ta to ra tng minh bng cu lnh dng: SqlDataSource.UpdateCommand.Parameters.Add("Tn","Gi tr") . Trong trng hp ny ta s to bng phng thc Add, sau truyn gi tr l ni dung m ngi dng va sa i. Cu hi : Lm th no ly c gi tr m ngi dng va sa ?. Rt may cho chng ta l khi ngi dng sa i ni dung v bm vo nt "Update" (bn cnh Gridview) th Gridview s Postback tr li Server v kch hot s kin RowUpdating: V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 126

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Khi postback (gi v) server, Gridview s gi km cc thng tin v hng (bn ghi) hin ang c sa cha, c th gm: Cc gi tr c (OldValues), cc gi tr mi (NewValues), ch s ca hng ang sa v c th c gi tr kha ca bn ghi (nu trong gridview ta t thuc tnh DataKeyNames) truy xut n cc gi tr mi/c ny ta vit: e.OldValues[Ch s / tn trng], e.NewValues[Ch s hoc tn trng]. truy xut n gi tr kha ca bn ghi hin hnh, ta vit e.Keys[Ch s / hoc tn trng] (V d e.Keys[MaSanPham]) Sau khi ly c cc gi tr ny, ta s to ra parameters tng ng v gi phng thc Update() ca iu khin SqlDataSource. 15.3.4 Xa bn ghi trong CSDL bng SqlDataSource xa bn ghi, ta cng tin hnh tng t nh khi cp nht, l phi thm thuc tnh DeleteCommand cho iu khin SqlDataSource, to v truyn tham s trong s kin RowDeleting. Nh vy, ni dung trang web trn s c b sung thm nh sau: Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDeleteUser.aspx.cs" Inherits="Lession_15_DisplaytblUser" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Cp nht ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource runat="server" ID="DSND" ProviderName="System.Data.OleDb" ConnectionString="<%$ ConnectionStrings:QLCB %>" SelectCommand="Select TenDangNhap, MatKhau from tbluser" UpdateCommand="Update tbluser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" DeleteCommand="delete from tblUser where TenDangNhap=@TenDangNhap"> </asp:SqlDataSource>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 127

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

<h2>Cp nht thng tin ngi dng</h2> <asp:GridView runat="server" ID="dgrDS" DataKeyNames="TenDangNhap" DataSourceID="DSND" AutoGenerateEditButton="true" onrowupdating="dgrDS_RowUpdating" > </asp:GridView> </form> </body> </html>

Trang code
using using using using using using using using using System; System.Data; System.Data.OleDb; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

public partial class Lession_15_DisplaytblUser : System.Web.UI.Page { protected void dgrDS_RowDeleting (object sender, GridViewDeleteEventArgs e) { string TenDN = e.Keys ["TenDangNhap"].ToString (); ///Ly gi tr kha DSND.DeleteParameters.Add ("TenDangNhap", TenDN); DSND.Delete (); } protected void dgrDS_RowUpdating (object sender, GridViewUpdateEventArgs e) { string TenDN, MKMoi; TenDN = e.NewValues ["TenDangNhap"].ToString (); MKMoi = e.NewValues ["MatKhau"].ToString (); // To 2 tham s vi gi tr tng ng l TenDN v MKMoi, // Sau add vo UpdateCommand ca i tng SQLDataSource DSND.UpdateParameters.Add ("MatKhau", MKMoi); DSND.UpdateParameters.Add ("TenDangNhap", TenDN); DSND.Update (); } }

Ch : Th t thm tham s phi ging nh th t s dng tham s trong thuc tnh UpdateCommand, DeleteCommand ca SqlDataSource.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

128

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 16: THC HNH


Mc tiu: Kt thc bi thc hnh, hc vin c th: c v hin th d liu s dng c ch DataBinding c v hin th d liu s dng c ch DataBinding v iu khin SqlDataSource Cp nht d liu s dng SqlDataSource v GridView. Ni dung: C s d liu c s dng: QLCB.MDF (c s d liu SQL Server)

Bi 1.1: Hin th danh sch cn b (bao gm H tn, ngy sinh, gii tnh, a ch, in thoi) trong mt Gridview, s dng c ch DataBinding. Hng dn: c d liu bng DataReader v Command. Sau "Gn" GridView vi DataReader bng cch t thuc tnh DataSource ca GridView: Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_DataBinding.aspx.cs" Inherits="Lession_17_DSCB_DataBinding" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch cn b - version 1.0</title> </head> <body> <form id="form1" runat="server"> <h3>Danh sch cn b&nbsp; <asp:Button ID="cmdDisplay" runat="server" onclick="cmdDisplay_Click" Text="Hin th" /> </h3> <hr /> <asp:GridView runat="server" ID="dgrDSCB"> </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 129

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Trang Code
using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Data.SqlClient; System.Web; System.Web.UI; System.Web.UI.WebControls;

public partial class Lession_17_DSCB_DataBinding : System.Web.UI.Page { private SqlConnection Conn = new SqlConnection (); private SqlCommand Cmd = new SqlCommand (); private SqlDataReader Dr; protected void Page_Load(object sender, EventArgs e) { } protected void cmdDisplay_Click (object sender, EventArgs e) { Conn.ConnectionString =
System.Configuration.ConfigurationManager.ConnectionStrings ["strConn"].ToString();

Conn.Open ();

Cmd.CommandText = "Select HoVaTen, NgaySinh, GioiTinh, DiaChi, SoDienThoai from tblCanBo";

Cmd.Connection = Conn; Dr=Cmd.ExecuteReader (); //Gn kt vi Gridview hin th dgrDSCB.DataSource = Dr; dgrDSCB.DataBind (); Cmd.Dispose (); Conn.Close (); } }

Bi 1.1 Hin th thng tin v ngi dng (Gm h tn, bng cp, chc v) mi khi ngi dng chn n v trong mt Dropdownlist. Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_PhongBan.aspx.cs" Inherits="Lession_17_DSCB_PhongBan" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Thng tin v cn b theo phng ban</title> </head> <body> <form id="form1" runat="server"> <h3>Danh sch phng</h3>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

130

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<asp:DropDownList runat="server" ID="ddlDSPhong" AutoPostBack="true"> </asp:DropDownList> <br /> <h3>Danh sch cn b trc thuc</h3> <asp:GridView runat="server" ID="dgrDSCB"></asp:GridView> </form> </body> </html>

Trang code
using using using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Data.SqlClient; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

public partial class Lession_17_DSCB_PhongBan : System.Web.UI.Page { private SqlConnection Conn = new SqlConnection (); private SqlCommand Cmd = new SqlCommand (); private SqlDataReader Dr; protected void Page_Load(object sender, EventArgs e) { Conn.ConnectionString =
System.Configuration.ConfigurationManager.ConnectionStrings ["strConn"].ToString ();

Conn.Open (); if (IsPostBack == false) { Cmd.CommandText = "Select MaPhong from tblPhongBan"; Cmd.Connection = Conn; Dr = Cmd.ExecuteReader (); ddlDSPhong.DataSource = Dr; ddlDSPhong.DataTextField = "MaPhong"; ddlDSPhong.DataBind (); } else {
Cmd.CommandText="Select tblCanBo.HoVaTen, tblBangCap.MoTa, tblChucVu.MoTa " +

" FROM tblCanBo, tblBangCap, tblChucVu " + "WHERE tblCanBo.MaBangCap = tblBangCap.MaBangCap and " + " tblCanBo.MaChucVu=tblChucVu.MaChucVu and "+ " tblCanBo.MaPhongBan = '" + ddlDSPhong.Text + "'"; Cmd.Connection = Conn;

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 131

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Dr = Cmd.ExecuteReader (); dgrDSCB.DataSource = Dr; dgrDSCB.DataBind (); } Cmd.Dispose (); Conn.Close (); } }

Bi 2: Xy dng cc trang cho php cp nht thng tin v ngi dng, phng ban, chc v, chuyn mn, bng cp. S dng c ch DataBinding, kt hp vi GridView tng t nh trong bi l thuyt. Bi 3: b sung vo cc trang trn chc nng "Thm mi". cho php thm mi cc bn ghi. Giao din c dng nh sau:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

132

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 17: Lm vic vi GridView


17.1 Gii thiu tng quan
GridView c l l mt iu khin trnh din d liu quan trng nht ca ASP.NET. N cho php gn v hin th d liu dng bng, trong mi hng l mt bn ghi, mi ct ng vi mt trng d liu. Ngoi vic hin th, GridView cn c rt nhiu tnh nng khc m trc y ngi ta phi vit rt nhiu dng code mi c c, v d: nh dng, phn trang, sp xp, sa i, xa d liu. GridView c th gn kt d liu vi cc ngun nh DataReader, SqlDataSource, ObjectDataSource hay bt k ngun no c ci t System.CollectionsEnumerable. Trong bi hc ny, chng ta s i tm hiu v s dng mt s tnh nng ni bt ca GridView, t c th p dng lm Project cho mn hc.

17.2 Tm hiu lp GridView


17.2.1 Cc thuc tnh v ct thuc tnh GridView ngoi vic hin th thun ty cc trng ca mt ngun d liu, n cn cho php hin th di cc hnh thc khc (v d di dng nt, dng HyperLink, dng checkbox), cc ct khc b tr cho vic thao tc d liu nh Select, Update, Delete hon ton c th ty bin trong GridView. chnh sa cc ct dng ny, click chn "smart tag" ca GridView v chn "Edit Field" hoc chn thuc tnh Columns ca GridView trong ca s thuc tnh. Loi ct BoundField ButtonField CheckBoxField CommandField M t Hin th gi tr ca mt trng thuc ngun d liu. Hin th mt nt lnh cho mi mc trong GridView. Nt ny cho php bn c th to ra cc nt ty bin kiu nh Add hay Remove. Hin th mt checkbox ng vi mi mc trong GridView. Ct ny thng c dng hin th cc trng kiu Boolean (Yes/No). Hin th cc nt lnh c nh ngha sn thc hin cc thao tc select, edit, hay delete.

HyperLinkField Hin th gi tr ca mt trng di dng siu lin kt (hyperlink). Loi ct ny cho php bn gn mt trng th hai vo URL ca siu lin kt. ImageField TemplateField Hin th mt nh ng vi mi mc trong GridView. Hin th ni dung ty bin ca ngi dng cho mi mc d liu trong GridView, theo nh mu nh sn. Loi ct ny cho php ta to ra cc ct ty bin.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 133

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Cc thuc tnh: Thuc tnh GridLines ShowHeader ShowFooter PageSize PageCount PageIndex AllowPaging AllowSorting
AutoGenerateColumns

M t n, hin cc ng vin ca GridView. Cho php Hin/ n phn Header Cho php Hin/ n phn Footer Get/Set cho bit mi trang cha bao nhiu dng. Cho bit s trang ca ngun d liu m n gn kt Get/Set ch s ca trang ang c hin th C cho php phn trang khng ( true = c) C cho php sp xp khng (true=c) C t ng sinh ra cc ct ng vi cc ct trong ngun d liu hay khng ? Mc nh = true (c) T ng to ra ct Delete (true = t ng)

AutoGenerateDeleteButton

AutoGenerateUpdateButton T ng to ra ct Update (true = t ng) AutoGenerateSelectButton

T ng to ra ct Select (true = t ng) t hng no v ch edit. EditIndex = 2 hng th 3 (ch s 2) s v ch edit. Nu t EditIndex = -1 th s thot khi ch Edit. Tr v ch s ca dng ang chn Mt tp hp cha cc hng ca GridView. Mt tp hp cha cc ct ca GridView.

EditIndex (SelectedIndex) SelectedIndex Rows Columns

17.2.2 Cc style p dng cho GridView GridView rt linh hot trong vic trnh by d liu, n cho php ta nh dng cc phn thng qua style. V d ta c th nh dng cho phn Header, footer, cc mc d liu, cc hng chn-l v.v Bng di y s gii thch r ngha mt s thuc tnh: V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 134

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Thuc tnh style M t

AlternatingRowStyle Style p dng cho cc hng d liu chn-l trong GridView. Khi t thuc tnh ny th cc hng s c hin th vi nh dng lun phin gia RowStyle v AlternatingRowStyle. EditRowStyle FooterStyle HeaderStyle PagerStyle RowStyle Style hin th hng hin ang c sa (Edit). Style p dng cho phn Footer. Style p dng cho phn Header. Style p dng cho phn phn trang (cc trang << 1 2 3 >>). Style p dng cho cc hng d liu trong GridView control. Khi AlternatingRowStyle c thit lp th s p dng lun phin gia RowStyle v AlternatingRowStyle. Style p dng cho hng ang c chn (Selected)ca GridView.

SelectedRowStyle

17.2.3 Cc s kin GridView c rt nhiu s kin quan trng, cc s kin ny khi kch hot s cung cp cho ta nhng thng tin hu ch trong qu trnh x l. V d, khi chng ta click nt Update, n s kch hot s kin Updating v tr v cho chng ta cc gi tr m ngi dng va sa. Di y l bng tng hp mt s s kin hay dng nht: Tn s kin PageIndexChanged PageIndexChanging M t Xut hin khi ta click chn cc nt ( << 1 2 3 >>) trong hng phn trang. Xut hin khi ngi dng click chn cc nt ( << 1 2 3 >>) trong hng phn trang nhng TRC khi GridView thc hin vic phn trang. Ta c th hy vic phn trang ti s kin ny. Xut hin khi nt Cancel c click nhng trc khi thot khi ch Edit. Xut hin khi mt nt c click. Xut hin khi mt hng mi c to ra. Thng c s dng sa ni dung ca hng khi n va c to ra. Xut hin khi mt hng d liu c gn vo GridView. Ti y ta c th sa i ni dung ca hng .

RowCancelingEdit RowCommand RowCreated RowDataBound

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 135

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu RowDeleted RowDeleting Xut hin khi nt Delete ca mt hng c click, nhng sau khi GridView delete bn ghi t ngun. Xut hin khi nt Delete c click nhng trc khi GridView xa bn ghi t ngun. Ti y c th Cancel vic Delete. Xut hin khi nt Edit c click, nhng trc khi GridView v ch sa. Xut hin khi nt Update c click, nhng sau khi GridView update hng d liu. Xut hin khi nt Update c click, nhng trc khi GridView update hng d liu. Xut hin khi nt Select ca hng c click nhng sau khi GridView x l xong thao tc Select.

RowEditing RowUpdated RowUpdating SelectedIndexChanged

SelectedIndexChanging Xut hin khi nt Select ca hng c click nhng trc khi GridView x l xong thao tc Select. Sorted Sorting Xut hin khi Hyperlink (tiu ct) c click, nhng sau khi GridView thc hin vic sp xp. Xut hin khi Hyperlink (tiu ct) c click, nhng trc khi GridView thc hin vic sp xp. S kin ny khi xy ra, n s cung cp cho chng ta thng tin v tn ct va c click. Da vo ta c th thc hin vic sp xp mt cch d dng.

17.2.4 Cc phng thc Tn phng thc DataBind() DeleteRow(int) UpdateRow(int i, bool Valid) Sort(Biu thc sx, hng sx) M t Gn kt d liu gia GridView v ngun d liu (t cc thuc tnh DataSource, DataTextField hoc DataSourceID. Xa mt dng trong GridView Cp nht mt dng trong GridView. Sp xp da trn biu thc v hng.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

136

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

17.3 Cc tnh nng h tr ca GridView


17.3.1 Phn trang thc hin phn trang, cn t thuc tnh AllowPaging = True. Khi phn trang, c th ty bin hin th cc trang (hin th dng cc s 1 2 3 hay mi tn << >>) bng cch t cc thuc tnh con trong PagerSettings. V d: Hin th tt c ngi dng trong bng tblUser trong GridView nhng s dng c ch phn trang. Mi trang gm 5 bn ghi. Trang giao din <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AllUserwithPaging.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="true" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast"> </asp:GridView> </form> </body> </html> Nu gn kt gridview vi DataReader/ DataTable/ DataSet th cn phi ch nh r ch s trang cn hin th khi s kin PageIndexChanging c kch hot, c th nh sau: Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagingwithDataReaderBinding.aspx.cs" Inherits="Lession_18_PagingwithDataReaderBinding" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng - Paging vi DataSet</title> </head> <body>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 137

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<form id="form1" runat="server"> <asp:Button runat="server" ID="cmdHienThi" Text="Hin th" onclick="cmdHienThi_Click" /> <asp:GridView runat="server" ID="dgrDSND" AllowPaging="true" AutoGenerateColumns="true" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" onpageindexchanging="dgrDSND_PageIndexChanging"> </asp:GridView> </form> </body> </html>

Trang Code behind


using using using using using System; System.Collections; System.Configuration; System.Data; System.Data.SqlClient;

public partial class Lession_18_PagingwithDataReaderBinding : System.Web.UI.Page { protected void NapDuLieu() { //Kt ni n csdl SQL. Ch lnh c xu kt ni trong tp web.config SqlConnection Cn = new SqlConnection ();
Cn.ConnectionString=ConfigurationManager.ConnectionStrings ["QLCBConnectionString"].ToString();

Cn.Open (); SqlDataAdapter Da = new SqlDataAdapter ("Select * from tblUser", Cn); DataSet Ds = new DataSet (); Da.Fill (Ds, "DSND"); /// Bind d liu va ly c vo GridView hin th dgrDSND.DataSource = Ds.Tables ["DSND"]; dgrDSND.DataBind (); //Gii phng khi khng cn s dng Ds.Dispose (); Da.Dispose (); Cn.Close (); } protected void cmdHienThi_Click (object sender, EventArgs e) { NapDuLieu (); //Gi hm np d liu } //S kin ny kch hot khi ngi dng click s trang trn GridView // Khi ngi dng click trang no th ta hin th trang trn browser

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

138

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


// Ch s ca trang va chn nm trong e.NewPageIndex protected void dgrDSND_PageIndexChanging (object sender, GridViewPageEventArgs e) { dgrDSND.PageIndex = e.NewPageIndex; // t li ch s trang cn hin th NapDuLieu (); // Np li d liu } }

17.3.2 Tnh nng t ng sp xp Tnh nng ny cho php d liu trong GridView s t ng c sp xp theo gi tr ca ct m ngi dng click. y ta c th sp xp theo chiu tng (Asscending) hoc gim (Descending). bt tnh nng ny, cn t thuc tnh AllowSorting = true trong GridView. Khi ngi dng click chut vo mt ct tiu no ca GridView th s kin Sorting s c kch hot, ti y ta cn phi ch r cho GridView bit l sp theo ct no (SortExpression ) v theo chiu tng hay gim (SortDirection). V d: Hin th danh sch ngi dng trong bng tblUser, khi ngi dng click vo mt ct th sp theo chiu tng dn. Trang giao din
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sorting.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" id="dgrDSND" AllowPaging="True" AllowSorting="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" </asp:GridView> </form> </body> </html>

Trang code
using System; using System.Collections; using System.Configuration; public partial class Lession_18_AllUserwithPaging : System.Web.UI.Page

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 139

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


{ protected void dgrDSND_Sorting (object sender, GridViewSortEventArgs e) { e.SortDirection= SortDirection.Descending; } }

17.3.3 Cc mu hin th - Template ASP.NET cung cp cho chng ta sn mt s Template (mu) hin th GridView cng kh p. V vy, bn c th s dng ngay cc template ny khi xy dng ng dng. Cch thc chn template cho GridView nh sau: b1: M trang ch Design b2: Chn GridView v chn smart tag, tip theo chn AutoFormat

b3: Chn Format trong danh sch.

T hp mu c chn t Template c sn. Sau khi chn Template, Asp s t ng to ra cc thuc tnh (th) tng ng trong GridView, ti y bn c th tip tc ty bin thm theo nh mun.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

140

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

17.4 To cc ct ty bin HyperLink, BoundColunm


17.4.1 To ct BoundField th cng to cc ct th cng, cn t thuc tnh AutoGenerateColumns = "Fase", sau son th cng cc ct trong ca s Edit Columns. V d: Hin th danh sch ngi dng nhng cc ct to th cng Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnManual.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False"> <Columns>
<asp:BoundField DataField="TenDangNhap" HeaderText="Tn ng nhp"

SortExpression="tendangnhap" />

<asp:BoundField DataField="HoVaTen" HeaderText="H v tn" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" SortExpression="MatKhau" /> </Columns> </asp:GridView> </form> </body> </html>

17.4.2 To mt ct hyperlink, Hin th danh sch ngi dng (bng tbluser) trong c thm ct "Chi tit" khi ngi dng click chut vo hyperlink ny th chuyn n trang hin th chi tit ngi dng. Trong ASP.NET, GridView c kh nng hin th (render) cc trng c cha HyperLink thnh cc th <a href > trn trnh duyt. Do vy, v tng chng ta cn phi to mt ct mi c cha sn Hyperlink sau "Chn" trng ny vo ct Hyperlink ca GridView. Ch : Trong SQL, thng thng trong cu lnh SELECT chng ta ch chn cc trng sn c trong bng CSDL, tuy nhin hon ton c th to ra mt ct mi kiu nh sau: V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 141

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu SELECT Ten + Ho as HoVaTen FROM Trong : Ten, Ho l 2 trng ca bng, HoVaTen l mt ct mi (Do ta to ra ngay trong cu lnh SELECT, cn trong bng CSDL th khng c trng ny) Hay mt v d khc: SELECT TenHang, NgayXua, SoLuong, DonGia, SoLuong * DonGia As ThanhTien Trng ThanhTien l mt trng mi. Gi tr ca n bng gi tr SoLuong * DonGia ca bn ghi hin ti. to ct hin th c HyperLink, GridView cung cp th : <asp: HyperLinkField>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnHyperlink.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau, 'UserDetail.aspx?TenDangNhap=' + TenDangNhap as ChiTiet FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False">
<Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tn ng nhp" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" SortExpression="MatKhau" /> <asp:HyperLinkField HeaderText="Chi tit" DataNavigateUrlFields="ChiTiet" Text="Xem chi tit" /> </Columns>

</asp:GridView> </form>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

142

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</body> </html>

17.4.3 To ct Image Tng t nh ct HyperLink, GridView cng c mt ct chuyn hin th hnh nh (ImageField) nu trng d liu gn vi n cha ng dn n nh nm trong ng dng. to ct cho php hin th Image, dng th <asp:ImageField DataImageUrlField ../> Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnImage.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau, HinhAnh FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False" > <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tn ng nhp" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" SortExpression="MatKhau" /> <asp:ImageField DataImageUrlField="HinhAnh" HeaderText="Hnh nh"> </asp:ImageField> </Columns> </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 143

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

17.5 To v x l cc ct Select, Edit, Delete, Update


17.5.1 Thm ct Select, Edit - Update, Delete GridView khng ch hin th c cc bng d liu m cn h tr rt tt trong vic chnh sa v xa d liu. c bit khi ngun d liu l SqlDataSource th vic sa v xa hon ton t ng, khng cn phi vit bt k dng code no. bt tnh nng ny, cn b sung thm thuc tnh vo GridView vi gi tr l true cho AutoGenerateSelectColum, AutoGenerateEditColum, AutoGenerateDeleteColum. C th nh sau:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" DataKeyNames="TenDangNhap">

<Columns>

<asp:BoundField <asp:BoundField <asp:BoundField <asp:BoundField

DataField="TenDangNhap" HeaderText="Tn ng nhp"/> DataField="HoVaTen" HeaderText="H v tn"/> DataField="MatKhau" HeaderText="Mt khu" /> DataField="QuyenHan" HeaderText="Quyn hn" />

<asp:CommandField HeaderText="Chn" ShowSelectButton="True" /> <asp:CommandField HeaderText="Sa cha" ShowEditButton="True"/> <asp:CommandField HeaderText="Xa" ShowDeleteButton="True" /> <asp:CommandField HeaderText="Thm" ShowInsertButton="True" /> </Columns>
<SelectedRowStyle BackColor="#999999" /> </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

144

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Hin th cc ct lnh (Select, edit, delete)

17.5.2 Cp nht d liu V d 1: Xy dng trang web cho php hin th v cp nht (Update) trng H v tn v Mt khu ca bng tblUser: Cc bc cn tin hnh: - To mt ngun d liu SqlDataSource - Thm thuc tnh UpdateCommand vi cu lnh cp nht Sql. - To GridView v t thuc tnh DataKeyNames = "Tn trng Kha ca bng CSDL" - Gn kt GridView vi SqlDataSource bng cch t DataSourceID ca GridView = ID ca SqlDataSource. Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" UpdateCommand= "UPDATE tblUser SET MatKhau=@MatKhau, QuyenHan=@QuyenHan WHERE TenDangNhap=@TenDangNhap"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5"

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 145

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


AutoGenerateColumns="False" DataKeyNames="TenDangNhap"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="TnN" ReadOnly="true"/> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" ReadOnly="true"/> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyn hn" />

<asp:CommandField HeaderText="Sa cha" ShowEditButton="True"/>


</Columns> </asp:GridView> </form> </body> </html>

Kt qu sau khi chy trang trn. Ch : Khi s dng ngun d liu l SqlDataSource v trong cu lnh Update/Delete nu ta t tn cc tham s ging vi tn ca cc trng d liu (v d MatKhau=@MatKhau) th SqlDataSource s t ng to cc tham s sau truyn gi tr m ngi dng va mi nhp gip chng ta. V vy khng cn phi vit cc cu lnh cp nht tng minh. Trang Code: Khng phi vit v khai bo trn s t ng cp nht !!!. 17.5.3 Xa d liu V d 2: Xy dng trang web cho php xa bn ghi trc tip trn GridView. Vic xa cng hon ton tng t nh Update. Tc l ta cng cn phi thm thuc tnh DeleteCommand vo trong SqlDataSource. c th nh sau:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddEditUpdateDeleteColumn.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml">

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

146

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<head runat="server"> <title>Cp nht danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau FROM tblUser"

DeleteCommand="Delete tblUser where TenDangNhap = @TenDangNhap">


</asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" DataKeyNames="TenDangNhap"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tn" ReadOnly="true" /> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" ReadOnly="true"/> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyn hn" /> <asp:CommandField HeaderText="Sa cha" ShowEditButton="True" />

<asp:CommandField HeaderText="Xa" ShowDeleteButton="True" />


</Columns> </asp:GridView> </form> </body> </html>

Xa trc tip trn GridView.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 147

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 18: THC HNH


Mc tiu: Kt thc bi thc hnh ny hc vin c th: - S dng c kh nng sp xp v phn trang ca GridView vi cc ct sinh ta t ng hoc th cng. - Cp nht d liu (Sa v Xa) trc tip trn GridView. - To ra cc ct ty bin: HyperLink v Image Ni dung: Bi 1: Hin th thng tin vn tt (gm H v tn, a ch, chc v) v cn b trong c s d liu QLCB. Trong thc hin phn trang vi kch thc trang c lu trong file web.config, ngoi ra cn cho php ngi dng sp xp bng hin th bng cch click chut ln cc ct tiu . Hng dn: lu thng s no trong file web.config, cn thm phn t vo cp th <AppSettings>. V d: Ta cn lu thit lp v kch thc ca trang, khi web.config s c dng: ..
<appSettings> <add key="PageSize" value="5"/> </appSettings>

.. Khi , c gi tr ny, ta vit: System.Configuration.ConfigurationManager.AppSettings ["PageSize"].ToString (); Minh ha: Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PagingSorting.aspx.cs" Inherits="Lession_18_PagingSorting" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Hin th v sp xp vi GridView.</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau FROM tblUser"> </asp:SqlDataSource> <asp:GridView runat="server" ID="dgrDSND" AllowSorting="True" AllowPaging="True" DataSourceID="SqlDataSource1"> </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

148

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Trang Code behind


using using using using using using using System; System.Collections; System.Configuration; System.Web; System.Web.UI; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts;

public partial class Lession_18_PagingSorting : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { dgrDSND.PageSize=int.Parse( System.Configuration.ConfigurationManager.AppSettings ["PageSize"].ToString ()); } }

Ch : Nu mun sp xp theo nhiu ct th cn a danh sch tn ct (trng ) vo thuc tnh SortExpression. Cc phn t cch nhau bi du chm phy. Bi 2: To mt trang hin th thng tin chi tit v ngi dng trong bng tblUser. Trong c thm ct chi tit (dng Hyperlink) khi ngi dng click chn th chuyn ti mt trang mi l UserDetail.aspx, ti y s hin th ton b cc thng tin khc ca ngi dng va c chn.

Giao din Hng dn: Cn to thm mt ct v d ChiTiet - ngay trong cu lnh SELECT, sau "Chn" ct mi ny vo trng HyperLinkField ca GridView. Minh ha: Trang giao din (Khng c Code behind)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnHyperlink.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch ngi dng</title>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 149

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau, 'ChiTietNguoiDung.aspx?TenDangNhap=' + TenDangNhap as ChiTiet FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" PagerSettings-Mode="NumericFirstLast" AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" > <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tn ng nhp" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" SortExpression="MatKhau" /> <asp:HyperLinkField DataNavigateUrlFields="ChiTiet" HeaderText="Chi tit" Text="Xem chi tit" /> </Columns> </asp:GridView> </form> </body> </html>

Trang UserDetail.aspx:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

150

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu UserDetail.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserDetail.aspx.cs" Inherits="Lession_18_UserDetail" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Chi tit ngi dng</title> <style type="text/css"> .CotTrai { text-align:right; font-style:italic; font-weight:bold} </style> </head> <body> <form id="form1" runat="server"> <h2 style="border-bottom:solid 2px">Chi tit ngi dng t ti y</h2> <table> <tr> <td class="CotTrai">H v tn</td> <td><asp:Label runat="server" ID="lblHVT"></asp:Label></td> </tr> <tr> <td class="CotTrai">Tn ng nhp</td> <td><asp:Label runat="server" ID="lblTenDN"></asp:Label></td> </tr> <tr> <td class="CotTrai">Mt khu</td> <td><asp:Label runat="server" ID="lblMK"></asp:Label></td> </tr> <tr> <td class="CotTrai">Quyn hn</td> <td><asp:Label runat="server" ID="lblQH"></asp:Label></td> </tr> <tr> <td class="CotTrai">Trng thi</td> <td><asp:Label runat="server" ID="lblTT"></asp:Label></td> </tr> <tr> <td colspan="2"> <asp:Image runat="server" ID="imgPhoto"/></td> </tr> </table> <hr /> <a href="#" onclick="history.go(-1);"> &lt; Tr v</a> </form> </body> </html>

Trang Code UserDetail.aspx.cs using System; using System.Collections; using System.Configuration; using System.Data.SqlClient; using System.Web; using System.Web.Security; using System.Web.UI; V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 151

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class Lession_18_UserDetail : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { SqlConnection Cn = new SqlConnection (); Cn.ConnectionString= System.Configuration.ConfigurationManager.ConnectionStrings ["QLCBConnectionString"].ToString (); Cn.Open (); SqlCommand Cmd = new SqlCommand ("Select * from tblUser where TenDangNhap= '" + Request.QueryString ["TenDangNhap"] + "'",Cn); SqlDataReader Dr = Cmd.ExecuteReader (); // Hin th thng tin chi tit ra cc nhn v th Image if (Dr.Read()) { lblHVT.Text = Dr ["HoVaTen"].ToString(); lblMK.Text = Dr ["MatKhau"].ToString (); lblTenDN.Text = Dr ["TenDangNhap"].ToString (); lblTT.Text = Dr ["TrangThai"].ToString (); lblQH.Text = Dr ["QuyenHan"].ToString (); imgPhoto.ImageUrl = Dr ["HinhAnh"].ToString (); } Cmd.Dispose (); Cn.Close (); } } Bi 3: To mt trang PhoToNguoiDung, hin th 3 ct thng tin l HoVaTen, TrangThai, QuyenHan v nh tng ng. Gi s th mc nh c tn l Images v nm cng vi trang web. Hng dn: Cn to thm mt ct mi v d t tn l DuongDanAnh sau "Chn" trng ny vo ImageField ca GridView. Minh ha: Trang code giao din <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserList_ColumnImage.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style type="text/css"> img {width:50px; height:50px} </style> <title>Danh sch ngi dng</title> V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 152

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT TenDangNhap, HoVaTen, HinhAnh FROM tblUser"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSND" DataKeyNames="TenDangNhap" AllowPaging="True" PageSize="5" PagerStyle-HorizontalAlign="Center" AllowSorting="True" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="Tn ng nhp" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mt khu" SortExpression="MatKhau" /> <asp:ImageField DataImageUrlField="HinhAnh" HeaderText="Hnh nh" > </asp:ImageField> </Columns> </asp:GridView> </form> </body> </html>

Kt qu

Kt qu

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 153

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu Bi 4: To mt trang CapNhatCanBo, trong cho php ngi dng sa i H tn v a ch trc tip. (Trn GridView.) v xa mt cn b bt k. Hng dn: Lm tng t nh bi l thuyt (Thm cc ct Edit, Delete vo GridView) Minh Ha: Trang giao din (Khng c Code trang CS) <%@ Page Language="C#" AutoEventWireup="true" CodeFile="EditUpdateDeleteCB.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch cn b</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblCanBo" UpdateCommand="Update tblCanBo set HoVaTen=@HoVaTen, DiaChi=@DiaChi where MaCanBo=@MaCanBo" DeleteCommand="Delete tblCanBo where MaCanBo = @MaCanBo"> </asp:SqlDataSource> <asp:GridView DataSourceID="SqlDataSource1" runat="server" ID="dgrDSCB" AllowPaging="True" PageSize="5" AutoGenerateColumns="False" DataKeyNames="MaCanBo"> <Columns> <asp:BoundField DataField="HoVaTen" HeaderText="H v tn" /> <asp:BoundField DataField="DiaChi" HeaderText="a ch" /> <asp:BoundField DataField="NgaySinh" HeaderText="NS" ReadOnly="true"/>
<asp:BoundField DataField="SoDienThoai" HeaderText="T" ReadOnly="true"/>

<asp:CommandField HeaderText="Sa cha" ShowEditButton="True" /> <asp:CommandField HeaderText="Xa" ShowDeleteButton="True" /> </Columns> </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

154

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 19: S dng Templates


19.1 Gii thiu tng quan
Trong cc bi trc, chng ta tm hiu kh nng trnh din d liu rt mnh ca GridView, n c th phn trang t ng, sp xp t ng v cp nht d liu t ng Tuy nhin, trong mt s trng hp c th th chng ta vn rt cn phi c s trnh by linh hot hn, v d: Chng ta mun trnh by d liu theo chiu dc chng hn. v..v Rt may l GridView (v cc iu khin khc) u c c ch h tr cho chng ta kh nng ty bin rt cao l TEMPLATE !. Template dch ra Ting Vit c th hiu l cc Mu nh sn. Ci mu ny do lp trnh vin t thit k. Trong mu ny, chng ta c th thm bt c th HTML hay th server hp l. Mi ln x l mt mc d liu (mt bn ghi) th h thng s t ng a mc d liu ny vo bn trong mu. Bi hc ny s gii thiu thm v Template ca cc iu khin nng cao l GridView, DataList v Repeater.

19.2 Cc iu khin h tr Templates


19.2.1 Mt s iu khin h tr Template thng dng Trong asp.NET c rt nhiu iu khin h tr kh nng ty bin bng Templates. Mt s iu khin ph bin h tr Template bao gm: GridView DataGrid DataList Repeater 19.2.2 Cc loi Template Cc iu khin u c mt s phn hin th tng t nhau: Nh phn tiu (Header), phn ni dung d liu (DataItem) v phn chn trang (Footer). ngha c th ca tng phn ny nh sau: HeaderTemplate: L phn cho php nh dng tiu trc ni dung hin th. Thng l tn cc trng trong CSDL, ItemTemplate: L phn cho php nh dng cch thc hin th mc d liu (bn ghi). Phn ny c to ra mi khi mt dng d liu c gn kt vo iu khin. AlternateTemplate: Phn ny cho php nh dng cch thc hin th ca phn t thuc hng chn. FooterTemplate: Cho php nh dng chn trang sau ni dung hin th. Ngoi ra, mi iu khin cn c thm cc thuc tnh khc na. Khi s dng Template, thng thng chng ta c mong mun l hin th mt s trng d liu no y. V vy, asp.net cung cp mt hm gi l Eval("Tn_Mc/Trng d liu") cho php chng ta ly d liu ca mt trng thuc bn ghi hin hnh. Gi tr ca hm Eval() ny c a vo trong th hin hnh thng qua c ch DataBind, kiu nh sau: H v tn: <b> <%# Eval ("HoVaTen") %></b> V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 155

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

19.3 Repeater control, DataList control, GridView control


19.3.1 To template vi GridView. V d 1: To mt trang web hin th danh sch H v tn ngi dng trong bng tblUser bi trc ta hin th c mt cch d dng, tuy nhin sau y chng ta s s dng Template ca GridView. Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUser.aspx.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sch ngi dng - s dng Templates</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true">

<Columns> <asp:TemplateField HeaderText="H v tn"> <ItemTemplate> <%# Eval("HoVaTen") %> </ItemTemplate> </asp:TemplateField> </Columns>
</asp:GridView> </form> </body> </html>

t ni dung bt k (C th l text, html , server controls )

V d 2: Nh v d 1 nhng t h tn vo cc TextBox Trang giao din


<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="H v tn">

<ItemTemplate> <asp:TextBox runat="server" Text='<%# Eval("HoVaTen") %>'>


V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 156

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

</asp:TextBox> </ItemTemplate>
</asp:TemplateField> </Columns> </asp:GridView>

V d 3: Hin th h tn v TrangThai. Trong TrangThai c t trong ngoc ngay sau h v tn. Trang giao din
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true">

<Columns> <asp:TemplateField HeaderText="H v tn">


<ItemTemplate>

<%# Eval("HoVaTen") %> ( <%# Eval("TrangThai") %> )


</ItemTemplate>

</asp:TemplateField>
</Columns> </asp:GridView>

V d 4: Hin th h tn v nh Trang giao din


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUserOnTextBox.aspx.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sch ngi dng - s dng Templates</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true">

<Columns> <asp:TemplateField HeaderText="H v tn & nh "> <ItemTemplate> <%# Eval("HoVaTen") %> <br /> V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 157

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu <asp:Image runat="server" ImageUrl='<%# Eval("HinhAnh")%>'/> </ItemTemplate> </asp:TemplateField> </Columns>
</asp:GridView> </form> </body> </html>

Thm nhiu ct:


thm nhiu ct, ta cn thm cp th <asp:TemplateField > </ asp:TemplateField> Trong , mi cp th s tng ng vi mt CT ca GridView . V d 5: Hin th cc trng HoVaTen, MatKhau, Hnh nh trn GridView, mi trng hin th trn mt ct v H tn ch m. Trang giao din
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplaytblUserMultiCols.aspx.cs" Inherits="Lession_19_DisplaytblUser" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Danh sch ngi dng - s dng Templates</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true">

<Columns> <asp:TemplateField HeaderText="H v tn"> <ItemTemplate> <b><%# Eval("HoVaTen") %></b> <br /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Trng thi"> <ItemTemplate> <i><%# Eval("TrangThai") %></i> <br /> </ItemTemplate> </asp:TemplateField>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

158

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

<asp:TemplateField HeaderText="Hnh nh"> <ItemTemplate> <asp:image runat="server" ImageUrl='<%# Eval("HinhAnh") %>' Width="100px" Height="100px" /> </ItemTemplate> </asp:TemplateField> </Columns>

</asp:GridView> </form> </body> </html>

V d 6: Hin th d liu trong mt ct


.. Nh v d 5 <asp:GridView ID="GridView1" runat="server" Width="100%" DataSourceID="SqlDataSource1" ShowHeader="false" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="THNG TIN NGI DNG"> <ItemTemplate> <b> H v tn: <%# Eval("HoVaTen") %></b> <hr/> Tn ng nhp: <%#Eval("TenDangNhap") %> <br /> Quyn hn : <%#Eval("QuyenHan") %> <br /> Trng thi: <%#Eval("TrangThai") %> <br /> Hnh nh : <br /><asp:Image runat="server" ImageUrl='<%#Eval("HinhAnh") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> .. Nh v d 5

Cp nht d liu
cho php sa d liu ca mt trng, ta cn t thuc tnh text ca trng vo trong phng thc Bind, dng nh sau:

<asp:TextBox

Text='<%# Bind("Tn_Trng") %>'


runat="server" id="textBox"/> </ asp:TextBox>
V d 7: Cp nht h s cn b (Ch cp nht trng "Bn thn")
.. Nh v d 5 <asp:GridView ID="GridView1" runat="server" Width="100%" DataSourceID="SqlDataSource1" DataKeyNames="MaCanBo" AutoGenerateColumns="false" AllowPaging="true">

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 159

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<Columns> <asp:TemplateField HeaderText="THNG TIN CN B"> <ItemTemplate> <b> H v tn: <%# Eval("HoVaTen") %></b> <hr/> M Cn b: <%#Eval("MaCanBo") %> <br /> Ngy sinh : <%#Eval("NgaySinh") %> <br /> a ch: <%#Eval("DiaChi") %> <br /> Bn thn : <%# Eval("BanThan") %> </ItemTemplate> <EditItemTemplate> <b> H v tn: <%# Eval("HoVaTen") %></b> <hr/> M Cn b: <%#Eval("MaCanBo") %> <br /> Ngy sinh : <%#Eval("NgaySinh") %> <br /> a ch: <%#Eval("DiaChi") %> <br /> Bn thn : <asp:TextBox TextMode="MultiLine" runat="server" id="txtBanThan" Text='<%# Bind("BanThan") %>'> </asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:CommandField ButtonType="Button" EditText="Sa" ShowEditButton="true" /> </Columns> </asp:GridView> .. Nh v d 5

19.3.2 To template vi DataList DataList cho php ta hin th di dng danh sch. Danh sch ny c th chia lm nhiu ct nh mt s ng dng thng thy trn Internet. V d 8: Hin th nh nh hnh trn;
<body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:DataList runat="server" ID="DataList1" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" RepeatColumns="3" RepeatLayout="Table"> <ItemTemplate > H v tn: <b> <%# Eval ("HoVaTen") %></b> <br /> Quyn hn : <%# Eval("QuyenHan") %> <br /> <asp:Image ID="Image1" Width="100px" Height="100px" runat="server" ImageUrl= '<%# Eval("HinhAnh") %>' /> <hr /> </ItemTemplate> </asp:DataList>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

160

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


</form> </body>

Kt qu sau khi chy trang trn 19.3.3 To Template vi Repeater (light-weight) Repeater cng l mt iu khin c kh nng hin th d liu di dng danh sch. Khi c gn vi ngun d liu, n s ln lt thc thi ni dung nm trong phn Template mi khi mt bn ghi c c t ngun. Tuy iu khin ny khng c kh nng phn trang, sp xp nh GridView nh n l mt iu khin chim t ti nguyn ca h thng (v vy c gi l iu khin Light-weight), do chng ta c th dng trong nhng trng hp m ti nguyn ng vai tr quan trng. Repeater cho php chng ta ty bin cc mc tng t nh GridView v DataList, l s dng Template. V d 9: Hin th h tn v nh minh ha ngi dng trong bng tblUser s dng iu khin Repeater. V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 161

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater.aspx.cs" Inherits="Lession_19_Repeater" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Hin th danh sch ngi dng</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource>

<asp:Repeater runat="server" ID="rptDSND" DataSourceID="SqlDataSource1"> <ItemTemplate> H v tn: <%# Eval("HoVaTen") %> <br /> <asp:Image runat="server" ImageUrl='<%# Eval("HinhAnh") %>' Width="100px" Height="100px" /> <hr /> </ItemTemplate> </asp:Repeater>
</form> </body> </html>

20. ng gi website
Sau khi hon tt d n th mt khu quan trng na cn phi thc hin m bo vn bn quyn l bin dch v xut bn ng dng web. Vic xut bn (Publish) ng dng s gip bin dch cc file code behind (file CS) thnh cc assemblies (file DLL). Khi , ng dng chy s nhanh hn v bo mt hn. xut bn web, Right click vo Tn ca Solution v chn mc Publish. Sau mt hp thoi hin ra cho php ta chn th mc s lu kt qu.

ng dng c bin dch ny c th copy vo Server thc thi.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

162

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

BI 20: THC HNH


Mc tiu: Kt thc bi hc ny, hc vin c th S dng c tnh nng Template trnh din v cp nht d liu theo yu cu S dng c DataList trnh din d liu di dng ct. S dng ListView kt hp vi DataPager hin th v duyt cc bn ghi. Ni dung: Bi 1: Hin th danh sch cn b (bao gm h tn, a ch, in thoi) trong bng tblCanBo. Trong H tn ch m. Hng dn: - t thuc tnh AutoGenerateColumns = "false" - T to cc ct cho GridView bng cp th <asp:TemplateField> </> - t ni dung cn hin th ( y l H tn, a ch, in thoi) vo cc ct bng cch t bn trong cp th <asp:DataItemTemplate> </>

Danh sch cn b Minh ha:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ThongTinCanBo.aspx.cs" Inherits="Lession_20_ThongTinCanBo" %> <head runat="server"> <title>Thng tin v cn b</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblCanBo"> </asp:SqlDataSource> <asp:GridView runat="server" ID="DSCB" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="H v tn"> <ItemTemplate>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 163

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<b><%# Eval("HoVaTen") %></b> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="a ch"> <ItemTemplate> <%# Eval("DiaChi") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="in thoi"> <ItemTemplate> <%# Eval("SoDienThoai") %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>

Bi 2: B sung thm trng Photo vo bng tblCanBo, trng Photo ny s lu ng dn ti file nh ca mi cn b. Sau xy dng trang web hin th thng tin cn b (bao gm cc trng H tn, a ch v nh tng ng). Hng dn: - V trng Photo cha ng dn n file nh ri, v vy hin th hnh nh thay v vn bn text thun ty, ta s to thm phn t <asp:Image>, trong thuc tnh ImageUrl s c gn gi tr ca trng Photo tng ng. c th l : <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' /> - t kch thc nh nh nhau, c th thm thuc tnh Width v Height - Trc gi tr <%# Eval("Photo") %> cn c thm cp du nhy n m bo tnh ng n khi ng dn nh cha du cch.

Yu cu v giao din

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

164

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


Minh ha:
<asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="Both" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="H v tn"> <ItemTemplate> <%# Eval("HoVaTen") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="a ch"> <ItemTemplate> <%# Eval("DiaChi") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="nh"> <ItemTemplate> <asp:Image runat="server" Width="100px" Height="100px" ImageUrl='<%# Eval("Photo") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> Bi 3: Hin th danh sch cn b dng chi tit. Thng tin c dn trang theo chiu dc (Flow).

Hng dn: To mt ct duy nht, nhng mi dng ca ct s cha tt c cc trng thng tin cn hin th. Vi mi hng c to ra, ta s t vo mt table c kch thc c nh, bng ny c 1 hng v 2 ct. Ct th nht s cha thng tin dng text nh h tn, a ch, in thoi v m t bn thn. Ct th hai s hin th hnh nh tng ng.

Kt qu

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 165

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


Minh ha:
<asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="None" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Trch ngang danh sch cn b"> <ItemTemplate> <table border="0px" width="300px"> <tr> <td style="width:200px;border-top:solid 1px"> <b> <%# Eval("HoVaTen") %> </b><br /> <%# Eval("DiaChi") %> <br /> <%# Eval("SoDienThoai") %> <br /> <%# Eval("BanThan") %> </td> <td style="width:100px"> <asp:Image runat="server" Width="100px" Height="100px" ImageUrl='<%#Eval("PhoTo") %>' /> </td>

Ct 1

Ct 2

</tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

Bi 3: Hin th danh sch ngi dng di dng Flow (tuyn tnh) nh bi 3, nhn c thm chc nng cp nht v Delete. THng tin hin th gm H tn, a ch, in thoi. Trong , trng a ch s hin th dng Text Multiline khi sa. Hng dn: To cc template nh bi 3, nhng thm 2 command l Edit v Delete. Trong cc trng mun sa cha s t vo cc Textbox v dng hm <%# Bind("Tn_Trng")%>. Minh ha:

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

166

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Kt qu.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DSCB_ImageField.aspx.cs" Inherits="Lession_20_DSCB_ImageField" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Cp nht danh sch cn b</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblCanBo" UpdateCommand="Update tblCanBo SET HoVaTen=@HoVaTen, DiaChi=@DiaChi, SoDienThoai=@SoDienThoai Where MaCanBo=@MaCanBo" DeleteCommand="Delete tblCanBo where MaCanBo=@MaCanBo"> </asp:SqlDataSource>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 167

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu


<asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="both" DataKeyNames="MaCanBo" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="H v tn"> <ItemTemplate> Phn template <b><%# Eval("HoVaTen") %></b> <br /> cho ch a ch: <%# Eval("DiaChi") %> <br /> thng in thoi: <%# Eval("SoDienThoai") %> (cha sa) </ItemTemplate> <EditItemTemplate> <b>H tn: </b><br /> <asp:TextBox runat="server" ID="txtHVT" Width="98%" Text= '<%# Bind("HoVaTen") %>' > </asp:TextBox> <br />

Phn template cho ch son tho (edit mode)

<b>a ch: </b><br /> <asp:TextBox runat="server" ID="txtDC" Width="98%" TextMode="MultiLine" Rows="5" Text='<%# Bind("DiaChi") %>'> </asp:TextBox> <br /> <b>in thoi: </b> <br /> <asp:TextBox runat="server" ID="txtDT" Width="98%" Text= '<%# Bind("SoDienThoai") %>'> </asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:CommandField HeaderText="Sa cha" EditText=" Sa" UpdateText="Lu" ButtonType="Link" CancelText=" Hy b" ShowEditButton="true" />

<asp:CommandField HeaderText="Xa" DeleteText=" Xa" ButtonType="Link" ShowDeleteButton="true" /> </Columns> </asp:GridView> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

168

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Bi 4: Hin th thng tin trch ngang v ngi dng trong bng tblUser, trong di mi ngi dng thm mt Hyperlink l "Xem chi tit" khi ngi dng click vo hyperlink ny th m trang UserDetail.aspx v hin th chi tit thng tin v ngi dng . Yu cu thm: Danh sch ny hin th lm 3 ct. Hng dn: hin th thng tin di dng ct, ta s dng iu khin DataList. Trong mi Hyperlink ta s to lin kt n trang UserDetail.aspx v truyn cho trang ny ID (trong trng hp ny l TenDangNhap) ca ngi dng tng ng. Da vo ID ny, trang UserDetail.aspx s c (dng Request.QueryString["TenNguoiDung"]) sau select thng tin ng vi ID v hin th. Minh ha:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataListControl.aspx.cs" Inherits="Lession_19_RepeaterControl" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Danh sch cn b</title> </head> <body> <form id="form1" runat="server"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>" SelectCommand="SELECT * FROM tblUser"> </asp:SqlDataSource> <asp:DataList runat="server" ID="DataList1" DataSourceID="SqlDataSource1" RepeatDirection="Horizontal" RepeatColumns="3" RepeatLayout="Table"> <ItemTemplate > <b> <%# Eval ("HoVaTen") %></b> <br /> Quyn hn : <%# Eval("QuyenHan") %> <br /> <asp:Image Width="100px" Height="100px" runat="server" ImageUrl= '<%# Eval("HinhAnh") %>' /><br />

<a href ='UserDetail.aspx?TenDangNhap=<%#Eval("TenDangNhap") >'>


Xem chi tit </a> <hr /> </ItemTemplate> </asp:DataList> </form> </body> </html>

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 169

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Kt qu. Bi 4: Hin th danh sch ngi dng di dng ct v thc hin phn trang. Hng dn: thc hin to cc ct, c th s dng iu khin DataList, ngoi ra ta cn mt iu khin khc cng rt mnh cho php hin th di dng cc ct nhng c thm kh nng phn trang, l: ListView controls. Cc bc thc hin: B1. To ngun d liu SqlDataSource nh nhng bi trc. B2. To mt ListView v gn vi ngun d liu SqlDataSource (nh bi trc) B3. Cu hnh cho ListView (chn smart tag), sau click chn "Config ListView"

B4: Chn cc thng s nh hnh bn di. B5: M trang web. Lu : Chng ta hon ton c th thay i format ca ListView bng cc vo Source code editor sa. Mt cch phn trang khc l to mt DataPager v gn vo ListView, Khi ta ch cn t thuc tnh PagedControlID="ListView1". Cch ny c u im l phn trang c th t
bt k v tr no trn mn hnh.

V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

170

Ti liu kha hc lp trnh web vi ASP.NET Bin son: Nguyn Minh Qu

Kt qu hin th V1.0 http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 171

You might also like