Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý M CL C BÀI S 1: M Đ U V ASP.NET....................................................................... 6 1.1. Gi i thi u tổng quan công ngh .NET ........................................................................ 6 1.1.1 Sự ra đ i c a .NET............................................................................................................6 1.1.2 .NET Framework là gì ......................................................................................................7 1.1.3 M t s u điểm chính c a .NET framework.....................................................................9 1.2. Gi i thi u ASP.NET................................................................................................. 10 1.3. Cài đặt Visual Studio.NET 2008 .............................................................................. 10 1.3.1 Các phiên b n .NET ........................................................................................................10 1.3.2 Cài đặt Visual Studio.NET 2008.....................................................................................10 1.4. Gi i thi u môi tr ng tích h p (IDE) c a ASP.NET................................................ 11 1.5. T o/l u/m /ch y ng d ng ASP.NET...................................................................... 13 1.5.1 T o m i ...........................................................................................................................13 1.5.2 L u ng d ng Web..........................................................................................................14 1.5.3 M (Ch y) ng d ng .......................................................................................................14 1.6. C b n về CSS và DHTML. ..................................................................................... 15 1.6.1 CSS..................................................................................................................................15 1.6.2 DHTML...........................................................................................................................15 1.7. Đ nh d ng các thẻ s d ng CSS................................................................................ 16 1.7.1 Đ nh d ng m c dòng (Inline) .......................................................................................16 1.7.2 Đ nh d ng b i b ch n ID ...............................................................................................16 1.7.3 Đ nh d ng b i b ch n thẻ (tag)......................................................................................16 1.7.4 Đ nh d ng b i l p (Class) ...............................................................................................17 1.7.5 V n đề tổ ch c l u tr .....................................................................................................19 1.8. Truy xu t thu c tính các thẻ HTML và CSS bằng JavaScript................................... 19 1.8.1 Truy xu t các thu c tính c a thẻ .....................................................................................19 1.8.2 Truy xu t các thu c tính CSS..........................................................................................20 BÀI S 2: TH C HÀNH ..................................................................................... 22 BÀI S 3: ASP.NET và Web form...................................................................... 32 3.1 Mô hình l p trình phía máy ch ................................................................................. 32 3.2 C chế x lý file ASP.NET phía máy ch . ................................................................ 34 3.3 M t s ví d minh h a............................................................................................... 36 3.3.1 Yêu c 3.3.2 Yêu c 3.3.3 Yêu c 3.3.4 Yêu c ux ux ux ux lý t i phía server thông qua Runat=”Server” ...............................................36 lý bên phía server thông qua cặp thẻ <% %>...............................................37 lý bên server thông qua Script......................................................................38 lý bên phía server bằng cách đặt trong Code file .........................................38 3.4 Webform trong ASP.NET ......................................................................................... 39 3.5 Tìm hiểu c u trúc trang ASP.NET............................................................................. 39 3.6 Code behind và viết code phía Server........................................................................ 42 3.7 HTML Server Controls và Web controls ................................................................... 43 3.7.1 Gi i thi u.........................................................................................................................43 3.7.2 Cách th c t o ph n t HTML Server Control và ASP.NET control...............................43 BÀI 4: TH C HÀNH ........................................................................................... 45 BÀI 5: Tìm hiểu và sử d ng các Server/Ajax Controls..................................... 53 5.1 HTML Server Controls.............................................................................................. 53 5.2 Web server Controls .................................................................................................. 53 5.2.1 Khai báo (t o các ph n t web server control)................................................................53 5.2.2 C chế x lý các ph n t web server control ..................................................................54 5.2.2 Thực thi các câu l nh t i phía server ...............................................................................59 V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 1 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 5.2.3 Mô hình x lý sự ki n trong ASP.NET ...........................................................................59 5.3 Ajax Control Toolkit..................................................................................................60 5.3.1 Gi i thi u.........................................................................................................................60 5.3.2 H ng d n s d ng m t s Ajax Control c b n ............................................................61 5.4 Th o lu n công ngh Ajax .........................................................................................62 BÀI 6: TH C HÀNH ........................................................................................... 63 BÀI 7: Tạo và sử d ng Custom Control ............................................................. 67 7.1 Gi i thi u User Custom Control ................................................................................67 7.2 Các b c t o User Custom control ............................................................................67 7.3 Thêm các thu c tính, ph ng th c và sự ki n vào UCC ............................................69 7.3.1 Thêm thu c tính vào UCC...............................................................................................69 7.3.2 Thêm ph ng th c vào UCC ..........................................................................................70 7.3.3 Thêm sự ki n vào UC.....................................................................................................71 7.4 Truy c p thu c tính, ph ng th c c a các ph n t con trong UCC............................71 7.5 Minh h a t o m t s điều khiển .................................................................................73 BÀI 8: TH C HÀNH ........................................................................................... 76 BÀI 9: Các đ i t ng trong ASP.NET................................................................ 83 9.1 Request Object...........................................................................................................83 9.1.1 Đ i t ng Request dùng để làm gì ? ...............................................................................83 9.1.2 Các thành ph n (thu c tính và ph ng th c) chính.........................................................83 9.1.3 Ví d s d ng ..................................................................................................................83 9.2 Response Object ........................................................................................................86 9.1.1 Đ i t ng Response dùng để làm gì ?.............................................................................86 9.1.2 Các thành ph n (thu c tính và ph ng th c) chính.........................................................86 9.1.3 Ví d s d ng ..................................................................................................................86 9.3 Server Object .............................................................................................................87 9.3.1 Đ i t ng Server dùng để làm gì ?..................................................................................87 9.3.2 Các thành ph n (thu c tính và ph ng th c) chính.........................................................87 9.3.3 Ví d s d ng ..................................................................................................................87 9.4 Session Object ...........................................................................................................87 9.4.1. Biến Sesstion .........................................................................................................87 9.4.2. Đối tượng Session .................................................................................................88 9.5 Application Object.....................................................................................................88 9.5.1 Đ i t ng Application dùng để làm gì ? .........................................................................88 9.5.2. Khái ni m biến toàn ng d ng .......................................................................................88 9.5.3. Đ i t ng Application....................................................................................................88 M t s bài t p tổng h p: ...................................................................................... 89 BÀI 10: TH C HÀNH ......................................................................................... 94 BÀI 11. Truy n d li u gi a các webpage,......................................................... 94 MasterPage và gỡ r i (Debug) ch ơng trình...................................................... 94 11.1 Truyền (Post) d li u gi a các trang bằng mã l nh C# ............................................94 11.2 Truy xu t đến các ph n t bằng ph ng th c FindControl ......................................94 11.3 Truy xu t đến trang g i thông qua thu c tính PreviousPage. ...................................94 11.4 MasterPage ..............................................................................................................94 11.5 G r i.......................................................................................................................97 11.5.1 Gi i thi u.......................................................................................................................97 11.5.2 Ch y ng d ng chế đ g r i .....................................................................................97 11.5.3 Khái ni m điểm d ng ....................................................................................................97 V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 2 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 11.5.4 Ch y t ng dòng l nh v i chế đ Step Into (F8) ............................................................97 11.5.5 Ch y t ng dòng l nh v i chế đ Step Over (Shift-F8)..................................................97 11.5.6 Ch y t ng dòng l nh v i chế đ Step Out (Ctrl-Shift-F8) ............................................97 11.2 S d ng Custom Error page..................................................................................... 97 11.3 Ghi các vết gây l i (Trace errors) ............................................................................ 97 11.4 S d ng công c g r i/ Menu Debug .................................................................... 97 11.5 Tracing l i m c trang/ M c toàn ng d ng .......................................................... 97 BÀI 12: TH C HÀNH ......................................................................................... 97 BÀI 13: CÔNG NGH ADO.NET ...................................................................... 98 13.1 Gi i thi u chung ...................................................................................................... 98 13.2 Kiến trúc c a ADO.NET ......................................................................................... 99 13.3 Các l p thao tác v i CSDL: Connection, Command,…......................................... 100 13.3.1 L p Connection...........................................................................................................100 13.3.2 L p Command.............................................................................................................102 13.3.3 L p DataReader ..........................................................................................................104 13.3.7 L p DataColumn.........................................................................................................106 13.3.8 L p DataTable.............................................................................................................106 13.3.9 L p DataRow ..............................................................................................................107 13.3.10 L p DataSet...............................................................................................................108 13.3.11 L p DataAdapter.......................................................................................................108 BÀI 14: TH C HÀNH ....................................................................................... 111 BÀI 15: Tìm hiểu và ứng d ng cơ ch Data Binding....................................... 118 15.1 Gi i thi u DataBinding.......................................................................................... 118 15.2 Data Binding ......................................................................................................... 118 15.2.1 D ng g n kết d li u đ n (Single DataBinding) .........................................................118 15.2.2 D ng g n kết d li u có sự lặp l i (Repeated Data Binding) ......................................119 15.3 Các điều khiển Data Source (Data source controls). .............................................. 121 15.3.1 Gi i thi u về DataSource controls ..............................................................................121 15.3.2 S d ng SqlDataSouce để ch n (Select) d li u.........................................................122 15.3.3 S d ng SqlDataSource để c p nh t d li u ...............................................................124 15.3.4 Xóa b n ghi trong CSDL bằng SqlDataSource ...........................................................127 BÀI 16: TH C HÀNH ....................................................................................... 129 BÀI 17: Làm vi c với GridView ........................................................................ 133 17.1 Gi i thi u tổng quan .............................................................................................. 133 17.2 Tìm hiểu l p GridView ......................................................................................... 133 17.2.1 Các thu c tính và c t thu c tính..................................................................................133 17.2.2 Các style áp d ng cho GridView.................................................................................134 17.2.3 Các sự ki n ..................................................................................................................135 17.2.4 Các ph ng th c .........................................................................................................136 17.3 Các tính năng h tr c a GridView ....................................................................... 137 17.3.1 Phân trang....................................................................................................................137 17.3.2 Tính năng tự đ ng s p xếp ..........................................................................................139 17.3.3 Các m u hiển th - Template .......................................................................................140 17.4 T o các c t tùy biến HyperLink, BoundColunm…................................................ 141 17.4.1 T o c t BoundField th công ......................................................................................141 17.4.2 T o m t c t hyperlink .................................................................................................141 17.5 T o và x lý các c t Select, Edit, Delete, Update… .............................................. 144 17.5.1 Thêm c t Select, Edit - Update, Delete .......................................................................144 17.5.2 C p nh t d li u ..........................................................................................................145 V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 3 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 17.5.3 Xóa d li u ..................................................................................................................146 BÀI 18: TH C HÀNH ....................................................................................... 148 BÀI 19: Sử d ng Templates ............................................................................... 155 19.1 Gi i thi u tổng quan ..............................................................................................155 19.2 Các điều khiển h tr Templates............................................................................155 19.2.1 M t s điều khiển h tr Template th ng dùng ........................................................155 19.2.2 Các lo i Template........................................................................................................155 19.3 Repeater control, DataList control, GridView control............................................156 19.3.1 T o template v i GridView. ........................................................................................156 19.3.2 T o template v i DataList ...........................................................................................160 19.3.3 T o Template v i Repeater (light-weight) ..................................................................161 20. Đóng gói website ..............................................................................................................162 BÀI 20: TH C HÀNH ....................................................................................... 163 V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 4 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý TRUNG TÂM H NG YÊN – APTECH Địa chỉ Điện thoại E-mail Website : : : : Tầng 2, Nhà A – Đại học SPKT Hưng Yên 0321-713.319; Fax: 0321-713.015 aptech@utehy.edu.vn; http://www.aptech.utehy.vn TÀI LI U KHÓA H C L P TRÌNH ASP.NET Biên soạn: - Nguyễn Minh Quý - Phạm Ngọc Hưng - Lê Quang Lợi H NG YÊN 7/2008 V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 5 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI S 1: M Đ U V ASP.NET M c tiêu: K t thúc bài h c, sinh viên có thể ¾ ¾ ¾ ¾ ¾ ¾ ¾ Nêu được các đặc điểm chính của công nghệ .NET Mô tả được các thành phần cơ bản bên trong .NET Framework Cài đặt và cấu hình hệ thống để chạy các trang ASP/ ASP.NET Sử dụng hệ thống IDE của VS 2008 để tạo, lưu và chạy ứng dụng web Nêu được các ưu điểm của web động - DHTML Định dạng trang web sử dụng CSS Truy xuất các thuộc tính của phần tử web thông qua CSS và Javascript N i dung 1.1. Giới thiệu tổng quan công nghệ .NET 1.1.1 S ra đ i của .NET Tr c đây và c ngày nay, trong lĩnh vực phát triển ph n mềm có r t nhiều (hàng ngàn th m chí hàng v n) ngôn ng lâp trình đ c s d ng để phát triển ph n mềm (nh Delphi, Ada, Cobol, Fortran, Basic, LISP, Prolog, Foxpro, Java, Pascal, C/C++, Visual Basic, VC++, C#...). M i ngôn ng đều có nh ng u và nh c điểm riêng, chẳng h n Fortran là lựa ch n s m t cho các tính toán khoa h c; Prolog là lựa ch n r t t t để phát triển các ph n mềm thông minh (AI, Expert Systems…); Java có l i thế phát triển các ng d ng m ng, ng d ng Mobile và đ c l p h điều hành (Write One – Run Everywhere); Visual Basic tỏ ra d h c và d phát triển các ng d ng Winform; C# v t tr i b i sự kết h p gi a s c m nh c a C++ và sự d dàng c a Visual Basic… Nh ng u điểm có tính đặc thù c a t ng ngôn ng là điều đã đ c khẳng đ nh. Tuy nhiên, điều mà ai cũng th y rõ là r t khó để có thể t n d ng đ c s c m nh c a t t c các ngôn ng l p trình trong m t dự án ph n mềm, chẳng h n không thể hoặc r t khó khăn để viết m t ng d ng có s d ng đ ng th i c ngôn ng Visual Basic và Java hay Foxpro v i Delphi v.v… Nói cách khác, vi c “liên thông” gi a các ngôn ng là g n nh không thể. Cũng do sự khác bi t gi a các ngôn ng l p trình mà vi c tiếp c n hay chuyển đổi sang ngôn ng l p trình m i sẽ t n r t nhiều th i gian (Tuy rằng về t t ng và nguyên lý có t ng tự nhau). Vì v y, khi các dự án s d ng ngôn ng l p trình khác nhau thì chi phí cho chuyển đổi/ h c hỏi sẽ là r t l n, gây lãng phí th i gian không c n thiết và ch t l ng ph n mềm ch c ch n không cao. Ngoài ra, cùng v i sự phát triển nh vũ bão c a Internet thì mô hình phát triển ng d ng cũng r t khác x a. Các ng d ng ngày nay không chỉ ch y riêng lẻ (stand-alone) trên máy tính PC mà còn có thể ch y trên môi tr ng m ng, cung c p hay truy c p các d ch v t xa ( ng d ng phân tán). Vai trò c a ph n mềm đã d n chuyển t ch cung c p các ch c năng (Funtional) c thể sang cung c p các d ch v (Services). T nh ng h n chế trong quá trình phát triển ph n mềm nh đã nêu, đòi hỏi ph i có m t cách tiếp c n sao cho t i u nh t, v a đ m b o t n ít chi phí chuyển đổi v a đ m b o nhiều ng i có thể tham gia cùng m t dự án mà không nh t thiết ph i viết trên cùng m t ngôn ng l p trình, đ ng th i ng d ng ph i ho t đ ng t t trong môi tr ng m ng Internet. Đó chính là lý do để Microsoft cho ra công ngh phát triển ph n mềm m i .NET! Microsoft .NET là m t nền t ng (Platform) phát triển ng d ng m i và hoàn chỉnh nh t t tr c t i nay. Sự ra đ i c a Microsoft.NET có tính cách m ng, nó đem đến cho các nhà l p trình m t phong cách phát triển ph n mềm đ t phá, kh c ph c h u hết các h n chế tr c V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 6 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý đây c a các ngôn ng l p trình. Vi c s d ng .NET không chỉ giúp phát triển các ng d ng đ n lẻ mà còn có thể phát triển các ng d ng phân tán qui mô r t l n; .NET làm gi m thiểu th i gian phát triển ng d ng, nâng cao rõ r t ch t l ng s n ph m ph n mềm. Phiên b n .NET đ u tiên (v 1.0) đ c Microsoft đ a ra th tr ng vào năm 2001. 1.1.2 .NET Framework là gì . Thông th ng, m i ngôn ng l p trình đều có m t t p các th vi n riêng, chẳng h n: VC++ thì có th vi n chính là msvcrt.dll; Visual Basic thì có msvbvm60.dll …Các th vi n này ch a các hàm, th t c c b n c a m i ngôn ng (ví d hàm, th t c x lý xâu, x lý toán h c,…). T t c nh ng th này có ý nghĩa logic gi ng nhau nh ng về cách s d ng hay cú pháp thì h u nh là khác nhau. Điều này khiến cho m t l p trình viên C++ không thể áp d ng nh ng kiến th c h biết sang VB hoặc ng c l i. H n n a, vi c phát triển b th vi n riêng cho m i ngôn ng nh v y là quá d th a. Ý t ng c a Microsoft đó là KHÔNG xây dựng m t t p th vi n riêng bi t cho t ng ngôn ng l p trình mà sẽ xây dựng m t b th vi n dùng CHUNG. T p th vi n dùng chung này hình thành nên m t b khung (Framework) để các l p trình viên viết ng d ng trên b khung sẵn có đó. B Khung này thực ch t là m t t p các th vi n đ c xây dựng sẵn, đáp ng m i nhu c u phát triển các ng d ng Desktop, Network, Mobile, web… Mô hình xây dựng phần mềm bằng ngôn ngữ truyền thống Các thành ph n và chức năng chính trong .NET Framework ƒ ƒ ƒ ƒ Common Language Runtime (Trình thực thi ngôn ng chung): Sau khi ng d ng đ c biên d ch ra file “Exe” (exe này khác v i file exe thông th ng. N i dung c a file exe này tuân theo m t chu n/ngôn ng chung, dù là viết bằng C# hay VB.NET. Ngôn ng này g i là ngôn ng chung), tiếp theo để file exe trung gian này có thể ch y đ c trên máy hi n hành thì c n ph i đ c biên d ch ra mã máy t ng ng. Vi c biên d ch và ch y đ c là nh Ch ng trình thực thi ngôn ng chung – CLR (Common Language Runtime). Base Class Library: Là t p các th vi n ch a các l p c b n để s d ng trong t t c các ngôn ng .NET. Ví d các l p x lý xâu, x lý toán h c… ADO.NET: Là t p các th vi n chuyên dành cho thao tác v i C s d li u. ASP.NET: Các th vi n dành cho phát triển các ng d ng Web (webform). V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 7 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ƒ ƒ ƒ Windows Forms: Các th vi n dành cho phát triển các ng d ng Windows (winform). Common Language Specification: Ph n này có nhi m v đặc t ngôn ng chung để các ch ng trình viết trên các ngôn ng l p trình khác nhau ph i tuân theo. Nói cách khác, biên d ch các ch ng trình viết trên các ngôn ng l p trình khác nhau về m t ngôn ng th ng nh t chung (Common Language). Nh điều này mà Các ngôn ngữ lập trình. Kiến trúc của .NET Framework Mô hình biên dịch và thực thi chương trình của ứng dụng .NET (1) V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 8 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Mô hình biên dịch và thực thi chương trình của ứng dụng .NET (2) Một cái nhìn khác về mô hình biên dịch và thực thi ứng dụng 1.1.3 Một s ưu điểm chính của .NET framework ƒ ƒ ƒ ƒ T t c các ngôn ng đều th a h ng m t th vi n th ng nh t. Khi s a ch a hay nâng c p th vi n này thì chỉ ph i thực hi n m t l n. Phong cách phát triển ng d ng nh t quán và t ng tự nhau gi a các ngôn ng l p trình. Có thể chuyển đổi sang ngôn ng l p trình .NET khác nhau m t cách d dàng. Viết các ng d ng webform không khác nhiều so v i ng d ng winform. Cung c p m t t p th vi n truy xu t CSDL th ng nh t (ADO.NET) cho m i ngôn ng .NET. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 9 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ƒ ƒ ƒ ƒ ƒ H tr c chế “Write one – Run everywhere” (Viết m t l n ch y m i n i). M t ng d ng viết bằng .NET có thể ch y trên b t c h điều hành nào mà không c n ph i s a l i code, mi n là máy đó có cài .NET framework. Cung c p h th ng kiểu chung (Common Type), do v y đ m b o tính th ng nh t về kiểu d li u gi a các ngôn ng l p trình. Cho phép s d ng nhiều ngôn ng l p trình trong cùng m t dự án. Kết th a và s d ng chéo gi a các ngôn ng l p trình d dàng nh trên cùng m t ngôn ng (Có thể viết m t class trên C#, sau đó kế th a trong VB.NET và ng c l i). Vi c triển khai (Deploy) các ng d ng d dàng. Chỉ c n Copy-and-run (copy là ch y). Không c n cài đặt và tránh đ c “đ a ng c DLL” nh tr c đây. 1.2. Giới thiệu ASP.NET ASP.NET là công ngh phát triển các ng d ng trên nền web, thế h kế tiếp c a ASP (Active Server Page – Trang web đ c x lý bên phía máy ch ). ASP.NET là m t thành ph n n i t i (có sẵn) c a .NET Framework. Vì v y nó t n d ng đ c s c m nh c a .NET Framework. ASP.NET có m t s u điểm chính: ƒ Có thể s d ng để phát triển các ng d ng web đ m i kích c , t ng d ng nhỏ nh t cho đến ng d ng toàn doanh nghi p (Enterprise). ƒ ng d ng viết bằng ASP.NET d dàng t ng thích v i nhiều lo i trình duy t khác nhau. Nhà phát triển không c n ph i quan tâm nhiều đến trình duy t nào đ c s d ng để duy t website, điều này sẽ đ c framework tự render ra mã t ng ng. ƒ Khi s d ng b IDE c a Visual Studio, cách th c l p trình sẽ gi ng h t nh l p trình winform. ƒ Truy xu t d li u bằng công ngh ADO.NET có sẵn c a .NET Framework. ƒ Ch y ng d ng cực nhanh b i c chế biên d ch và Cached. ƒ Có thể tăng t c ng d ng bằng cách Cache các điều khiển, các trang. ƒ B o m t v t tr i. ƒ T n ít dòng l nh h n so v i ASP/PHP/Perl khi thực hi n cùng m t công vi c. ƒ D dàng b o trì và d đ c h n b i Code và Giao di n đ c tách bi t. Điều này cũng giúp cho tính chuyên bi t hóa cao h n. (M t ng i chỉ lo code ph n x lý nghi p v , ng i khác thì chỉ lo code ph n giao di n v.v…). ƒ ASP s d ng ngôn ng l p trình VB.NET hoặc C# hoặc c hai để phát triển ng d ng. 1.3. Cài đặt Visual Studio.NET 2008 1.3.1 Các phiên bản .NET Cho đến th i điểm này (2008), Visual studio .NET đã có các phiên b n: ƒ Visual Studio 2003, .NET Framework 1.1 ƒ Visual Studio 2005, .NET Framework 2.0 ƒ Visual Studio 2008, .NET Framework 3.5 1.3.2 Cài đặt Visual Studio.NET 2008 B Visual Studio.NET 2008 đ c đóng gói trong m t đĩa DVD (t Trong đó bao g m c b MSDN. Kích th c kho ng 4.5 GB. ng đ ng 8 đĩa CD). V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 10 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Vi c cài đặt vô cùng d dàng, chỉ vi c ch y file Setup sau đó ch n các mặc đ nh khi đ c hỏi. Tuy nhiên, để tiết ki m không gian đĩa thì chỉ nên ch n các s n ph m c n thiết để cài đặt. 1.4. Giới thiệu môi trường tích hợp (IDE) của ASP.NET. M t điều th t tuy t v i là Visual Studio s d ng m t trình IDE chung cho toàn b ngôn ng l p trình (ASP.NET, VB.NET, C#,…). Điều này đ m b o tính nh t quán cho các ngôn ng trên nền .NET, giúp b n chỉ c n “H c m t l n nh ng áp d ng m i n i”. Cửa sổ giao diện chính của môi trường phát triển tích hợp. Trong đó: - Tab Design để hiển th trang web trang web trực quan. chế đ Design, t c là cho phép s a ch a n i dung Mở trang ở chế độ Design V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 11 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - Tab Source: M trang chế đ mã ngu n HTML. T i đây ng trực tiếp các thẻ HTML. i dùng có thể so n th o Mở trang ở chế độ Source - Tab Split: Cho phép xem trang web đ ng th i c hai chế đ . Mở trang ở chế độ kết hợp, vừa xem code HTML vừa xem Design. Mở cửa sổ soạn Code (C#, VB.NET *** Ngoài thao tác trực tiếp thông qua h th ng menu, nút l nh, ng i dùng còn có thể s d ng tổ h p các phím t t. (M menu bar và xem tổ h p phím t t bên c nh). Ví d : Shift+F7 để xem chế đ Design, F7 xem chế đ Code, F4 Focus t i Properties…. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 12 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Giao diện của hệ thống IDE. 1.5. Tạo/lưu/mở/chạy ứng dụng ASP.NET 1.5.1 Tạo mới Có thể vào menu File Æ New Website hoặc biểu t ng trên thanh công c . V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 13 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 1.5.2 Lưu ứng dụng Web - Nh n Ctrl-S để l u trang hi n t i - Nh n Ctrl-Shift-S để l u toàn b các trang. 1.5.3 M (Chạy) ứng dụng a) Mở ứng dụng web. ƒ Nh n tổ h p phím Alt-Shift-O ƒ Vào Menhu File, ch n : Open Web Site Có thể m ng d ng web theo m t trong các cách nh sau: Mở ứng dụng web từ nhiều nguồn. b) Chạy ứng dụng web Đ i v i ASP.NET, toàn b ng d ng web có thể đ c biên d ch thành file nh phân để ch y nhanh h n. Tuy nhiên ASP.NET cũng cho phép ng i dùng ch y t ng trang riêng bi t. ƒ ƒ ƒ Nh n F5 (Hoặc biểu t ng Debug trên trình duy t. trên thanh công c ) để ch y ng d ng và cho phép Nh n Ctrl-F5 để ch y ng d ng nh ng không cho Debug trên trình duy t. Trong tr ng h p mu n ch y ch có thể nh n F8, Shift-F8. ng trình và g r i m c dòng l nh/ th t c thì V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 14 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Ng i dùng có thể ch y (Browse) trang web b t kỳ bằng cách ch n, sau đó click chu t ph i và ch n m c View In Browser (Hoặc nh n tổ h p phím CtrlShift-W). Trong tr ng h p có nhiều trình duy t trong máy thì có thể ch n trình duy t mặc đ nh khi View In Browser bằng cách click chu t ph i lên trang và ch n Browse With nh hình bên. Chọn trình duyệt mặc định 1.6. Cơ bản về CSS và DHTML. 1.6.1 CSS Đ i v i các trang HTML tr c đây, vi c đ nh d ng (format) các ph n t th ng đ c đặt theo cú pháp d ng, <Lo i_ph n_t Thu c_Tính1=Giá_Tr 1 Thu c_Tính2=Giá_Tr 2...>. Đây là cách đ nh d ng có khá nhiều h n chế, r t khó đ c code cũng nh khó b o trì. Đặc bi t khi xét đến góc đ l p trình. Để kh c ph c đ c nh ng h n chế này, hi n nay ng i ta đề xu t ra m t qui t c đ nh d ng m i, đó là s d ng CSS (Cascading Style Sheet – b ng đ nh kiểu). CSS thực ch t là m t t p các qui t c để format/ đ nh kiểu (style) cho các ph n t đ c hiển th và đ nh v trên trang web. Nh vào CSS mà vi c đ nh d ng (kiểu) cho các ph n t tr nên d dàng và linh ho t h n r t nhiều. Theo qui t c đ nh d ng c a CSS thì các thu c tính c a m t ph n t nào đó sẽ đ c thiết l p theo cách nh t quán, d ng: Thuộc_Tính: Giá_Trị; Thuộc_Tính:Giá_Trị; …..Danh sách đ y đ các thu c tính này có thể tra c u d dàng trên Internet hoặc chính trình so n th o VS 2008 sẽ tự li t kê trong khi chúng ta so n code. 1.6.2 DHTML Dynamic HTML (DHTML) là kh năng c a các trang web có thể thay đổi n i dung hiển th và đ nh v đ ng c a các ph n t . V i các trang web tĩnh (Static web) thì khi n i dung trang web đ c hiển th lên trên trình duy t thì ng i dùng không có kh năng s a đổi n i dung cũng nh thay đổi v trí c a các ph n t HTML. Còn đ i v i nh ng trang web có s d ng JavaScript và CSS thì kể c khi trang web đã hiển th r i thì v n có kh năng thay đổi n i dung (thêm, s a, xóa, thay đổi đ nh d ng, v trí các ph n t …). Trang web nh thế đ c g i là trang web đ ng (phía client). Chú ý rằng, trang web đ ng này khác v i trang web đ ng (phía server) mà ph n sau chúng ta sẽ đề c p các ph n sau c a tài li u này. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 15 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 1.7. Định dạng các thẻ sử dụng CSS 1.7.1 Định dạng mức dòng (Inline) Đ nh d ng m c dòng t c là vi c đ nh d ng các ph n t theo kiểu CSS ngay trong đ nh nghĩa ph n t . Cú pháp chung nh sau: <Lo i_PT Style = “tt1:gt1; tt2:gt2; …; ttn: gtn” ….> trong đó: tt = thu c tính; gt = giá tr Ví d : Đ nh d ng cho textbox d i đây có nền xanh, ch tr ng và viền đỏ. <input style="border-color:Red; background-color:Blue; color:White" /> 1.7.2 Định dạng b i bộ chọn ID Khi mu n cho m t lo t các ph n t có cùng thu c tính ID gi ng nhau đ sau thì ng i ta đ nh nghĩa m t b ch n ID. Cú pháp có d ng: c đ nh d ng nh <style Type = “text/css”> #Tên { Tên_Thu c_tính: Giá_Tr ; Tên_Thu c_tính: Giá_Tr ; Tên_Thu c_tính: Giá_Tr ; …………… } </style> Ví dụ: - Đ nh nghĩa b ch n tên là “Chuong” (Ch ng), có màu đỏ, c ch 20 và đ m. #Chuong { color:Red; font-size:20pt; font-weight:bold; } - Áp dụng: < P id = “Chuong”> Đây là màu đỏ, c ch 20pt và đ m </P> < H1 id = “Chuong”> Đây cũng là màu đỏ, c ch 20pt và đ m </H1> <H1 id=”xyz”> Đây thì không ph i màu đỏ, vì có thu c tính ID ≠ “Chuong”</H1>. 1.7.3 Định dạng b i bộ chọn thẻ (tag) Khi mu n cho m t lo t các ph n t cùng lo i có đ nh d ng gi ng nhau mà không c n ID gi ng nhau thì ng i đ nh nghĩa CSS kiểu b ch n: Cú pháp: <style Type = “text/css”> Tên_Loại_Thẻ { Tên_Thu c_tính: Giá_Tr ; Tên_Thu c_tính: Giá_Tr ; Tên_Thu c_tính: Giá_Tr ; …………… } </style> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 16 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Ví d đ y đ về B ch n ID Ví d về đ nh nghĩa b ch n thẻ 1.7.4 Định dạng b i lớp (Class) Còn m t cách đ nh nghĩa khác hay dùng nh t và linh ho t nh t đó là cách đ nh nghĩa l p, ý t ng ch đ o là: Ta đ nh nghĩa sẵn m t l p ch a các đ nh d ng và khi mu n áp d ng đ nh d ng đó cho ph n t nào nó thì chỉ vi c gán l p này cho ph n t . V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 17 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Cú pháp đ nh nghĩa l p nh sau: <style type="text/css"> .<Tên_L p> { Tên_Thu c_Tính: Giá_trị; Tên_Thu c_Tính: Giá_trị; Tên_Thu c_Tính: Giá_trị; ………………………… } </style> Ví d : Đ nh nghĩa 2 l p là NenXanh_ChuTrang và l p Lien_Ket. <style type="text/css"> .NenXanh_ChuTrang { color: White; background-color:blue; } .Lien_Ket { cursor:hand; color:Blue; } </style> Ví dụ sử dụng: Ví d đ y đ và kết qu . V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 18 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 1.7.5 V n đ tổ chức lưu tr . Các đ nh nghĩa về CSS có thể đ c đặt ngay trong t p ngu n nh ng cũng có thể đ c đặt riêng ra m t t p khác. T p này th ng có đuôi m r ng là style. N i dung c a t p chỉ ch a các đ nh nghĩa CSS (G m đ nh nghĩa b ch n ID, b ch n thẻ và l p). Ví d về m t t p CSS và cách tham chiếu (s d ng) t p đó. Sử d ng N i dung t p CSS và cách s d ng t p CSS trong file ngu n. 1.8. Truy xuất thuộc tính các thẻ HTML và CSS bằng JavaScript 1.8.1 Truy xu t các thuộc tính của thẻ Nhìn chung, các trình duy t đều tổ ch c l u tr các đ i t ng theo c u trúc phân c p, trong đó đ i t ng window là đ i t ng l n nh t, nó bao g m các đ i t ng con là Location, history, screen, event…. Có thể th y rõ h n sự phân c p này trong hình vẽ sau đây. T mô hình các đ i t ng này, ta có thể d dàng biết cách truy xu t t i các ph n t mong mu n. M t s cách khác dùng để truy xu t t i các ph n t trong trang web đó là s d ng các ph ng th c document.GetElementById(“ID_C a_Ph n_T ”) (ID đặt trong cặp d u “ ”), document.GetElementsByName(Tên_Ph n_t ) hay document.all.<ID c a ph n t > Ví dụ: - Để truy xu t đến ph n t có ID=”txtHoVaTen”, có thể viết: document.GetElementById(“txtHoVaTen”) hoặc document.all.txtHoVaTen - Để truy xu t đến thu c tính value c a ph n t có thu c tính id = “txtHoVaTen”, ta viết: document.GetElementById(“txtHoVaTen”).value hoặc document.all.txtHoVaTen.value. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 19 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - Để l y t t c các ph n t có cùng giá tr name = “chkMatHang”, ta viết: document.getElementsByName("chkMatHang"), l nh này sẽ tr về m t m ng các ph n t có giá tr là chkMatHang. - Để l y t t c các thẻ là input, ta viết: document.getElementsByTagName("input"), l nh này cũng tr về cho ta m t m ng các ph n t . ** Chú ý: Khi kết qu tr về là m t m ng thì có thể duy t bằng vòng lặp, 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ị của text box " + i + " là : " + KetQua[i].value); } </script> </form> </body> </html> 1.8.2 Truy xu t các thuộc tính CSS Trong quá trình ho t đ ng c a website, có thể có nh ng lúc ta c n ph i s a đổi giá tr thu c tính CSS nào đó c a m t ph n t , khi đó ta c n ph i truy c p đến thu c tính này. Cú pháp truy c p nh sau: ™ window.<gía tr ID>.style.<thu c_Tính> hoặc ™ <giá tr của thẻ>.style.<thu c_Tính> hoặc ™ window.<Giá tr Name>.style.<thu c_Tính> hoặc ™ <Giá tr Name của thẻ>.style.<thu c_Tính> 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à m t thông báo có ch tr ng và nền ...." /> <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 S u t m b i: www.daihoc.com.vn 20 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý txtThongBao.style.color="yellow"; // Hoặc txtTB.style.color="yellow"; // Hoặc window.txtThongBao.style.color="yellow"; // Hoặc window.txtTB.style.color="yellow"; } </script> </body> </html> *** Chú ý: Trong các ng d ng web ngày nay, thu c tính name ít đ c dùng và thu c tính id đ c s d ng phổ biến h n. Vì v y, để đ nh danh cho các ph n t trong trang web, chúng ta nên s d ng thu c tính id thay vì name (tr nh ng ngo i l ). V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 21 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI S 2: TH C HÀNH M c tiêu: Kết thúc bài thực này, ng i h c có thể ƒ T o và đ nh d ng các thẻ HTML bằng CSS ƒ Truy xu t các đ i t ng trình duy t và các ph n t HTML bằng JavaScript. ƒ T o trang web đăng ký có x lý tính h p l c a d li u nh p vào. N i dung: Đ nh d ng các ph n t bằng CSS và s d ng JavaScript để kiểm tra d li u ™ T o m t trang web trong VS 2008 ph c v vi c nh p thông tin về cán b ™ Trang web này đ c t o trên IIS C c b . ™ S d ng các style để đ nh nghĩa cho các ph n t . ™ S d ng JavaScript để kiểm tra tính h p l c a d li u. Yêu c u: . Đặc tả giao diện, chức năng và các ràng buộc: 1. Giao di n (Trang bên) 2. Đặc tả xử lý thì thực hi n g i toàn b n i dung đang - Khi ng i dùng nh n vào nút nh p c a trang hi n hành sang trang CapNhatCanBo.aspx. - Khi ng i dùng nh n vào nút reset tr về giá tr mặc đ nh (nh trong hình). 3. - - thì n i dung trong các ô nh p đ c Đặc tả ràng bu c H và tên không đ c r ng và ph i <= 40 ký tự. Ngày, tháng năm ph i h p l . Các tr ng đánh d u * là b t bu c ph i có. Các tr ng s (nh ngày sinh, h s l ng,…) ph i là các s , không đ c là ký tự. Các h p Textarea không đ c quá 1000 ký tự. các h p text, khi ng i dùng click chu t (focus) thì giá tr mặc đ nh sẽ b xóa để cho ng i dùng gõ giá tr m i. Nếu ng i dùng di chuyển sang ph n t khác mà không nh p giá tr nào thì đặt l i giá tr mặc đ nh nh ban đ u. Khi tr ng nào nh p sai thì sẽ đặt focus vào đúng tr ng sai đó. 4. M t s ki n thức c n thi t và g i ý: - Đ nh nghĩa style cho các m c gi ng nhau Đặt thu c tính Action cho form để chuyển thông tin cho trang b t kỳ Dùng hàm isNaN (n) để kiểm tra xem n có ph i là s hay không. Dùng ph ng th c focus c a ph n t để đặt tiêu điểm. T o các ph n t kiểu submit và kiểu reset cho nút C p nh p và nh p mới. Viết m t hàm kiểm tra cho sự ki n Onclick c a nút C p nh t. Nếu không mu n cho m t sự ki n nào đó (ví d onclick) kích ho t thì viết trong sự ki n đó là “return false” hoặc return KQ; v i KQ là m t biểu th c, hàm có giá tr false V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 22 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 23 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý H ớng d n: 1. Đ nh nghĩa style: Khi thiết kế giao di n cho trang web, tr c hết c n xác đ nh xem có nh ng ph n t nào cùng m t đ nh d ng (style). Khi đó ta nên đ nh ra m t class ch a các đ nh d ng mong mu n để áp d ng cho các ph n t cùng lo i này. Lession02.css .HeadTitle { font-size: xx-large; font-weight: bold; text-align: center; color:Purple; margin-bottom:30px; } .CellSpace { border-spacing:1px; } .Tiêu_Đề_Chính { color:White; background-color:Purple; font-size:12pt; font-weight:bold; margin:5px 0px 5px 0px; height:25px; } .C t1 { color:Gray; font-style:italic; text-align:right; width:30%; } .C t2 { width:70%; text-align:left; } .TextboxDài { width:99%; text-align:left; } V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 24 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 di n 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>Nh p h s cán 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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"> CH NG TRÌNH QU N LÝ CÁN B VERSION 1.0 </p><br /> <br /> <p class="HeadTitle">NH P H S CÁN B </p> <table class="Table"> <tr class="CellSpace"> <td colspan="2" class="Tiêu_Đề_Chính">THÔNG TIN CÁ NHÂN</td> </tr> <tr> <td class="C t1">*H và tên</td> <td class="C t2"><input type="text" id="HoVaTen" class="TextboxDài" /> </td> </tr> <tr> <td class="C t1">*Ngày sinh (ngày/tháng/năm)</td> <td class="C t2"> <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> Gi i tính: <input type="radio" id="optNam" checked="checked" /> Nam V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 26 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <input type="radio" id="optNu"/>N </td> </tr> <tr> <td class="C t1">Chức v hi n t i (Đ ng, chính quyền,...)</td> <td><input type="text" class="TextboxDài" /></td> </tr> <tr> <td class="C t1">*Quê quán</td> <td class="C t2"> <input type="text" class="TextboxDài"/></td> </tr> <tr> <td class="C t1">*N i hi n nay</td> <td class="C t2"> <input type="text" class="TextboxDài"/></td> </tr> <tr> <td colspan="2" class="Tiêu_Đề_Chính">TRÌNH Đ </tr> <tr> <td class="C <td class="C </td> </tr> <tr> <td class="C <td class="C </tr> <tr> <td class="C <td class="C </tr> H C V N</td> t1"> Dân t c : </td> t2"><input type="text" /> Tôn giáo: <input type="text" /> t1">Thành ph n gia đình:</td> t2"> <input type="text" class="TextboxDài"/></td> t1">Nghề tr c khi tuyển d ng</td> t2"><input type="text" class="TextboxDài" /></td> <tr> <td class="C t1">Tham gia cách m ng: </td> <td class="C t2"> Ngày <input value="..../...../......" style="width:15%; text-align:center" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);" /> Tổ chức <input style="width:20%" /> Công tác <input style="width:20%" /> </td> </tr> <tr> <td class="C t1">Ngày vào Đ ng: </td> <td class="C t2"><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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ngày vào chính thức <input type="text" class="NgayThang" value="...../...../....." onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> </td> </tr> <tr> <td class="C t1">Ngày nh p ngũ:</td> <td class="C t2"><input type="text" value="..../...../...." class="NgayThang" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> ngày xu t ngũ <input type="text" class="NgayThang" value="..../...../....." onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> </td> </tr> <tr> <td class="C <td class="C H c hàm: <select> <option <option <option </select> H c vị : <select> <option <option <option </select> </td> </tr> t1">*Trình đ Văn hóa: </td> t2"><input style="width:15%" /> value="">-----</option> value="Th c Sĩ">Th c sĩ </option> value="Tiến Sĩ">Tiến sĩ</option> value="">-----</option> value="Giáo s ">Giáo s </option> value="Phó giáo s ">Phó giáo s </option> <tr> <td class="C t1">Lý lu n chính trị </td> <td class="C t2"> <select> <option>-----</option> <option value = "S c p">S c p</option> <option value="Trung c p">Trung c p</option> <option value="Cao c p">Cao c p</option> <option value="C nhân">C nhân</option> </select> </td> </tr> <tr> <td class="C t1">Trình đ ngo i ng </td> <td class="C t2"> 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 S u t m b i: www.daihoc.com.vn 28 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </select> Nga <select> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> Pháp <select> <option>-----</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <td class="C t1">*Ng ch công chức, viên chức:</td> <td class="C t2"> <input style="width:20%" /> Mã s : <input style="width:15%" /> *H s l ng: <input style="width:15%" /> </td> </tr> <tr> <td class="C t1">Danh hi u đ c phong (năm): </td> <td class="C t2"><input class="TextboxDài" /></td> </tr> <tr> <td class="C t1">S tr ng công tác:</td> <td class="C t2"><input class="TextboxDài" /></td> </tr> <tr> <td class="C t1">Khen th ng (huân,huy ch ng cao nh t)</td> <td class="C t2"><input class="TextboxDài" /></td> </tr> <tr> <td class="C t1">Kỷ lu t (đ ng, chính quyền, năm, lý do, hình thức)</td> <td class="C t2"> <textarea class="TextboxDài" cols="50" rows="3"></textarea> </td> </tr> <tr class="Tiêu_Đề_Chính"> <td colspan="2"> ĐÀO T O, B I D NG CHUYÊN MÔN, NGHI P V , LÝ LU N, NGO I NG </td> </tr> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 29 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <tr> <td class="C t1">Ghi rõ Tên tr ng, ngành h c, th i gian, lo i hình,văn bằng, chứng chỉ</td> <td><textarea class="TextboxDài" cols="100" rows="5"></textarea> </td> </tr> <tr> <td colspan="2" style="color:Blue"> ** Lo i hình: Chính qui, t i chức, chuyên tu, b i d ng; văn bằng: Tiến sĩ, th c sĩ, c nhân, kỹ s . </td> </tr> <tr class="Tiêu_Đề_Chính"> <td colspan="2">TÓM T T QUÁ TRÌNH CÔNG TÁC</td> </tr> <tr> <td class="C t1">Ghi rõ th i gian b t đ u và kết thúc; chức danh, chức v , đ n vị công tác t ng ứng)</td> <td><textarea class="TextboxDài" cols="100" rows="5"></textarea></td> </tr> <tr class="Tiêu_Đề_Chính"> <td colspan="2">Đặc điểm lịch s b n thân</td> </tr> <tr> <td class="C t1">Đặc điểm lịch s b n thân</td> <td class="C t2"> <textarea class="TextboxDài" cols="100" rows="5"></textarea> </td> </tr> <tr> <td class="C t1">Quan h v i ng i n c ngoài</td> <td class="C t2"> <textarea class="TextboxDài" cols="100" rows="5"></textarea> </td> </tr> <tr> <td class="C t1">Quan h gia đình (B , mẹ, anh chị em ru t)</td> <td class="C t2"> <textarea class="TextboxDài" cols="100" rows="5"></textarea> </td> </tr> <tr> <td class="C t1">Hoàn c nh kinh tế gia đình</td> <td class="C t2"> <textarea class="TextboxDài" cols="100" rows="5"></textarea> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 30 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </td> </tr> </table> <br /> <table class="Table" style="border:0"> <tr> <td style="text-align:right"><input type="submit" value=" C p nh t " onclick="return KiemTra();" /></td> <td style="text-align:left"><input type="reset" value=" Nh p m i “ /></td> </tr> </table> </div> </form> <script language="javascript" type="text/javascript"> var Giá_Trị_Cũ; /// Hàm x lý khi ng i dùng b m vào nút Nhập function KiemTra() { if (form1.HoVaTen.value.length==0) { alert("H tên ph i khác r ng !"); form1.HoVaTen.focus(); return false; } if( isNaN(form1.NgaySinh.value)==false) { alert("Ngày sinh ph i là s "); form1.NgaySinh.focus(); return false; } return true; } /// Hàm x lý khi ph n t nh n đ function XuLyFocus(txt) { Giá_Trị_Cũ=txt.value; txt.value=""; } c focus /// Hàm x lý khi ph n t m t 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI S 3: ASP.NET và Web form 3.1 Mô hình lập trình phía máy chủ Trong thế gi i web, t t c các giao tiếp gi a Client (trình duy t) và Server (web server) đều đ c thực hi n theo c chế “Request and Response”. T c là, tr c tiên phía máy khách c n ph i “requesst” (g i yêu c u) t i Server, sau đó phía server sẽ “response” (h i đáp) l i yêu c u. Cùng m t c chế này, ng khách: i ta có 2 cách tiếp c n để x lý “request trang web” t máy Cách 1: Khi máy khách yêu c u m t trang – ví d trang abc. – thì máy ch sẽ đ c toàn b n i dung c a trang và g i về cho phía máy khách mà không thực hi n b t kỳ x lý nào. Nó hoàn toàn không qua tâm đến ý nghĩa bên trong c a trang abc. N i dung trang này sau đó sẽ đ c phía trình duy t x lý. Cách 2: Khi máy khách yêu c u m t trang – ví d trang xyz. – thì máy ch sẽ đ c toàn b n i dung c a trang đó và xử lý tại Server (tr c khi g i về cho client) để đ c k t quả, tiếp theo l y kết qu x lý đ c g i về cho phía máy khách. Kết qu tr về cho máy khách có thể ch a các ph n t HTML, các câu l nh JavaScript, các đ nh nghĩa kiểu CSS….và tiếp t c đ c phía client (trình duy t) x lý nh cách 1. V i cách 1, do vi c x lý không di n ra bên phía server nên trang web không thể đ c/ ghi các d li u trên Server đ c (ví d Danh sách khách hàng, danh m c s n ph m,….). Vì v y nó chỉ phù h p v i các trang web đ n gi n, không đòi hỏi x lý chi tiết. V i cách 2, do vi c x lý thông tin t i server nên hoàn toàn có thể đ c/ ghi d li u trên chính server đó. Vì v y, nó phù h p v i các dự án l n và tính b o m t cao. Mô hình theo cách này g i là mô hình l p trình phía máy ch . D i đây là hình nh minh h a cho 2 mô hình này: ™ Mô hình l p trình phía máy khách (Client side) V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 32 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ™ Mô hình l p trình phía máy ch Câu hỏi: Khi nào thì m t trang sẽ đ c x lý bên Server tr nào thì đ c g i là x lý theo mô hình phía server? c ?. hay nói cách khác là khi Tr l i: Các trang (file) có đuôi m r ng mà server có thể x lý, ví d : asp, php, jsp, aspx… Câu hỏi: Có thể l y m t ví d về m t trang sẽ đ đ c x lý phía server ? c x lý phía server và trang sẽ không Trang Trang1.htm Trang2.aspx <html> <body> Hello world </body> </html> <%@ Page Language="C#" %> 2 dòng này sẽ đ c xử lý bên phía server tr ớ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()); %> </div> </form> </body> </html> Câu hỏi: Ch ng trình Client và server có nh t thiết ph i nằm trên hai máy tính riêng bi t không ? và Client là các trình duy t r i (IE, FireFox…), còn server là ch ng trình nào ? Tr l i: Hai ch ng trình này hoàn toàn có thể nằm trên cùng m t máy tính. Ch server thực ch t là m t ch ng trình có tên là IIS (Internet Information Service). ng trình V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 33 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Câu hỏi: Ph i viết nh thế nào để server hiểu là c n ph i x lý bên phía server tr về cho phía Client ? c khi g i Tr l i: Tr c tiên ph i đặt ph n m r ng cho file (ví d .aspx), sau đó trong trình duy t c n ph i đặt nh ng n i dung mu n x lý bên phía server trong cặp thẻ đặc bi t, ví d : <% Response.Write (DateTime.Today.Date.ToString ()); %> Hoặc: <form id="form1" runat="server"> <asp:Calendar runat="server" ID="Lịch"> </asp:Calendar> </form> *** Chính các ký hi u <% %> và Runat = “Server” đã “mách b o” Server là : “Hãy x lý n i dung đó bên phía server đi”!. Nếu không có nh ng ký hi u này thì mặc nhiên server làm m i vi c là g i tr l i cho trình duy t x lý. Câu hỏi: Sao không g i ngay cho trình duy t x lý nh tr c đây mà c ph i để server x lý …!. Để Client x lý sẽ gi m t i cho server, điều này chẳng t t h n sao ? Tr l i: Vì trình duy t chỉ có thể hiểu và x lý đ c các thẻ HTML và Javascript thôi, còn nó không thể x lý đ c các n i dung ph c t p. Ví d nó không hiểu asp:Calendar là gì ? 3.2 Cơ chế xử lý file ASP.NET phía máy chủ. Đ i v i các trang ASP.NET, thì c chế x lý gi ng nh đã mô t trên, t c là theo mô hình x lý bên phía server. Nh ng có bổ sung thêm tính năng Compile and Cache: Gi i thích c chế x lý trên: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 34 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - - B c 0: Ng i l p trình ph i t o các trang ASPX (gi s tên trang đó là abc.aspx) và đặt nó vào trong th m c web c a web server (có tên là www.server.com). Trên thanh đ a chỉ c a trình duy t, ng i dùng nh p trang www.server.com/abc.aspx. B c 2: Trình duy t g i yêu c u t i server v i n i dung: ”Làm ơn gửi cho tôi trang abc.aspx thì tốt !”. B c 3: web server sẽ biên d ch code c a trang aspx (bao g m c các mã code vb.net/ c# - g i là code behind hay code file) thành class. B c 4: L p sau khi đ c biên d ch sẽ thực thi. B c 5: tr kết qu về cho trình duy t Riêng v i ASP.NET thì vi c biên d ch sẽ đ c thực hi n “thông minh h n”, nh sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 35 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 3.3 Một số ví dụ minh họa. 3.3.1 Yêu c u xử lý tại phía server thông qua Runat=”Server” V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 36 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 3.3.2 Yêu c u xử lý bên phía server thông qua cặp thẻ <% %> Ngoài 2 cách trên, còn 2 cách để yêu c u x lý trang web trực tiếp trên server, đó là: Đặt các câu l nh ngay trong cặp thẻ Script, nh ng có thu c tính Runat = “Server”: ………………………………………………..………………………………………………. <script language="C#" type="text/C#" runat="server"> /// <summary> /// Các câu l nh/ khai báo biến/ khai báo hàm/ định nghĩa l p v.v... /// c n x lý bên phía server thì đặt vào đây ! Ví d : /// </summary> string HoVaTen = "Aptech Center"; public int Tong (int a, int b) { return a + b; } // Hoặc định nghĩa l p 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 3.3.3 Yêu c u xử lý bên server thông qua Script 3.3.4 Yêu c u xử lý bên phía server bằng cách đặt trong Code file V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 38 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 3.4 Webform trong ASP.NET Để xây dựng ng d ng web, ASP.NET cung c p sẵn cho các nhà l p trình r t nhiều l p ngay khi cài đặt .NET framework. Trong s này có m t l p đặc bi t quan tr ng là Page. M i l p Page sẽ trình bày m t trang tài li u – t ng ng v i m t window – và đ c g i là m t web form. Web form là m t công ngh cho phép xây dựng các trang web trong đó có thể l p trình đ c. Các trang này g i là ASP.NET web form pages hay ng n g n là web form. Các trang web xây dựng bằng ASP.NET sẽ không ph thu c vào trình duy t (t c là trình duy t nào cũng cho kết qu nh nhau và hiển th gi ng nhau). u điểm c a web forms: M ts ™ Web forms có thể đ c thiết kế và l p trình thông qua các công c phát triển ng d ng nhanh (RAD). ™ Web form h tr m t t p các điều khiển (controls) có thể m r ng. ™ B t kỳ m t ngôn ng .NET nào cũng có thể đ c dùng để l p trình v i web forms. ™ Asp s d ng trình thực thi ngôn ng chung (CLR) c a .NET framework do đó th a h ng m i u thế c a .NET Framework. Ví d : Kh năng th a kế. 3.5 Tìm hiểu cấu trúc trang ASP.NET M t trang ASP.NET bao g m c ph n giao di n ng i dùng và ph n x lý logic bên trong. Giao di n ng i dùng ch u trách nhi m hiển th các thông tin và tiếp nh n d li u t ng i dùng, trong khi đó ph n x lý (l p trình) đ m nhi m vi c điều khiển sự t ng tác c a ng i dùng v i trang web. Ph n giao di n ng i dùng bao g m m t file ch a ngôn ng đánh d u – nh HTML hoặc XML và server controls chẳng h n. File này đ c g i là m t Trang (Page) và có đuôi m r ng là aspx. Ph n đáp ng các t ng tác c a ng i dùng v i trang web đ c thực hi n b i m t ngôn ng l p trình chẳng h n nh Visual Basic.NET và C#. Chúng ta có thể thực hi n vi c viết code bằng b t kỳ ngôn ng l p trình nào đ c h tr b i CLR ngay trong trang ASPX hoặc tách ra m t file riêng. File tách riêng này đ c g i là file Code Behind hay m i đây g i là Code file. Đuôi m r ng c a Code file là .VB (Nếu dùng ngôn ng Visual Basic) hoặc .CS (nếu dùng ngôn ng C#). Cách l u tr này đ c minh h a qua m t ng d ng c thể d i đây. Trong đó, trang web th nh t Default2.aspx ch a c code (C#) và giao di n (HTML) còn trang web th hai đặt code và giao di n ra 2 file riêng bi t. default.aspx và default.cs. *** Chú ý: Có thể kết h p để v a đặt code trong file aspx v a đặt code trong file cs. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 39 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Trang Default2.aspx ch a code Code đ bên trong nó. c đặt trong default.cs Còn ph n giao di n ch a trong default.aspx M t webform bao g m 2 thành ph n: - Thành phần giao diện (trang thisfile.aspx) - Thành phần xử lý (lập trình) thisfile.cs V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 40 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - Phân tích m t trang ASP.NET thực tế (Trang này l u code và giao di n trên 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="Tính" runat="server" OnClick="Tong" /> <asp:TextBox id="txtKetQua" runat="server" width="50px"/> </form> </body> </html> N i 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 rằng ngôn ng đ c s d ng để l p trình là C# - CodeFile="~/Lession 03/Default.aspx.cs": Cho biết n i dung file chứa code x lý là file ~/Lession 03/Default.aspx.cs. - Inherits ="Lession03_default": Cho biết là trang giao di n thừa kế từ l p nào trong file ~/Lession 03/Default.aspx.cs (B i vì m t file có thể có chứa nhiều l p). - <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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </head> Cho biết là thẻ này c n đ c x lý bên phía server. Tuy nhiên n i dung trong thẻ này không có gì đặc bi t để x lý và kết qu sau x lý sẽ là (không có runat=”server”): <head> <title>Server side - example 3</title> </head> - <form id="form1" runat="server"> : Cho biết là n i dung trong cặp thẻ form c n đ c x lý bên phía server. - <asp:TextBox id="txtA" runat="server" width="50px"/> : là thẻ t o ra ph n t textbox, tuy nhiên do có thu c tính runat = “server” nên vi c t o này sẽ đ c thực hi n bên server, đ c kết 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> Đo n script này có thu c tính runat=”Server”, vì v y nó sẽ đ c x lý phía server. Thu c tính language = “C#” cho biết ngôn ng s d ng để viết là C Sharp. Trong file default.cs N i dung file này hoàn toàn ch a các câu l nh c a ngôn ng l p trình VB.NET hoặc C#. Vi c viết code cho file đó hoàn toàn gi ng nh viết các ch ng trình trên window form hay ch ng trình Console. Chú ý: Trong file này không đ c ch a trực tiếp các thẻ HTML. Các câu l nh trong file này HOÀN TOÀN Đ C PHÉP TRUY C P T I CÁC PH N T trong file default.aspx có thu c tính runat = “server”. Câu hỏi: Nếu trong file default.cs có dòng l nh sau: cmdTinhTong.Text = “Tính tổng”; thì ch ng trình có báo l i không ? Vì sao ? 3.6 Code behind và viết code phía Server. Các file ch a mã code (VB.NET hoặc C#) đ c g i là Code file (cách g i m i) hay Code behind (cách g i cũ). Mã l nh t i đây th ng x lý các tác v liên quan đến nghi p v , trong đó cũng có các câu l nh cho phép g i kết qu về cho phía trình duy t. C thể là ph ng th c write c a đ i t ng Response. Ví d mu n tr m t xâu S về cho trình duy t hiển th , ta viết: Response.write(S). Vi c s d ng ph ng th c write này nh thế nào để “sinh ra” các ph n t cho trình duy t hiểu là m t kỹ năng quan tr ng. Nhìn chung, ng i ta th ng chia các web form thành 2 ph n là trang ch a giao di n (aspx) và trang ch a mã code (.vb; .cs) để đ m b o tính chuyên môn hóa và d b o trì h n. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 42 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 3.7 HTML Server Controls và Web controls 3.7.1 Giới thi u Để giúp cho vi c phát triển các ng d ng web nhanh chóng và thu n ti n, ASP.NET cung c p cho chúng ta m t t p h p các điều khiển sẵn có để thực hi n h u hết các công vi c phổ biến hàng ngày. Các điều khiển này chia làm 2 lo i: HTML Server Control và ASP.NET server control. Các điều khiển (ph n t ) này đều đ c x lý bên phía server (có thu c tính runat=server) vì v y chúng ta đều có thể truy c p đến các ph n t này bằng các câu l nh C# (các câu l nh nằm bên trong Code file). Điểm khác bi t gi a HTML Server control và ASP.NET server control ch : - Điều khiển HTML Server control thì có s l ng và cách th c t o gi ng h t các ph n t HTML mà ta v n t o trong trang HTML, chỉ khác m t điều là có thêm runat = “server”; - Điều khiển ASP.NET control thì có nhiều thu c tính h n, thực hi n đ ph c t p h n HTMLServer controls. c ch c năng 3.7.2 Cách thức tạo ph n tử HTML Server Control và ASP.NET control a) HTML Server control ™ Cú pháp t o ph n t HTML Server control: o <Tên_Lo i_Thẻ runat=”server” thu c_Tính = “giá tr ” ….> o Trong đó: Tên lo i thẻ là input, select, p, h1, …. ™ Ví d : <input type = “text” id=”txtHoTen” runat = “server”> b) ASP.NET server control ™ Cú pháp t o ph n t ASP.NET server control o <asp: Lo i_PT thu c_tính = “giá tr ” …. runat = “server”> o Trong đó asp: là b t bu c, Lo i_PT có thể là button, textbox, calendar, select, ™ Ví d : o o o treeview, adRotator, listview, gridview, image,…. <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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý **** Chú ý **** ™ Để có thể truy xu t t i các ph n t này trong Code file (hay server script phía server) thì m i ph n t c n ph i đặt cho nó m t id duy nh t. ™ Trong t t c các ng dung, nếu có thể đ để đ m b o tính t c thì nên dùng các ASP.NET server control ng thích v i trình duy t. ™ Các điều khiển ASP.NET server control hoàn toàn có thể do ng này sẽ đ i dùng t o ra. (ph n c đề c p trong ph n L p trình ASP.NET nâng cao) V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 44 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 4: TH C HÀNH ™T ™S ™T M c tiêu: K t thúc bài th c hành này, ng i h c có thể o các ph n t web server control d ng các câu l nh phía server để truy c p các ph n t trang web. o m t trang web cho phép nh p thông tin về h s cán b . N i dung th c hành 1. Yêu c u T o m t trang nh bài thực hành s 2 nh ng s d ng các ph n t ASP Server control thay vì s d ng các ph n t HTML. 2. H ớng d n: - a) Các kiến thức cơ bản: Tạo textbox: - Tạo textbox có nhiều dòng: <asp:TextBox runat="server" id="HoVaTen" class="TextboxDài" /> <asp:TextBox runat="server" ID="txtKyLuat" TextMode="MultiLine" CssClass="TextboxDài" Rows="5" Columns="80"> </asp:TextBox> - Tạo h p 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> - Tạo h p 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ú ý: Mu n t o danh sách d ng ListBox, chỉ c n thêm thu c tính Rows v i giá trị > 1 - Tạo nút Radio option (Nh ng Radio có GroupName gi ng nhau sẽ cùng m t nhóm) <asp:RadioButton runat="server" type="radio" id="optNam" GroupName="GT" checked="true"/> - Để truy xu t t i các ph n t server Control bằng mã l nh C#, có thể thực hi n nh l p trình winform (console) thông th ng. Để truy xu t t i các ph n t trong m t danh sách – ví d ComboBox – s d ng thu c tính Items. Ví d : cboNgaySinh.Items[1], … b) Minh họa mẫu 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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>Nh p h s cán 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"> CH NG TRÌNH QU N LÝ CÁN B VERSION 1.0 </p><br /> <br /> <p class="HeadTitle">NH P H S CÁN B </p> <table class="Table"> <tr class="CellSpace"> <td colspan="2" class="Tiêu_Đề_Chính">THÔNG TIN CÁ NHÂN</td> </tr> <tr> <td class="C t1">*H và tên</td> <td class="C t2"> <asp:TextBox runat="server" id="HoVaTen" class="TextboxDài" /> </td> </tr> <tr> <td class="C t1">*Ngày sinh (ngày/tháng/năm)</td> <td class="C t2" > <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> Gi i tính: <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="C t1">Ch c v hi n t i (Đ ng, chính quyền,...)</td> <td><asp:TextBox runat="server" ID="txtChucVu" CssClass="TextboxDài" /></td> </tr> <tr> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 46 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <td class="C t1">*Quê quán</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtQueQuan" CssClass="TextboxDài"/></td> </tr> <tr> <td class="C t1">*N i hi n nay</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtNoiOHienNay" CssClass="TextboxDài"/> </td> </tr> <tr> <td colspan="2" class="Tiêu_Đề_Chính">TRÌNH Đ H C V N</td> </tr> <tr> <td class="C t1"> Dân t c : </td> <td class="C t2"> <asp:TextBox runat="server" ID="txtDanToc" Text="Kinh"/> Tôn giáo: <asp:TextBox runat="server" ID="txtTonGiao" Text="Không" /> </td> </tr> <tr> <td class="C t1">Thành ph n gia đình:</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtThanhPhan" cssclass="TextboxDài"/></td> </tr> <tr> <td class="C t1">Nghề tr c khi tuyển d ng</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtNgheTruocKhiTuyen" CssClass="TextboxDài" /> </td> </tr> <tr> <td class="C t1">Tham gia cách m ng: </td> <td class="C t2"> Ngày <asp:TextBox runat="server" ID="txtNgayThamGiaCM" Text="..../.../...." style="width:15%; text-align:center" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);" /> Tổ ch c <asp:TextBox runat="server" ID="txtToChuc" style="width:20%" /> Công tác <asp:TextBox runat="server" ID="txtCongTac" style="width:20%" /> </td> </tr> <tr> <td class="C t1">Ngày vào Đ ng: </td> <td class="C t2"> <asp:TextBox runat="server" ID="txtNgayVaoDang" Text=".../.../..." CssClass="NgayThang" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> ngày vào chính th c <asp:TextBox runat="server" ID="txtThangVaoDang" cssclass="NgayThang" Text=".../.../..." onfocus="XuLyFocus(this)" onblur="XuLyLostFocus(this)"/> </td> </tr> <tr> <td class="C t1">Ngày nh p ngũ:</td> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 47 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <td class="C t2"><input type="text" value="..../.../...." class="NgayThang" onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> ngày xu t ngũ <input type="text" class="NgayThang" value="..../.../..." onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/> </td> </tr> <tr> <td class="C t1">*Trình đ Văn hóa: </td> <td class="C t2"><input style="width:15%" /> H c hàm: <select runat="server" id="cboHocHam"> <option value="">-----</option> <option value="Th c Sĩ">Th c sĩ </option> <option value="Tiến Sĩ">Tiến sĩ</option> </select> H cv : <select runat="server" id="cboHocVi"> <option value="">-----</option> <option value="Giáo s ">Giáo s </option> <option value="Phó giáo s ">Phó giáo s </option> </select> </td> </tr> <tr> <td class="C t1">Lý lu n chính tr </td> <td class="C t2"> <select runat="server" id="cboTrinhDoLyLuan"> <option>-----</option> <option value = "S c p">S c p</option> <option value="Trung c p">Trung c p</option> <option value="Cao c p">Cao c p</option> <option value="C nhân">C nhân</option> </select> </td> </tr> <tr> <td class="C t1">Trình đ ngo i ng </td> <td class="C t2"> 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> Pháp <select runat="server" id="cboTiengPhap"> <option>-----</option> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 48 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <td class="C t1">*Ng ch công ch c, viên ch c:</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtNgach" style="width:20%" /> Mã s : <asp:TextBox runat="server" ID="txtMaNgach" style="width:15%" /> *H s l ng: <asp:TextBox runat="server" ID="txtHeSoLuong" style="width:15%" /> </td> </tr> <tr> <td class="C t1">Danh hi u đ c phong (năm): </td> <td class="C t2"><asp:TextBox runat="server" ID="txtDanhHieu" CssClass="TextboxDài" /> </td> </tr> <tr> <td class="C t1">S tr ng công tác:</td> <td class="C t2"><asp:TextBox runat="server" ID="txtSoTruongCT" CssClass="TextboxDài" /> </td> </tr> <tr> <td class="C t1">Khen th ng (huân,huy ch ng cao nh t)</td> <td class="C t2"><asp:TextBox runat="server" ID="txtKhenThuong" CssClass="TextboxDài" /> </td> </tr> <tr> <td class="C t1">Kỷ lu t (đ ng, chính quyền, năm, lý do, hình th c)</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtKyLuat" TextMode="MultiLine" CssClass="TextboxDài" Rows="5" Columns="80"></asp:TextBox> </td> </tr> <tr class="Tiêu_Đề_Chính"> <td colspan="2"> ĐÀO T O, B I D NG CHUYÊN MÔN, NGHI P V , LÝ LU N, NGO I NG </td> </tr> <tr> <td class="C t1"> Ghi rõ Tên tr ng, ngành h c, th i gian, lo i hình,văn bằng, ch ng chỉ </td> <td><asp:TextBox runat="server" ID="txtQuaTrinhDaoTao" CssClass="TextboxDài" 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </tr> <tr> <td colspan="2" style="color:Blue"> ** Lo i hình: Chính qui, t i ch c, chuyên tu, b i d th c sĩ, c nhân, kỹ s . </td> </tr> ng; văn bằng: Tiến sĩ, <tr class="Tiêu_Đề_Chính"> <td colspan="2">TÓM T T QUÁ TRÌNH CÔNG TÁC</td> </tr> <tr> <td class="C t1">Ghi rõ th i gian b t đ u và kết thúc; ch c danh, ch c v , đ n v công tác t ng ng)</td> <td> <asp:TextBox runat="server" ID="txtQuaTrinhCongTac" CssClass="TextboxDài" TextMode="MultiLine" Columns="100" rows="5"> </asp:TextBox> </td> </tr> <tr class="Tiêu_Đề_Chính"> <td colspan="2">Đặc điểm l ch s b n thân</td> </tr> <tr> <td class="C t1">Đặc điểm l ch s b n thân</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtDDBanThan" CssClass="TextboxDài" TextMode="MultiLine" Columns="100" rows="5"> </asp:TextBox> </td> </tr> <tr> <td class="C t1">Quan h v i ng i n c ngoài</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtQHNguoiNN" CssClass="TextboxDài" TextMode="MultiLine" Columns="100" rows="5"> </asp:TextBox> </td> </tr> <tr> <td class="C t1">Quan h gia đình (B , mẹ, anh ch em ru t)</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtQHGD" CssClass="TextboxDài" TextMode="MultiLine" Columns="100" rows="5"></asp:TextBox> </td> </tr> <tr> <td class="C t1">Hoàn c nh kinh tế gia đình</td> <td class="C t2"> <asp:TextBox runat="server" ID="txtHoanCanhKT" CssClass="TextboxDài" TextMode="MultiLine" Columns="100" rows="5"></asp:TextBox> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 50 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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> C p nh t " /> <td style="text-align:left"> <input type="reset" value=" Nh p m i " /> </td> </tr> </table> </div> </form> <script language="javascript" type="text/javascript"> var Giá_Tr _Cũ; /// Hàm x lý khi ph n t nh n đ function XuLyFocus(txt) { Giá_Tr _Cũ=txt.value; txt.value=""; } c focus /// Hàm x lý khi ph n t m t focus function XuLyLostFocus(txt) { if (txt.value=="") txt.value=Giá_Tr _Cũ; } </script> </body> </html> 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý public partial class Lession_04 : System.Web.UI.Page { protected void Kh i_T o_Các_Controls () { int i; ListItem L; //Ngày sinh for (i = 1; i <= 31; i++) { L = new ListItem (i.ToString (), i.ToString ()); cboNgaySinh.Items.Add (L); } // Tháng sinh for (i = 1; i <= 12; i++) { L = new ListItem (i.ToString (), i.ToString ()); cboThangSinh.Items.Add (L); } //Năm 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 tên không đ c r ng !"; } else { lblTrangThai.Visible = false; } } protected void Page_Load (object sender, EventArgs e) { Kh i_T o_Các_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 S u t m b i: www.daihoc.com.vn 52 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 5: Tìm hiểu và sử dụng các Server/Ajax Controls M c tiêu của bài: K t thúc bài h c này h c viên có thể: ™ Nêu đ c ch c năng c a m t s ph n t HTML Server control và ASP Server Control th ng dùng. ™ Khai báo sự ki n và viết đ c trình x lý sự ki n g n vào các Controls. ™ Phân tích đ c c chế x lý sự ki n trong m t trang ASP.NET. ™ S d ng các điều khiển HTML, ASP Server control để xây dựng m t s ng d ng đ n gi n. ™ Trình bày đ c tổng quan về công ngh AJAX. 5.1 HTML Server Controls Đây là các điều khiển đ c t o bằng cách thêm thu c tính ID và RUNAT = "Server" bên trong m i thẻ HTML thông th ng. Cách này th ng đ c dùng khi mu n chuyển đổi m t trang ASP tr c đây sang ASP.NET. Tuy nhiên, các điều khiển lo i này không có nhiều thu c tính ph c v công vi c l p trình. So v i ASP Server Control (hay web server control) thì đ c dùng ít h n, do web server control t ng thích v i nhiều trình duy t h n và t p thu c tính, ph ng th c cũng phong phú h n r t nhiều. Vì lý do đó và cũng để tránh sự l n l n gi a HTML Server control và web server control, kể t nay về sau chúng ta th ng nh t chỉ s d ng web server control mà không s d ng đến HTML Server control (tr nh ng ngo i l ). 5.2 Web server Controls Để có thể s d ng code bên phía server truy xu t t i các ph n t trong webform, ASP.NET cung c p cho chúng ta m t s ph n t đặc bi t, g i là web server control hay ASP Server controls. V i các ph n t lo i này, chúng ta có thể t o ra các ph n t r t ph c t p chỉ v i m t hoặc vài dòng code. Ví d ph n t Calendar, ph n t GridView, Container,….Các ph n t này h tr phong cách l p trình theo mô hình h ng đ i t ng. 5.2.1 Khai báo (tạo các ph n tử web server control) Cú pháp khai báo th ng có d ng: Dạng 1 (Không có thẻ đóng) <asp: Tên_Đi u_Khiển ID = "Đ nh danh duy nh t" runat = "Server" tt1="gt1" tt2="gt2" … /> Dạng 2 (có thẻ đóng t ng minh) <asp: Tên_Đi u_Khiển ID = "Đ nh danh duy nh t" runat = "Server" tt1="gt1" tt2="gt2" … > </ asp: Tên_Đi u_Khiển> Trong đó: 2 thu c tính th ng b t bu c ph i có là ID và runat. Thu c tính ID là tên duy nh t đ c dùng để tham chiếu khi viết code phía server. Thu c tính runat="Server" chỉ ra rằng ph n t này c n ph i đ c x lý phía server tr c khi g i về cho Client. Có thể đặt giá tr cho các thu c tính mã JavaScript ! … ngay bên trong các thẻ này, th m chí có thể đ a các V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 53 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 5.2.2 Cơ ch xử lý các ph n tử web server control C chế x lý các ph n t này nh sau: Phía máy ch sẽ đ c nh ng thẻ nào có thu c tính runat = "Server" và đem x lý, kết qu sau khi x lý sẽ đ c g i tr về cho phía trình duy t. Ta xét m t ví d c thể d i đây để hiểu rõ c chế x lý các ph n t webserver control bên phía máy ch : Ví d 1: X lý thẻ form có thu c tính runat="Server" <form runat="server"> </form> Server sẽ đ c thẻ form này và x lý (vì có thu c tính runat = "server"), và cho kết 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 v y, rõ ràng là server đã "chế biến" thêm m t chút tr c khi tr về cho trình duy t, đó là bỏ thu c tính runat="Server" nh ng thêm thu c tính name="ct01", method, action, id… ngoài ra còn thêm các thẻ <div>, <input>. Nói cách khác là server đã biến cái ban đ u mà trình duy t không thể hiểu đ c (ph n có runat="server" trên) thành cái mà trình duy t có thể x lý đ c (ph n kết qu d i). Ví d 2: X lý ph n t TextBox: <asp:TextBox ID="HVT" runat="server" Text="Hello" BackColor="blue"></asp:TextBox> Server sẽ chế biến (gender) thành: <input name="HVT" type="text" value="Hello" id="HVT" style="background-color:blue;" /> ví d này, sau khi x lý server đã bỏ thu c tính runat, asp:TextBox, BackColor… và t o ra thẻ t ng đ ng mà trình duy t có thể hiểu là input, type="text", background-color, name… Ví d 3: X lý ph n t Calendar V i các ph n t ph c t p h n thì Server sẽ ph i m t nhiều công chế biến h n. Ví d đ i v i thẻ Calendar nh sau (chỉ có 1 dòng): V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 54 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Thì server sẽ tạo ra đoạn code HTML r t "khủng" !!!: <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 S u t m b i: www.daihoc.com.vn 56 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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> >>>>> Còn g p kho ng 5 l n đo n code trên n a >>>>> Vì trang HTML truyền th ng không có m t ph n t nào có thể hiển th đ y đ m t l ch biểu (Calendar) nên ASP.NET đã ph i t o ra ph n t đó bằng cách kết h p t r t nhiều thẻ HTML đ n gi n (table, th, tr, td, a,… ) nh trên. Ví d này là m t minh ch ng cho th y ASP.NET đã làm đ n gi n hóa quá trình phát triển ng d ng. Gi m thiểu vi c ph i viết code và b o trì ch ng trình d dàng h n r t nhiều. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 57 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Ví d 4: X lý ph n t web server control nh ng có thêm thu c tính phía client là m t đo n script (L u ý: Thu c tính onClick không có trong danh sách thu c tính c a asp:label): <asp:Label runat="server" ID="lblHello" Text="Hello world" onClick="alert('Hello world');"> </asp:Label> Kết qu server x lý ph n t Label trên là: <span id="Span1" onClick="alert('Hello world');">Hello world</span> Ta biết rằng ph n t asp:Label không có thu c tính onClick (bằng ch ng là khi gõ không th y xu t hi n trong danh sách). Nh ng khi ch y trang web không th y có báo l i. V y c chế x lý c a ASP.NET là nh thế nào đ i v i nh ng ph n t nh thế này ? Cách th c nh sau: Khi các thẻ có runat="server" thì sẽ đ c web server đ c và x lý t t c các n i dung nằm bên trong thẻ đó. Tuy nhiên, nếu gặp thẻ nào đó mà có thể nó ch a hiểu (ví d chỉ client hiểu đ c) thì nó tr nguyên ph n đó cho phía client. Chính vì v y mà ta th y kết qu tr về cho phía client v n ch a nguyên ph n onClick="alert('Hello world');". Đây cũng là cách mà ng i ta hay s d ng để đan xen các đo n code vừa đ server, vừa x lý phía client. Ví d 5: X lý các ph n t c x lý phía server mà trong đó có ch a mã c a Client. <asp:TextBox runat="server" ID="ht" Text="Hello" onmousemove="document.bgColor='blue';" onmouseout="document.bgColor='yellow';" /> Kết qu mà server g i tr về trình duy t 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ự ki n omMouseMove và onMouseOut không có trên server nên nó sẽ g i nguyên giá trị đó cho phía trình duy t. Đ i v i trình duy t thì 2 sự ki n này đã quá quen thu c: omMouseMove xu t hi n khi ng i dùng di chu t trên ph n t textbox và sự ki n onMouseOut xu t hi n khi ng i dùng di chuyển chu t ra ngoài textbox. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 58 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 5.2.2 Th c thi các câu l nh tại phía server Trong r t nhiều tr ng h p chúng ta mu n thực thi m t s câu l nh ngay t i phía server khi ng i dùng thực hi n m t thao tác nào đó – ví d click chu t – thì có thể viết sẵn các th t c sự ki n để thực thi ng v i các sự ki n này. Để g i m t th t c (ph ng th c) phía server khi m t sự ki n x y ra đ i v i ph n t web server control, thì viết nh sau: <asp:Tên_Ph n_T Ví d : G i ph runat = "Server" onClick = "Tên_Ph ơng_Thức" ….> ng th c KiemTra khi ng i dùng nh n vào nút "cmdKiemTra": <asp:Button ID="cmdKiemTra" runat="server" OnClick="KiemTra" /> Lưu ý: Tên của ph ng thức trong ph n OnClick không chứa tham s và d u ngoặc. Nh ng khi định nghĩa ph ng thức này thì th ng ph i 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 câu lệnh ở đây ! } } 5.2.3 Mô hình xử lý s ki n trong ASP.NET 1. L n đ u tiên khi trang web đ c ch y. ASP.NET t o trang và các đ i t ng và thực hi n kh i t o, sau đó trang sẽ đ c chuyển đổi (rendered) thành trang HTML để tr về cho phía client. Các đ i t ng c a trang sau đó cũng đ c gi i phóng khỏi b nh c a server. 2. T i m t th i điểm nào đó, nếu ng i dùng thực hi n m t s công vi c (ví d click chu t lên button có runat = "Server") khi đó h th ng sẽ tự đ ng thực hi n hành đ ng g i là "Postback" (D ch là g i/g i tr l i Server) và lúc đó toàn b d li u trong ph n t form sẽ đ c g i về Server. 3. ASP.NET t o l i các đ i t chúng đ c g i đi. 4. ng c a trang và tr về client tr ng thái cu i cùng khi Tiếp theo, ASP.NET sẽ kiểm tra xem thao tác nào đã gây ra sự ki n postback đó và kích ho t (g i) sự ki n t ng ng (ví d Button.Click). Thông th ng, trong ph n V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 59 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý x lý sự ki n này chúng ta th tra,…. ng thực hi n m t s x lý nh c p nh t CSDL, kiểm 5. Trang này sau đó đ c biến đổi (chuyển đổi) thành trang HTML và g i về cho client (trình duy t). Tiếp theo các đ i t ng c a trang (nh asp:Button; asp:ListBox,…) sẽ đ c gi i phóng khỏi b nh . Nếu có sự ki n Postback khác xu t hi n thì ASP.NET sẽ lặp l i x lý b c 2 cho đến b c 4. Chú ý: Khi t o m t s ph n t nh Button thì mặc đ nh h th ng sẽ tự đ ng Postback m i khi ng i dùng click chu t. Đ i v i m t s ph n t khác nh TextBox thì mặc đ nh là không Postback. Nếu mu n Postback thì đặt thu c tính 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ì m i khi ng i dùng ch n m t m c khác (đ i v i DropDownList) và thay đổi n i dung (đ i v i TextBox) thì h th ng sẽ PostBack trang web về bên Server. Và sự ki n SelectedIndexChanged và TextChanged t ng ng sẽ đ c g i: 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 Giới thi u Rõ ràng là ASP.NET đã cung c p cho chúng ta r t nhiều các điều khiển (asp server control), giúp gi m đáng kể công s c phát triển ng d ng. Tuy nhiên, v i ch ng đó thì v n ch a đ và v n còn vô s nh ng h n chế c n ph i kh c ph c. Đặc bi t là các điều khiển hiển th trên màn hình, các điều khiển kiểm tra d li u nh p (Data Validation control),… B Ajax Toolkit Control là m t t p các điều khiển nhằm đáp ng các yêu c u đó. B Ajax Toolkit control không ph i là thành ph n n i t i c a ASP.NET. Nó chỉ là m t thành ph n bổ sung cho ASP.NET. Có thể download t i đ a chỉ http://asp.net V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 60 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Sau khi cài đặt file ASPAJAXExtSetup.msi, h th ng sẽ có m t file là AjaxControlToolkit.dll, chúng ta sẽ vào menu website Æ Project Reference 5.3.2 Hướng dẫn sử dụng một s Ajax Control cơ bản Các b c s d ng: B ớc 1: Thêm tham chiếu Ajax control toolkit vào Project B ớc 2: Chèn m t ScriptManager vào trang và T o các ph n t theo cú pháp <ajaxToolkit:Tên_Ph n_T ID="Giá_Trị_ID" runat="server" TargetControlID="ID của ph n t mà ta mu n áp d ng cho" /> Ví d : Cho phép ng Một số phần tử Ajax i dùng ch n ngày tháng và năm khi ng i dùng focus vào ô 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 Thảo luận công nghệ Ajax Mô hình x lý trang web truyền th ng Mô hình x lý c a Ajax V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 62 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 6: TH C HÀNH M c tiêu: Sau khi kết thúc bài thực hành, ng i h c có thể: ™ S d ng ngôn ng l p trình C# để l p trình x lý phía server. ™ S d ng đ c m t s điều khiển Ajax để trình bày giao di n và kiểm tra d li u nh p. N i dung: 1. Vi t l nh phía server Yêu cầu: Kiểm tra d li u nh p bài tr c (Nh p h s cán b ), đ m b o các yêu c u sau: ™ H tên không đ c r ng, chỉ ch a ch cái và d u cách. Đ dài <= 30; ™ Ngày tháng năm sinh ph i h p l . Ví d tháng 2 c a năm nhu n có 29 ngày, các năm khác là 28 ngày. ™ Ngày sau ph i "l n h n" ngày tr c. Ví d ngày xu t ngũ ph i tr c ngày nh p ngũ. ™ Các tr ng s chỉ ch a giá tr là s d ng, không ch a ký tự thông th ng. ™ Các ô textbox nhiều dòng, ch a t i đa là 1000 ký tự. ™ Ch ng nào d li u còn nh p sai thì c n ph i focus đến đó để yêu c u ng i dùng s a l i. ™ Nếu m i d li u nh p đều h p l thì g i n các điều khiển và chỉ m t dòng thông báo là : "Hồ sơ đã đ c c p nh t" ra gi a màn hình !. Hướng dẫn: ™ Để đ c giá tr value c a m c đang đ c ch n trong DropDownList thì viết: DDL_Name.Text . Trong đó: DDL_Name là id c a dropdownlist. ™ Để truy xu t t i m t ph n t có chỉ s i trong Dropdownlist, viết: DDL_Name.Items[i]; ™ Để xóa các m c: DDL_Name.Clear(); để đếm s m c : DDL_Name.Count; ™ Để thêm m t m c vào DDL (Dropdownlist) o o DS.Items.Add ("M c m i"); Hoặc DS.Items.Add (new ListItem ("text", "value")); ™ Hàm chuyển ngày tháng d ng xâu sang kiểu Date: DateTime d; o DateTime D = DateTime.Parse (s); o int D.Day; D.Month; D.Year Æ tr về ngày, tháng năm c a D. ™ Để focus t i m t ph n t : Viết <Giá tr ID>.Focus(); VD: DS.Focus(); ™ Phép toán l y ph n nguyên, ph n d : o L y nguyên: 20/ 6 Î 3 o L y ph n d : 20 % 6 Î 2 2. Sử d ng m t s đi u khiển Ajax Control Toolkit Cách đăng ký và đ a Ajax Control Toolkit vào dự án: - C n có 3 file sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 63 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - B ớc 1, vào menu website Æ Add Reference Æ Ch n Tab Browse. Sau đó ch n 2 t p (1) và (2) trên. Click OK. B ớc 2: Click chu t ph i lên h p toolbox và ch n "Choose Items". Khi h p tho i m ra, Browse t i file (3) trên. Click OK. 2.1 Sử dụng Calendar Yêu c u: Viết m t trang cho phép ng này đ i dùng nh p vào ngày sinh c a h . Ngày sinh c nh p bằng cách ch n trực tiếp trên l ch (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>Nh p ngày sinh:</b> <asp:TextBox runat="server" ID="txtNS"></asp:TextBox> <ajaxToolkit:CalendarExtender ID="cal" TargetControlID="txtNS" runat="server" > </ajaxToolkit:CalendarExtender> </form> </body> </html> L u ý: - Trong thẻ <ajaxToolkit:CalendarExtender ID="cal" TargetControlID="txtNS" runat="server" >. Thu c tính TargetControlID cho biết là sẽ hiển thị Calendar khi ng i dùng focus điều khiển có id là txtNS. o Trong trang c n ph i có thẻ <asp:ScriptManager và đặt trong thẻ Form. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 64 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 2.2 Nhập ngày tháng theo định dạng (sử dụng điều khiển 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" /> Nh p ngày tháng theo d ng: 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="Ph i nh p ngày tháng" InvalidValueMessage="Ngày tháng nh p sai" ValidationGroup="Demo1" Display="Dynamic" TooltipMessage="Nh p vào m t ngày" /> </form> </body> </html> ** Chú ý: Tr ng h p này c n ph i đặt 2 điều khiển Ajax, m t cái là ajaxToolkit:MaskedEditExtender và m t cái là ajaxToolkit:MaskedEditValidator. Cái thứ hai c n ph i g n v i cái thứ nh t bằng cách đặt thu c tính ControlExtender. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 65 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 2.3 Sử dụng 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> Ph n tiêu đề c a h p tho i. Đặt trong m t Panel. <form id="form1" runat="server"> <asp:Button ID="cmdOpenPopup" runat="server" Text="C a 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">Thông báo </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="H y bỏ" /> <asp:Button ID="cmdLogin" runat="server" Text="Đăng nh p" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="Popup01" runat="server" TargetControlID="cmdOpenPopup" PopupControlID="NoiDung" OkControlID="cmdLogin" DropShadow="true" PopupDragHandleControlID="TieuDe"> </ajaxToolkit:ModalPopupExtender> Ph n n i dung h p tho i. Đặt trong m t Panel. </form> </body> </html> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 66 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 7: Tạo và sử dụng Custom Control 7.1 Giới thiệu User Custom Control Visual studio cung c p cho chúng ta r t nhiều các điều khiển để phát triển ng d ng g i là điều khiển n i t i (Instrict control). Ngoài ra, nó còn cung c p cho chúng ta kh năng tự xây dựng các điều khiển tùy biến nếu các điều khiển hi n hành không đáp ng đ c yêu c u. Ví d : Nếu ng d ng c a b n c n chiếc máy tính (Calculator) r t nhiều trang thì gi i pháp t t nh t là t o m t điều khiển Calculator riêng thay vi c kết h p các điều khiển truyền th ng, khi đó ta có thể s d ng điều khiển này trong toàn b ng d ng. Bài h c này sẽ h ng d n cách t o và s d ng điều khiển do l p trình viên tự xây dựng – hay còn g i là điều khiển tùy biến (Custom Control). Tiếp theo sẽ minh h a thêm m t s ví d về t o điều khiển tùy biến để ng i đ c hiểu rõ h n. Thực ch t c a User Custom Control (UCC) chính là m t "trang con", trong đó có thể ch a b t kỳ n i dung nào (tr các thẻ <HTML> <BODY>,<FORM>, vì m t trang chỉ có duy nh t m t l n xu t hi n các thẻ này) . "Trang con" này sau đó có thể đ c chèn (Include) vào các trang khác để s d ng. Khi mu n c p nh t n i dung t t c các trang, ta chỉ vi c s a đổi duy nh t UCC ban đ u. Kh năng này c a ASP.NET giúp chúng ta xây dựng ng d ng nhanh h n, d b o trì h n. M i m t UCC đ c đặt trong m t trang có ph n m r ng là *.ascx. File này có đặc điểm là không truy c p trực tiếp t trình duy t mà chỉ đ c chèn vào các trang aspx. 7.2 Các bước tạo User Custom control Vi c thực hi n t o User custom control tr i qua 3 b c chính nh sau: Bước 1: Thêm m t web form vào Project hi n hành ™ Vào menu website, ch n Add new item. Ch n lo i Web user control ™ Đặt tên cho web user control. Bước 2: So n n i dung c a trang. Bước 3: L u l i n i dung c a trang. Ví d : T o m t UCC ch a thông tin liên h c a Trung tâm H ng Yên Aptech, thông tin này sẽ đ c dùng làm Footer (chân trang) c a t t c các trang trong h th ng ph n mềm qu n lý cán b . Kết qu sau khi đ a UCC vào trang web. đây ta c n t o 2 trang, trang Footer.ascx ch a n i dung c a UCC và trang Default.aspx, để s d ng UCC Footer.ascx. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 67 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý N i 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 /> Ph n mềm qu n lý cán b - phiên b n 2.0 <br /> &copy;B n quyền h th ng thu c về Trung tâm đào t o H ng Yên - 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>Ph n mềm qu n lý cán b - Version 2.0</title> </head> <body> <form id="form1" runat="server"> <div> <Aptech:Footer ID="Footer1" runat="server" /> </div> </form> TagPrefix </body> </html> TagName V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 68 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý *** M t s điểm c n l u ý khi t o UCC: ™ Trang UCC cũng có trang Code C# t ng ng là : .ascx.cs ™ Đ u trang ascx, thay vì viết chỉ d n <%@ Page… ta thay bằng:<%@ Control… ™ Trong UCC không có cặp thẻ HTML, BODY, FORM. ™ Khi "chèn" UCC vào trang aspx, c n ph i thêm thẻ <%@ Register… ngay sau thẻ <%@ Page… Tuy nhiên có thể dùng ph ng pháp kéo-th bằng cách click ™ M t UCC có thể xu t hi n nhiều l n trong m t trang. ™ Mu n thay đổi UCC trên các trang thì ph i tr về trang ascx ban đ vào trang ascx và "kéo-th " vào form .aspx ( chế đ Design view). u để chỉnh s a. 7.3 Thêm các thuộc tính, phương thức và sự kiện vào UCC M i UCC thực ch t là m t Class, do v y hoàn toàn có thể thêm các thu c tính, ph th c, sự ki n .. ng 7.3.1 Thêm thuộc tính vào UCC Để thêm thu c tính, m file ch a code (file có ph n m r ng là ascx.cs) và khai báo thu c tính c n thiết. Ví dụ: Thêm thu c tính Mau_Nen cho UCC Footer trên để đặt Màu nền cho dòng 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Chú ý: - NoiDung là ID c a ph n t <TD> trong trang Footer.ascx. Do v y viết NoiDung.BgColor = mau_nen; trong đo n ch ng trình trên là đặt màu nền cho ph n t <td>. - T khóa value trên là giá tr đ c gán cho thu c tính. Ví d nếu ta viết NoiDung.Mau_Nen="blue" thì value khi này có giá tr là "blue". - M i khi ta gán giá tr cho thu c tính thì ph n bên trong set { … } sẽ đ c g i và khi ta đ c giá tr c a thu c tính thì ph n get { } sẽ đ c g i. Trong m i ph n set và get này hoàn toàn có thể đặt các câu l nh x lý. Sau khi thêm thu c tính, b n có thể đ c/ghi giá tr này thông qua câu l nh hoặc gán giá tr trực tiếp trong chế đ code và design. Ví d đặt l i màu nền: ……………. <Aptech:Footer ID="Footer1" runat="server" Mau_Nen="purple"/> ……………. Đặt trực tiếp trong c a sổ Properties 7.3.2 Thêm phương thức vào UCC T ng tự nh các Class, chúng ta có thể thêm các ph dựng các l p thông th ng. Ví d : Thêm m t ph ng th c làm n/ hi n UCC ng th c vào cho l p nh khi xây trên. 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 S u t m b i: www.daihoc.com.vn 70 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý get { return mau_nen; } } /// Value= true ==> Hi n. /// 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) { } } Vi c g i các ph ng th c này cũng gi ng nh nh ng ph ng th c thông th ng tr c đây. 7.3.3 Thêm s ki n vào UC Ph n này sẽ đ c gi i thi u trong các chuyên đề cao h n. 7.4 Truy cập thuộc tính, phương thức của các phần tử con trong UCC. Vì m t UCC có thể ch a nhiều điều khiển bên trong, vì v y có nh ng lúc ta c n truy c p đến m t s thu c tính, ph ng th c c a điều khiển con này. Tuy nhiên điều này là không đ c phép, gi i pháp cho v n đề này đó là: T o thêm ph ng th c d ng Public hoặc Protected c a UCC để có thể truy c p đến các ph n t con bên trong. Ví d : Thêm m t ph ng th c SetAptechLinkText cho phép thay đổi l i nhãn liên kết đến trang Aptech. Code c a 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý { return mau_nen; } } /// Value= true ==> Hi n. /// Value=False ==> n public void ShowHideUCC (Boolean Value) { if (Value == true) this.Visible = true; else this.Visible = false; } /// Ph ng thức cho phép thay đổi nhãn của liên kết đến trang Aptech public void SetAptechSiteText (string newText) { AptechLink.Text = newText; } protected void Page_Load (object sender, EventArgs e) { } } Khi s d ng: 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ủ của Aptech"); } } Nếu điều khiển con bên trong có r t nhiều thu c tính (ví d Table) thì rõ ràng để truy c p t i các thu c tính c a nó (r t nhiều) ta sẽ ph i t o vô s thu c tính cho UCC. Trong tr ng h p nh v y, để tránh ph i khai báo quá nhiều thu c tính, ta t o m t thu c tính và tr về là đ i t ng c n truy xu t, ví d để bên ngoài có thể truy xu t đến toàn b các thu c tính và ph ng th c c a Textbox1 nằm trong UCC thì ta t o m t thu c tính kiểu 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 S u t m b i: www.daihoc.com.vn 72 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 7.5 Minh họa tạo một số điều khiển Ví d 1: T o m t menu cho ng d ng Qu n lý cán b , có d ng: Kết 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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="Gi i thi u"></asp:LinkButton> <br /> <asp:LinkButton runat="server" ID="LinkButton2" CssClass="HLink" Text="H ng d n"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton8" CssClass="HLink" Text="Liên h "></asp:LinkButton> <hr /> <asp:LinkButton runat="server" ID="LinkButton" CssClass="HLink" Text="Nh p h s cán b "></asp:LinkButton> <br /> <asp:LinkButton runat="server" ID="LinkButton3" CssClass="HLink" Text="S a đổi h s "></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton4" CssClass="HLink" Text="Tìm kiếm"></asp:LinkButton><br /> <asp:LinkButton runat="server" ID="LinkButton5" CssClass="HLink" Text="Th ng 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 nh p </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 nh p" /> </td> </tr> </table> Ví d 2: T o m t textbox để nh p ngày tháng (có tích h p Calendar) dùng chung trong toàn ng d ng. Kết qu . V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 74 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 8: TH C HÀNH M c tiêu: Kết thúc bài thực hành này h c viên có thể: ™ T o m t s điều khiển UCC ph c v cho h th ng Qu n lý cán b ™ Thêm và s d ng đ c các thu c tính, ph ng th c cho điều khiển UCC N i dung: Bài 1: T o m t điều khiển Login,có giao di n nh sau: Ch ng trình minh h a: 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 nh p </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 S u t m b i: www.daihoc.com.vn 76 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Bài 2: T o điều khiển Login1 có giao di n nh bài 1 nh ng thêm thu c tính cho phép đặt đ r ng c a điều khiển. Hướng dẫn: Ph n giao di n code nh trên, còn ph n code C# sẽ thêm thu c tính 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) { } } T i trang aspx, khi mu n thay đổi đ r ng, chỉ vi c thêm thu c tính DoRong trong thẻ. Bài 3: Yêu c u nh bài 2 nh ng có thêm 3 ph ng th c. Ph ng th c CheckAccout() để kiểm tra, nếu User name="asp.net" và password = "123456" thì tr về true, trái l i tr về false; Ph ng th c GetUserName tr về giá tr trong ô User name; ph ng th c GetPassword tr về giá tr trong ô Password. Ngoài ra, khi ng i dùng b m vào nút "Login" thì sẽ in ra thông báo (trên m t nhãn phía d i) : "B n đã đăng nh p v i User name là : … Password là: ….." H ớng d n: Vì bên ngoài không thể truy xu t đ c vào các thu c tính c a đ i t ng con thu c UCC, do v y nếu thực sự mu n truy c p thì ta c n ph i xây dựng các ph ng th c Public cung c p các ch c năng truy c p (đ c/ ghi) này. Vi t lại trang Login.ascx.cs nh sau (Ph n giao di n không đổ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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý } get { return dorong; } } public Boolean CheckAccount () { return (txtUserID.Text == "asp.net" && txtPassword.Text == "123456"); } /// L y User name trong ô User name public string GetUserName () { return txtUserID.Text; } /// l y Password trong ô Password public string GetPassword () { return txtPassword.Text; } protected void Page_Load (object sender, EventArgs e) { } } Trang aspx s d ng điều khiển này sẽ có d ng: <%@ 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 S u t m b i: www.daihoc.com.vn 78 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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) ///Nếu không ph i l n đ u n p trang { lblThongBao.Text = "B n đã nh p User name=" + Login11.GetUserName() +" M t kh u : " + Login11.GetPassword(); } } } N i dung trang C# c a trang ASPX Bài 4: T o ph n Header và Footer để có thể chèn vào các trang. Giao di n nh sau: Nội dung của điều khiển Header.ascx (Học viên có thể tùy biến) T o m t UCC, có tên 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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> Bài 5: T o Menu cho h th ng ph n mềm qu n lý cán b . (Làm l i bài trong tài li u dùng cho lý thuyết). Nh ng thêm m t s hyperlink khác.. Bài 6: L p ghép header, footer và Menu để đ c trang nh sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 80 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Trang code giao di n c a 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; } Giao di n UCC c a MainMenu.ascx 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="Gi i thi u"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton8" Text="Liên h "></asp:LinkButton> </td> </tr> <tr> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 81 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton" Text="Nh p h s cán b "></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton3" Text="S a đổi h s "></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton4" Text="Tìm kiếm"></asp:LinkButton> </td> </tr> <tr> <td> <asp:LinkButton Width="100%" CssClass="A_MainMenu" runat="server" ID="LinkButton5" Text="Th ng 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 nh p </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 nh p" /> </td> </tr> </table> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 82 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 9: Các đối tượng trong ASP.NET Trong b t kỳ ng d ng nào, dù là winform based hay webform based thì vi c giao tiếp (t ng tác) v i ng i dùng và gi a các webform v i nhau là điều b t bu c. Ví d ta c n ph i l y thông tin đặt hàng do ng i dùng nh p vào và hiển th tr l i ng i dùng m t s thông tin h u ích khác, nh kết qu thanh toán…hay m t trang chuyển tiếp kết qu cho m t trang khác để x lý v.v… các bài tr c, để làm điều này chúng ta thực hi n d dàng thông qua các server controls nh textbox, listbox, dropdownlist, label,… Tuy nhiên nh ng điều khiển này chỉ có tác d ng trong m t Page còn các trang khác thì hoàn toàn không thể đ c/ghi giá tr nằm trong các điều khiển này. Để thực hi n vi c giao tiếp (truyền d li u) gi a các webform ASP.NET cung c p m t t p các điều khiển giúp ta làm vi c đó m t cách d dàng, đó là: Đ i t ng Request và đ i t ng Response. Trong bài h c này, chúng ta cũng tìm hiểu thêm m t s đ i t ng khác cũng r t hay dùng khi xây dựng ng d ng là đ i t ng Server, Application và Session. 9.1 Request Object 9.1.1 Đ i tượng Request dùng để làm gì ? Request là m t đ i t ng c a ASP.NET, nó cho phép đ c các thông tin do các trang khác g i (Submit) đến. Post Mô hình g i/đ c giá tr : Trang Gửi Trang nhận Form1 User name : Password: aptech …………………………………… Request("txtUserName") => aptech Request("txtPassword") => 123456 …………………………………… ******* 9.1.2 Các thành ph n (thuộc tính và phương thức) chính Ph ng th c: ™ Request.QueryString.Get("Tên_Ph n t c n đ c"): Để đ c giá tr c a m t ph n t đ c g i theo ph ng th c Get (Method = "Get") ™ Ph ng th c Request.Form.Get("Tên_Ph n t c n đ c"): Để đ c giá tr c a m t ph n t đ c g i theo ph ng th c Post (Method = "Post"). Chú ý: Có thể dùng Request.Form.GetValues và Request.Form.GetValues để đ c. 9.1.3 Ví dụ sử dụng Xây dựng 2 trang web : trang Default.aspx, trong đó có 2 textbox ch a tên và m t kh u. Khi ng i dùng click vào nút submit thì g i tên và m t kh u sang trang Webform1.aspx để hiển th . V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 83 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Trang ngu n (g i): Default.aspx Kết qu nh n về. Code c a 2 trang sẽ nh sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 84 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Default.aspx Webform1.aspx V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 85 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Code x lý c a trang webform1.aspx.cs 9.2 Response Object 9.1.1 Đ i tượng Response dùng để làm gì ? Đ i t ng này đ c dùng để g i n i dung (m t xâu) b t kỳ về cho trình duy t. ™ Ph 9.1.2 Các thành ph n (thuộc tính và phương thức) chính ™ ™ ng th c: Response.write(<Biểu th c>) dùng để g i giá tr biều th c truyền vào cho phía trình duy t. Ph ng th c: Flush dùng để đ a d li u còn trong b đ m phía server về cho phía trình duy t. Ph ng th c Response.Redirect(“đ a chỉ URL”): Chuyển t i m t trang khác. 9.1.3 Ví dụ sử dụng T o m t trang Login hoàn toàn bằng ph ng th c Response.write nh sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 86 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Trang code sẽ nh sau: 9.3 Server Object 9.3.1 Đ i tượng Server dùng để làm gì ? ™ Dùng để t o các đ i t ng COM ™ L y thông tin về tên máy ™ Ánh x đ ng d n o thành đ ng d n v t lý. ™ CreateObject(“COM Specification”) Î Ít dùng trong ng d ng .NET ™ MachineName: String; Tr về tên c a máy tính server đang ch y. ™ Mappath(“Virtual path”): Tr về đ ng d n v t lý c a đ ng d n o t 9.3.2 Các thành ph n (thuộc tính và phương thức) chính ng ng. ™ In ra tên c a máy ch hi n hành: Response.Write(Server.MachineName); ™ Cho biết đ ng d n thực sự trên ổ c ng (th m c v t lý) c a trang hi n hành (trang 9.3.3 Ví dụ sử dụng ™ default.aspx) : Server.Mappath(“default.aspx”); Cho biết đ ng d n v t lý ng v i t p QLCB.Mdb, biết rằng t p này nằm trong m t th m c con là “App_Data”: Server.Mappath(“App_Data/QLDB.MDB”); 9.4 Session Object 9.4.1. Biến Sesstion Khi vào m t website, ng i dùng có thể duy t r t nhiều trang web c a website đó. Nếu mu n l u tr thông tin về khách thăm này trong c phiên làm vi c thì có thể l u vào các biến, g i là biến Session. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 87 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Nói cách khác, biến session là m t biến mà m i trang trong m t phiên (Session) đều có thể truy xu t. 9.4.2. Đối tượng Session Là đ i t ng dùng để qu n lý (t o, đ c, ghi) các biến sesstion và m t s thông s khác. + Cú pháp để tạo biến Session nh sau: Session.Add("Tên_Biến","Giá trị khởi tạo"); Lưu ý: Tên biến ph i đặt trong cặp d u nháy kép. <Giá tr > có thể là xâu ký tự hoặc s ... Ví dụ : T o m t biến tên là MaNguoiDung và gán giá tr là TK34 Session.Add(“MaNguoiDung”,“TK34”); + Cú pháp để đ c giá tr c a m t biến sesstion nh sau: Session.Contents[“Tên_Biến”] hoặc dùng chỉ s : Session.Contents[i]; + Cú pháp để ghi (thay đổi) giá tr c a biến session: Session.Contents[“Tên_Biến”] = <Giá tr m i> Ví dụ: Response.write(“Mã ng i dùng là : “ &Session.Contents[“MaNguoiDung”]) Riêng v i đ i t ng Session, nó còn có các sự ki n. Các sự ki n này tự đ ng đ c g i m i khi m t phiên làm vi c đ c t o ra. Các sự ki n này có tên là On_Start và On_End. Các sự ki n này đ c đặt trong file Global.asax. 9.5 Application Object 9.5.1 Đ i tượng Application dùng để làm gì ? Dùng để qu n lý các biến có ph m vi toàn ng d ng. Có tác d ng đến m i ng i dùng. 9.5.2. Khái ni m bi n toàn ứng dụng Biến toàn ng d ng là biến có tác d ng đ i v i m i ng i dùng truy c p vào website. M i trang aspx.cs đều có thể truy c p đến biến này và dù b t kỳ th i điểm nào. 9.5.3. Đ i tượng Application Dùng để qu n lý (T o, đ c, ghi) các biến có ph m vi toàn ng d ng. + Cú pháp t o biến Application: Application.Add(“Tên_Biến”, <Giá tr kh i t o>); + Ví d : T o biến So_Nguoi_Truy_Cap Application.Add(“So_Nguoi_Truy_Cap”, 0) + Truy xu t đến biến Application: Application.Contents[“Tên_Biến”] hoặc chỉ s : Application.Contents[i] + Ví d : Đ c và ghi biến Application. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 88 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Application.Contents[“So_Nguoi_Truy_Cap”] = Application.Contents[“So_Nguoi_Truy_Cap”] + 1 Response.write(“B n là v khách th : “ & Application.Contents[“So_Nguoi_Truy_Cap”]) Ngoài ra, đ i t ng Application còn có 2 ph ng th c th ng dùng là Application.Lock(): Để khóa không cho ng i khác s a đổi các biến toàn c c và Application.UnLock() để m khóa . Đ i t ng Application cũng có 2 sự ki n đó là Application_OnStart và Application_OnEND. Sự ki n OnStart chỉ đ c kích ho t duy nh t m t l n khi yêu c u đ u tiên phát sinh. Sự ki n OnEND đ c kích ho t khi d ch v web d ng (unload). Đ i t ng Application có 2 ph ng th c là Lock và Unlock. Khi g i ph ng th c Lock (khóa) thì t t c các ng d ng không đ c phép thay đổi các giá tr Application. Để các ng d ng khác đ c phép thay đổi các biến Application thì g i ph ng th c Unlock. Mã l nh viết cho 2 sự ki n này cũng đ c đặt trong file Global.asa. Một s bài tập tổng hợp: Bài 1: T o m t trang Login, nếu ng i dùng nh p user name và m t kh u t ng ng là asp.net và 123456 thì đ c phép truy c p các trang Index.aspx, trái l i m i l n ng i dùng truy c p đến trang Index.aspx thì đều đ c chuyển t i trang Login.aspx. Minh h a: C n tạo 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 toán - Trang c n ph i Login tr c khi xem</title> </head> <body> <form id="form1" runat="server"> <div> <h1 style="text-align:center"> Đây là n i dung r t quan tr ng, b n chỉ có thể th y dòng này sau khi đã Login ! </h1> </div> </form> </body> </html> N i dung trang Home.aspx V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 89 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 S u t m b i: www.daihoc.com.vn 90 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Bài 2: T o m t trang đếm s l ng ng i truy c p. Dùng biến t p text để l u. H ng d n: T o 2 trang là Index.aspx/cs và Global.asax v i n i 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>Chào mừng b n đã đến website của chúng tôi</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="B n là vị khách 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 (); //T o m t biến Applciation là SLTruyCap và kh i t o giá trị S Application.Add ("SLTruyCap", S); } V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 92 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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) { //Tăng s l ng ng i truy c p lên 1 khi có m t ng i m i thăm Application.Contents ["SLTruyCap"] = int.Parse (Application.Contents ["SLTruyCap"].ToString ()) + 1; //L u vào 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 t o, ch y file Index.aspx để kiểm ch ng sẽ th y rằng s l luôn tăng lên b t kể là server có t t hay máy tính b tr c trặc. ng ng i truy c p luôn Đây là cách đ c dùng chính th c để đếm s l ng l t ng i truy c p. B n hoàn toàn có thể c i tiến để hiển th s l ng ng i truy c p bằng hình nh cho sinh đ ng h n. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 93 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 10: TH C HÀNH BÀI 11. Truy n d li u gi a các webpage, MasterPage và gỡ r i (Debug) chương trình. 11.1 Truyền (Post) dữ liệu giữa các trang bằng mã lệnh C# Nh bài tr c đã đề c p, để truyền (Post) d li u t m t trang X đến trang Y nào đó ta th ng t o m t Button trong đó có thu c tính PostBackURL = Y. V i cách này thì m i khi chúng ta click chu t lên Button thì nó sẽ chuyển thẳng đến trang Y mà không ph thu c vào mã l nh x lý bên trong. Điều này sẽ b t l i nếu nh nh vi c chuyển t i trang Y còn tùy thu c vào kết qu x lý hi n t i. Ví d : T o m t trang có m t textbox và m t nút nh n. Khi ng i dùng click nút nh n (submit) thì kiểm tra nếu r ng thì thông báo sai, trái l i thì Post t i trang XuLy.aspx. 11.2 Truy xuất đến các phần tử bằng phương thức FindControl Ph ng th c FindControl cho phép ta tìm kiếm (trỏ/ truy xu t) t i m t ph n t nằm bên trong nó. Ví d : T o m t trang có m t textbox và m t nút nh n. Khi ng i dùng click vào nút nh n thì hiển th dòng ch "B n đã dùng FindControl để truy xu t !". FindControl() 11.3 Truy xuất đến trang gửi thông qua thuộc tính PreviousPage. Khi m t trang X post (g i) d li u đến m t trang Y, thì thu c tính PreviousPage trong trang Y sẽ trỏ t i trang X. Hay có thể viết hình t ng là: Y.PreviousPage = X. Ví d : T o m t trang Login.aspx, Sau khi click nút Login, sẽ post đến trang XuLyDangNhap.aspx. T i trang này sẽ đ c d li u nằm trong textbox username, Password. 11.4 MasterPage Master Page là m t trang đặc bi t cho phép các trang khác hiển th bên trong nó. MasterPage th ng dùng để t o ra m t m u sẵn (Ví d ch a Header, MainMenu và Footer), còn các trang n i dung không ph i kèm thêm các ph n Header, footer này. Cách t o: Ch n trang web d ng MasterPage Cách cho trang khác hiển th bên trong nó: Khi t o form, ch n lo i web content. T l n sau, chỉ c n tick vào ph n: Select MasterPage. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 94 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Ví d : T o m t trang Master ch a 3 n i dung là Header, MainMenu và Footer. Và 2 trang khác Home.aspx và GioiThieu.aspx (Main menu có ZZ2 liên kết các trang này). V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 95 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Header Trang ch Gi i thi u S n ph m Vùng này dùng để hiển th các trang khi click hyperlink menu c nh Footer V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 96 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 11.5 Gỡ rối Có 2 lo i l i: - L i biên d ch (Compile error): Là lo i l i đ c phát hi n ngay khi d ch ch ng trình - L i l p trình (logic) hay còn g i là l i Run-time: L i x y ra khi ch y ch ng trình. Vi c tìm ra các l i run-time g i là quá trình g r i (hay Debug). 11.5.1 Giới thi u 11.5.2 Chạy ứng dụng ch độ gỡ r i 11.5.3 Khái ni m điểm dừng 11.5.4 Chạy từng dòng l nh với ch độ Step Into (F8) 11.5.5 Chạy từng dòng l nh với ch độ Step Over (Shift-F8) 11.5.6 Chạy từng dòng l nh với ch độ Step Out (Ctrl-Shift-F8) 11.2 Sử dụng Custom Error page 11.3 Ghi các vết gây lỗi (Trace errors) 11.4 Sử dụng công cụ gỡ rối/ Menu Debug 11.5 Tracing lỗi ở mức trang/ Mức toàn ứng dụng BÀI 12: TH C HÀNH V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 97 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 13: CÔNG NGH ADO.NET 13.1 Giới thiệu chung Khi phát triển các ng d ng trên nền web thì công vi c ch yếu ph i gi i quyết là x lý các nghi p v , trong đó ph n l n là x lý C s d li u. Trong môi tr ng phát triển Microsoft .NET t t c các ng d ng webform hay winform đều th ng nh t s d ng chung m t b th vi n để truy xu t và thao tác C s d li u g i là ADO.NET (Active Data Object). - ADO.NET là m t t p các lớp nằm trong b th vi n l p c s c a .NET Framework, cho phép các ng d ng windows (nh C#, VB.NET) hay ng d ng web (nh ASP.NET) thao tác d dàng v i các ngu n d li u. - Mục tiêu chính của ADO.NET là: ƒ Cung c p các l p để thao tác CSDL trong c hai môi tr ng là phi kết n i (Disconected data) và kết n i (Connected data). ƒ Tích h p chặt chẽ v i XML (Extensible Markup Language) ƒ T ng tác v i nhiều ngu n d li u thông qua mô t d li u chung. ƒ T i u truy c p ngu n d li u (OLE DB & SQL server). ƒ Làm vi c trên môi tr ng Internet. - - Các l p c a ADO.NET đ c đặt trong Namespace là System.Data/ System.Data.oledb ADO.NET bao g m 2 Provider (2 b th vi n th ng dùng) để thao tác v i các CSDL là: OLE DB Provider (nằm trong System.Data.OLEDB) dùng để truy xu t đến b t kỳ CSDL nào có h tr OLEDB; SQL Provider (nằm trong System.Data.SQLClient) chuyên dùng để truy xu t đến CSDL SQL Server (Không qua OLE DB nên nhanh h n). Hi n nay, các hãng th ba còn cung c p các Provider khác nh : MySQL, Oracle… provider để cho phép ng d ng .NET truy xu t đến các c s d li u không ph i c a Microsoft khác. V trí c a ADO.NET trong kiến trúc c a .NET Framework Vị trí của ADO.NET trong kiến trúc của .net Framework V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 98 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý T kiến trúc ta th y rằng: ADO.NET là m t thành ph n n i t i (Instrict) c a .NET framework, do v y nó có thể đ c s d ng trong t t c các ngôn ng h tr .NET nh C#, VB.NET… mà không có sự khác bi t nào (T c là các ch c năng cũng nh cách s d ng hoàn toàn gi ng nhau). 13.2 Kiến trúc của ADO.NET ADO.NET cho phép làm vi c c hai chế đ , chế đ Kết n i (Connected) và phi kết n i (Disconnected). B ba Connection, Command và DataReader: cho phép làm vi c chế đ Connected; còn DataAdapter, Connection, Command và Dataset làm vi c chế đ Disconnected. Trong chế đ Connected thì m i khi thao tác (nh s a, xóa, thêm) thì đều đòi hỏi ng d ng ph i kết n i và thao tác trực tiếp v i c s d li u (CSDL); còn trong chế đ Disconnected thì v n có thể thêm, s a, xóa d li u trên đ i t ng c c b ; không nh t thiết ph i kết n i ngay đến CSDL (Xem mô hình d i). ~ Recordset Mdb; mdf, XML… V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 99 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 13.3 Các lớp thao tác với CSDL: Connection, Command,…. 13.3.1 Lớp Connection + Chức năng: Là đ i t ng có nhi m v thực hi n kết n i đến C s d li u để các đ i t ng nh Command thao tác v i CSDL thông qua Connection này. + Khai báo (có nhiều cách): public OleDbConnection Cn1; public OleDbConnection Cn2 = new OleDbConnection (); public OleDbConnection Cn3 = new OleDbConnection ("Provider=Microsoft.jet....."); M t s ph ơng thức: + Open: Dùng để m k t n i: Open Cnn. (): M kết n i đến CSDL do ta chỉ đ nh trong ConnectionString L u ý: sau khi g i ph ng th c Open, có thể xem đã kết n i thanh công hay không thông qua thu c tính State c a Connection: if (Cnn.State == 1) “Kết nối thành công !” + Close(): Dùng để đóng kết n i: Cnn.Close(); Æ Th ng thì nên viết nh sau để tránh l i : if (Cnn.State == 1) Cnn.Close(); + GetSchema: L y thông tin về CSDL (Ví d tên các b ng, các tr ng trong b ng…) M t s thu c tính: + State: Cho biết tr ng thái kết n i. (ConnectionState.Open Î kết n i đã đ cm ) + ConnectionString: Chứa các thông tin để kết n i. Ví dụ về một trang thực hiện kết nối đến CSDL C:\Nwind.mdb using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_Default : System.Web.UI.Page { /// <summary> /// Hàm kết n i đến C s d li u /// </summary> /// <param name="DBFileName">Đ ng d n t i file MDB</param> /// <returns>Tr về đ i t ng OledbConnection hoặc 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 S u t m b i: www.daihoc.com.vn 100 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý catch (Exception ex) { return null; } } // Kết n i đến c s d li u và thông báo kết qu kết n i trên m t 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 = "Đã kết n i thành công ! " ; } else { lblThongBao.Text = "Không thể kết n i đ c !"; } } } Chú ý: Thông th ng t p c s d li u đ c l u trong th m c App_Data. Khi đó để có thể kết n i đến CSDL này mà không c n biết th m c hi n đ c đặt trong ổ C:\ hay D:\ … thì c n viết đ ng d n c a t p nh sau: Conn = OpenDB (Server.MapPath("../App_Data/nwind.mdb")); Vị trí của t p CSDL nwind.mdb V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 101 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - Nếu ổ đĩa ch a t p CSDL đ c đ nh d ng là NTFS và đ c đặt quyền truy c p thì c n ph i đ m b o rằng th m c ch a t p CSDL có quyền read/write cho ng i dùng là IUSR_. (Có thể thay đổi quyền hoặc ng i dùng truy c p đến th m c bằng cách Right click lên th m c đó, ch n Properties, tiếp theo ch n thẻ Security và Add thêm ng i dùng/ quyền..) ™ Ch 13.3.2 Lớp Command ™ c năng: Thực hi n các thao tác đ i v i CSDL, nh Insert, Update, delete, Select. Tuy nhiên, để thực hi n đ c các l nh này thì c n ph i thông qua m t Connection nào đó đang đ c m . Cách t o (chính t c): OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Câu l nh SQL"; Cmd.Connection= OleDbConnection_Obj; - - Hoặc viết g n h n: OleDbCommand Cmd=new OleDbCommand("L nh SQL",OleDbConnection_Obj); Trong đó OleDbConnection_Obj là m t OleDbConnection mà tr c đó đã Open r i. Câu l nh SQL: là m t xâu ch a câu l nh SQL b t kỳ. ™M ƒ ™ t s ph ng th c dùng để thực thi câu l nh SQL: int ExecuteNonQuery(): S d ng khi CommandText trên thu c d ng Insert, Delete, Update…. Hàm này tr về s b n ghi b tác đ ng (affected). ƒ Object ExecuteScalar(): S d ng khi CommandText trên là câu l nh SQL chỉ tr về m t kết qu đ n, ví d câu l nh đếm tổng s b n ghi : Select Count(*) … Hàm này tr về hàng và c t đ u tiên c a kết qu thực thi truy v n. Các hàng và c t khác b bỏ qua. ƒ OleDbDataReader ExecuteReader(): Dùng khi CommandText là m t câu l nh ch n (Select). Hàm tr về là m t đ i t ng OleDbDataReader ch a kết qu thực thi câu l nh (th ng là câu l nh Select). ƒ XMLReader ExecuteXMLReader(): Dùng để đ c d li u là m t t p XML. Ph ng th c này chỉ áp d ng cho m t s Provider (ví d SqlClient) M t s thu c tính ƒ CommandText: Ch a câu l nh SQL c n thực thi, ví d : "Select * from Employees", "Insert into Employees (….) values (….)", "Delete from Employees where …" ƒ Connection: Để cho biết là đ i t ng Command s d ng kết n i nào. ƒ CommandType: Cho biết CommandText ch a StoreProcedure, tên b ng hay là câu l nh SQL. Mặc đ nh thu c tính này có giá tr là Text. ™ Ví d : Xây dựng m t trang web hiển th tổng s b n ghi c a b ng Products trong c s d li u nwind.mdb. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 102 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Default.aspx.cs using System; using System.Data; using System.Data.OleDb; public partial class Lession_12_Default : System.Web.UI.Page { // Kết n i đến c s d li u và thông báo kết qu trên m t Label. protected void Page_Load (object sender, EventArgs e) { // T o đ i t ng Connection và m kết n i đế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(); // T o đ i t ng Command và thực thi câu l nh đếm s b ng ghi OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select Count(*) from Products"; Cmd.Connection = Conn; // Hiển thị kết qu trên Label int SL = (int) Cmd.ExecuteScalar(); lblThongBao.Text = "S b n ghi trong b ng Products: " + SL.ToString (); // Gi i phóng kết n i. Cmd.Dispose (); Conn.Close (); } } Ví d : Thêm Tên nhà cung c p vào b ng Suppliers: Trang giao di n <%@ 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="Thêm" onclick="cmdAdd_Click" V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 103 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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) { // T o đ i t ng Connection và m kết n i đế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 (); // T o đ i t ng Command và thực thi câu l nh đếm s b ng ghi OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Insert into Suppliers(CompanyName) values('" + txtNCC.Text + "')"; Cmd.Connection = Conn; Cmd.ExecuteNonQuery (); Cmd.Dispose (); Conn.Close (); } } ™ Ch 13.3.3 Lớp DataReader ™ c năng: Dùng để đón nh n kết qu tr về t ph ng th c ExecuteReader c a đ i t ng Command. Nó t ng tự nh m t Recordset c a ADO, tuy nhiên d li u nh n về là Readonly và chỉ đ c theo chiều tiến. M t s ph ng th c: ƒ Bool Read(): Thực hi n vi c đ c m t b n ghi (m t hàng) trong kết qu , sau đó chuyển t i b n ghi tiếp theo. Hàm này tr về true nếu v n còn d li u, false nếu đã đ c hết. ƒ DataTable: GetTableSchema() Æ Tr về m t dataTable mô t thông tin về DataReader nh tên các c t. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 104 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ƒ ƒ String: GetName(int i) Æ Tr về tên c a c t i GetInt(int i), GetString(int i),…, GetXXX(int i) Æ Tr về giá tr c a c t i và chuyển về d ng Int, String,… ™ M t s thu c tính: ƒ Boolean: HasRows cho biết là DataReader có ch a d li u hay không ? ƒ int FieldCount Æ Cho biết s tr ng (C t) c a DataReader. ƒ Biến DataReader –ví d Dr – cho phép đ c d li u c a t ng ô (c t/ tr ng) c a hàng hi n hành nh sau: Dr["Tên tr ng"/ hoặc chỉ s ]. ™ Ví d : N p Tên c a t t c s n ph m trong b ng Products và đ a vào m t ListBox. Trang giao di n: <%@ 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 m c s n ph m</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) { // T o đ i t ng Connection và m kết n i đế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 (); // T o đ i t ng Command và thực thi câu l nh đếm s b ng 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý không có new OleDbDataReader Dr; /// Dr = Cmd.ExecuteReader (); //Duy t và đ a vào lstDSSP while (Dr.Read() == true) { lstDSSP.Items.Add (Dr ["ProductName"].ToString()); } Cmd.Dispose (); Conn.Close (); } } Câu h i: Viết lstDSSP.Items.Add (Dr [0].ToString()) có đ c không ?. ™ Ch c năng: Là m ™ Khai báo: 13.3.7 Lớp DataColumn t thành ph n t o nên DataTable. DataColumn Dc; Dc = new DataColumn (Tên_C t); Hoặc, t o c t và chỉ đ nh kiểu d li u cho c t: DataColumn Dc; Dc = new DataColumn ("Hello", System.Type.GetType(Tên_Kiểu)); Trong đó Tên_Kiểu có thể là String, Int32, …. ™ M t s ph ng th c: ƒ ™ M t s thu c tính: ƒ Caption: Tiêu đề c a c t ƒ ColumnName: Tên c a c ™ Ví d : t. T o m t c t có tên là H tên, kiểu String, Tuổi kiểu Int: DataColumn Dc_HVT; Dc_HVT = new DataColumn ("HoVaTen", System.Type.GetType ("String")); Dc_HVT.Caption = "H và tên"; DataColumn Dc_Tuoi; Dc_HVT = new DataColumn ("Tuoi", System.Type.GetType ("Int32")); Dc_HVT.Caption = "Tuổi"; ™ Ch c năng: Qu ™ Khai báo: 13.3.8 Lớp DataTable n lý d li u d ng b ng 2 chiều (Các hàng và các c t). DataTable Dt ; V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 106 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ™M ƒ ƒ ™M ƒ Dt=new DataTable(); hoặc Dt = new DataTable("Tên_B ng"); t s ph ng th c: DataRow NewRow() : Tr về m t đ i t ng DataRow; Clear(): Xóa t t c các d li u trong DataTable t s thu c tính: Columns: Là m t t p h p, qu n lý toàn b các c t (Thêm, xóa, s a…) c a DataTable. Columns l i có các ph ng th c để thêm/xóa c t. ƒ Rows: Là m t t p h p, qu n lý toàn b các hàng trong DataTable. Rows cũng có các ph ng th c để thêm/xóa hàng. ™ Truy xu t đến ô [i,j] c a b ng: Tên_B ng.Rows[i][j]. Có thể dùng vòng lặp kiểu nh for (i=0; i < Dt.Rows.Count; i++) for (j=0; j < Dt.Columns.Count; j++) { … Dt.Rows[i][j] … } để duy t toàn b các ô trong Table. ™ Ví d : T o m t b ng có 2 c t là H tên (Kiểu String) và Tuổi (Kiểu Int32) ………………………………. DataColumn Dc_HVT; Dc_HVT = new DataColumn ("HoVaTen", Type.GetType ("String")); Dc_HVT.Caption = "H và tên"; DataColumn Dc_Tuoi; Dc_HVT = new DataColumn ("Tuoi", Type.GetType ("Int32")); Dc_HVT.Caption = "Tuổi"; DataTable Dt ; Dt=new DataTable(); Dt.Columns.Add (Dc_HVT); Dt.Columns.Add(Dc_Tuoi); // T o c t h tên nh vào Column // T o c t tuổi. trên ……………………………………… Hoặc có thể thêm ng n g n h n: Dt.Columns.Add("HoVaTen",Type.GetType("String")); ™ Ch c năng: Là m t đ i t ™ Khai báo: DataRow Dr; L 13.3.9 Lớp DataRow ng để qu n lý m t hàng c a m t DataTable. u ý: Vì Dr ph thu c vào b ng (DataTable) nên nó chỉ đ t o ra b i m t DataTable có sẵn, không thể t o DataRow theo kiểu: DataRow Dr=new DataRow() !!! ™ Truy xu t các c t (ô) trong m t DataRow nh sau: ƒ Dr[Chỉ s ] hoặc Dr[Tên_C t]. Trong đó Dr: là m t biến kiểu DataRow ™ Ví d : T o m t b ng có hai c t H tên và Tuổi, sau đó chèn vào b ng này 2 b giá tr t n ghi có ng ng là {"Nguy n Văn An", 30} và {"Nguy n Văn Bình", 20}. …………………………………………………………….. DataTable Dt ; Dt=new DataTable(); V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 107 S u t m b i: www.daihoc.com.vn c Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Dt.Columns.Add (Dc_HVT); Dt.Columns.Add(Dc_Tuoi); DataRow Dr; Dr = Dt.NewRow (); // T o m t hàng tr ng Dr ["HoVaTen"] = "Nguy n Văn An"; Dr ["Tuoi"] = 30; Dt.Rows.Add (Dr); // Thêm vào b ng Dr = Dt.NewRow (); // T o m t hàng tr ng Dr ["HoVaTen"] = "Nguy n Văn Bình"; Dr ["Tuoi"] = 20; Dt.Rows.Add (Dr); // Thêm vào b ng …………………………………………………………….. ™ Ch 13.3.10 Lớp DataSet c năng: Là m t đ i t ng ch a các DataTable. Nó là n i l u tr d li u t m th i cho ng d ng trong quá trình x lý. L p DataSet này nằm trong System.Data. 0 1 2 DataSet Object ™ Khai báo: ƒ DataSet Ds; ƒ DataSet Ds = new DataSet(); ™ M t s ph ng th c: ƒ ™ M t s thu c tính: ƒ Tables: Ch a t t c các b ng ch a trong Dataset. ƒ Tables[i] hoặc Tables[Tên_B ng] : Tham chiếu đến m ™ Ví d : Xem ví d m c 13.3.11 t b ng c thể trong Dataset. ™ Ch 13.3.11 Lớp DataAdapter ™ c năng: Đóng vai trò c u n i / Chuyển đổi d li u gi a Ngu n d li u (DataSource) và các đ i t ng thao tác d li u (nh DataSet chẳng h n). M t s ph ng th c: ƒ Fill (DataSet, Tên_Cho_DataSet): Điền d li u l y đ c vào DataSet. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 108 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ƒ ™M ƒ ™ Update(DataSet/DataTable…) : C p nh t d li u trong DataSet, DataTable ng tr về C s d li u. c t s thu c tính: SelectCommand, UpdateCommand, DeleteCommand, InsertCommand: tr về hoặc cho phép thiết l p các câu l nh SQL để Ch n (Select), C p nh t (Update), Delete, Insert vào C s d li u. Ví d : Hiển th toàn b b ng Suppliers ra màn hình Trang giao di n <%@ 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 sách nhà cung c p</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) { // T o đ i t ng Connection và m kết n i đế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 (); // T o đ i t ng Command và select toàn b b ng 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Da.SelectCommand=Cmd; DataSet DsNCC = new DataSet (); Da.Fill (DsNCC, "DS_NCC"); // Hiển thị trên m t b ng dgrNCC.DataSource = DsNCC.Tables ["DS_NCC"]; dgrNCC.DataBind (); } } V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 110 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 14: TH C HÀNH Mục tiêu: Kết thúc bài học này, học viên có thể: ™ T o đ c c s d li u cho h th ng qu n lý cán b ™ S d ng đ c các l p truy xu t c a ADO.NET ™ Hiển th d li u trên trình duy t bằng các điều khiển ASP Server controls. ™ Hoàn thi n ch c năng Nh p h s cán b , trong đó có l u vào Database. Nội dung: 1. T o c s d li u Access QLCB.MDB có nh ng b ng v i c u trúc nh sau: ™ B ng tblCanBo ™B ng Bằng c p: tblBangCap ™B ng phòng ban: tblPhongBan ™B ng trình đ chuyên môn: tblChuyenMon ™B ng ch c v : tblChucVu V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 111 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý ™B ng ng ™M i quan h gi a các b ng (Chú ý ch n Cascading Update/ Delete khi t o) i dùng 2. Nh p d li u cho bảng. đây chỉ h ng d n cách nh p m u cho b ng tblUser, vì b ng này ch a c d li u d ng Xâu, s , bool, datetime. H c viên t o các b ng khác m t cách t ng tự. 2.1 Thiết kế trang giao di n (Chú ý: Các trang c n ph i đ c g n vào trong h th ng giao di n đã đ c xây dựng bài tr c, ví d : đ a vào MasterPage) Trang giao di n 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>Nh p thông tin ng i dùng</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 S u t m b i: www.daihoc.com.vn 112 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <tr> <td colspan="2" style="background-color:Purple;color:White"> <h3 style="margin:3px 3px 3px 3px">Nh p thông tin ng i dùng</h3> </td> </tr> <tr> <td class="CanPhai"> Tên đăng nh p </td> <td> <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox> </td> </tr> <tr> <td class="CanPhai"> M t kh u </td> <td> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> </td> </tr> <tr> <td class="CanPhai"> Quyền h n </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="Thêm" onclick="cmdThem_Click" /> </td> </tr> </table> </div> </form> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 113 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </body> </html> 2.2 Viết 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) { // T o đ i t ng Connection và m kết n i đế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 +"')"; // T o đ i t ng Command và select toàn b b ng 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 S u t m b i: www.daihoc.com.vn 114 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 3. Hiển th d li u trong bảng lên trình duy t 3.1 Trang giao di n 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 sách ng i dùng</title> </head> <body> <form id="form1" runat="server"> <div> <h2> Danh sách ng i dùng</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) { // T o đ i t ng Connection và m kết n i đế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 (); // T o đ i t ng Command và select toàn b b ng 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"); // Hiển th trên m t b ng dgrDSNS.DataSource = DsNCC.Tables ["DS_USer"]; dgrDSNS.DataBind (); } } V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 115 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 4. C p nh t d li u bằng DataSet và DataAdapter Để c p nh t d li u vào trong CSDL, ta có thể dùng câu l nh SQL d ng nh "UPDATE …WHERE …." và thực thi bằng ph ng th c ExecuteNonQuery c a đ i t ng Command. Tuy nhiên còn có m t cách khác để c p nh t n a, đó là dùng ph ng th c Update c a đ i t ng DataSet và DataAdapter. Mô hình d ng nh sau: Các b c c n ph i thực hi n khi Update bằng DataAdapter: 1. T o kết n i đến CSDL 2. T o đ i t ng Command và đặt câu l nh Select cho thu c tính CommandText. Vi c đặt câu l nh Select đây là để về sau DataAdapter biết đ c các tr ng c a b ng g m nh ng tr ng nào ? 3. Điền (Fill) d li u vào m t DataSet. 4. Chỉnh s a d li u trong các b ng c a DataSet 5. T o m t thể hi n c a CommandBuilder (OleDBCommandBuilder/ SqlCommandBuilder) 6. G i ph ng th c Update c a DataAdapter để c p nh t thực sự vào Database. Ví d : S a đổi tr ng thái đăng nh p (Tr ng TrangThai) c a t t c ng i dùng trong b ng tblUser thu c c s d li u QLCB.mdb thành 1. Trang giao di n 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>C p nh t d li u thông qua Data Adapter</title> </head> <body> <form id="form1" runat="server"> <h2>S a tr ng thái đăng nh p thành 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 S u t m b i: www.daihoc.com.vn 116 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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) { // T o đ i t ng Connection và m kết n i đế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 (); // T o đ i t ng Command và select toàn b b ng tblUser OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select * from tbluser"; Cmd.Connection = Conn; OleDbDataAdapter Da; Da = new OleDbDataAdapter (); Da.SelectCommand = Cmd; // Điền d li u vào DataSet DataSet Ds=new DataSet(); Da.Fill(Ds,"DSND"); // S a d li u của b ng tblUser trong Dataset for (int i=0; i < Ds.Tables["DSND"].Rows.Count; i++) { Ds.Tables["DSND"].Rows [i]["TrangThai"] = 1; } //C p nh t tr l i C s d li u OleDbCommandBuilder CmdBuilder = new OleDbCommandBuilder (Da); Da.Update (Ds,"DSND"); /// C p nh t b ng DSND trong Ds vào C s d li u //Gi i phóng các đ i t Cmd.Dispose (); Da.Dispose (); Conn.Close (); ng không còn s d ng } } V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 117 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 15: Tìm hiểu và ứng dụng cơ ch Data Binding 15.1 Giới thiệu DataBinding ASP.NET cung c p cho chúng ta r t nhiều điều khiển để cho phép hiển th cũng nh tiếp nh n thông tin t ng i dùng. Có nh ng điều khiển cho phép chúng ta hiển th nh ng thông tin tĩnh (Static – t c là giá tr xác đ nh đ c ngay khi l p trình), m t s hiển th đ c c nh ng thông tin đ ng (Dynamic - t c là đ c tính toán khi ch y ch ng trình). Để vi c hiển th thông tin đ ng này m t cách đ n gi n và nhanh chóng, ASP.NET cung c p cho chúng ta m t đặc tính g i là "Data Binding" (T m d ch: "G n kết d li u"). Thu t ng Data Binding đây đ c hiểu là "G n/ liên kết các điều khiển v i m t ngu n d li u nào đó để hiển th , thao tác…tự đ ng". T "Data" cũng c n ph i đ c hiểu theo nghĩa r ng, nó không nh t thiết ph i là cái gì đó liên quan đến C s d li u nh ta th ng nghĩ mà có thể là m t thu c tính, m t m ng, m t t p h p, m t danh sách, m t tr ng d li u trong b ng CSDL….hay tổng quát là m t biểu th c tr về giá tr . Điểm khác bi t chính c a c chế Data binding so v i các c chế liên kết d li u khác đó là tính khai báo. Vi c khai báo này không ph i trong file Code behind (*.CS) mà là trong file giao di n (*.ASPX). Điều này làm cho code và điều khiển tách bi t và sáng s a h n. Bài h c này sẽ gi i thi u đặc tính Databinding bằng các điều khiển ASP.NET Server. 15.2 Data Binding 15.2.1 Dạng gắn k t d li u đơn (Single DataBinding) Trong ASP.NET, có thể g n m t giá tr đ n lẻ vào trang đ c g i là Single Data Binding. Cú pháp để g n d li u đ n vào trang nh sau: <%# Giá_Tr %>. Trong đó: Giá_Tr có thể là m t hằng, m t biến, m t hàm, m t biểu th c hoặc có thể là m t thu c tính khác. Ví d : <%@ Page Language="C#" AutoEventWireup="true" Inherits="_Default" %> <head runat="server"> <title>Data Binding demo</title> </head> <body> <form id="form1" runat="server"> Hằng s : <%# 20 %> <br /> Hằng xâu: <%# "Xin chào" %> <br /> Biểu thức: <%# 10+5 %> <br /> Hàm : <%# "Sin(3.14/2) = " + Math.Sin(3.14/2) %> <br /> Thu c tính khác: <%# "Tiêu đề của trang là " + this.Title %> </form> </body> </html> Có thể g n kết t i m t biểu th c, m t biến, thu c tính … b t kỳ. Chú ý: Trong th t c Page_Load c n thêm l nh this.DataBind() để thực sự g n kết. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 118 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 15.2.2 Dạng gắn k t d li u có s lặp lại (Repeated Data Binding) Có r t nhiều tr ng h p d li u c n hiển th là m t danh sách (Ví d M ng, b ng, DataReader,…) hay tổng quát là m t t p h p các m c (Collection Items ). Trong tr ng h p nh v y, ta hoàn toàn có thể dùng c chế DataBinding trong ASP.NET để g n kết qu đó vào m t điều khiển d ng danh sách (Ví d ListBox, DropdownList, CheckboxList,…) để hiển th mà không c n ph i viết nhiều dòng code. Các điều khiển cho phép g n kết d li u th ng có 3 thu c tính v i các ý nghĩa nh sau: ™ DataSource: Là thu c tính để chỉ đến ngu n d li u c n g n kết. Ngu n d li u này ph i là m t t p h p. Ví d : DataTabe, Array,… ™ DataSourceID: Chỉ đến m t đ i t ng cung c p ngu n d li u. Có thể s d ng hoặc thu c tính DataSourceID hoặc DataSource nh ng không đ c c hai. ™ DataTextField: Cho biết là g n kết v i tr ng nào c a m i m c d li u. Ví d 1: T o m t m ng có 100 ph n t (t 0 đến 99), sau đó hiển th trên m t Listbox thông qua c chế DataBinding: Trang giao di n: ArrayBinding.aspx Chú ý: Vì đây m i m t ph n t c a m ng chỉ có m t giá tr duy nh t, do v y trong 3 thu c tính DataSource, DataSouceID và DataTextField ta chỉ c n đặt giá tr duy nh t là DataSouce khi thực hi n bind m ng này vào ListBox để hiển th . C thể nh trong trang Code behind sau đây. Nh c l i rằng, để vi c Bind d li u thực sự di n ra, ta c n g i ph ng th c DataBind c a điều khiển hoặc DataBind c a trang (Nếu g i ph ng th c DataBind c a trang thì t t c các điều khiển con thu c trang sẽ tự đ ng g i ph ng th c DataBind c a riêng nó). V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 119 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Trang Code và kết qu : ArrayBinding.aspx.cs Ví d 2: Dùng c chế DataBind, hiển th t t c tên đăng nh p trong b ng tblUser thu c CSDL QLCB.MDB vào m t 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 sách ng i dùng</h2> <asp:ListBox ID="lstDSND" runat="server"></asp:ListBox> </form> </body> </html> Trang giao di n V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 120 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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) { // T o đ i t ng Connection và m kết n i đế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 (); // T o đ i t ng Command và select toàn b b ng Suppliers OleDbCommand Cmd; Cmd = new OleDbCommand (); Cmd.CommandText = "Select * from tblUser"; Cmd.Connection = Conn; OleDbDataReader Dr; Dr = Cmd.ExecuteReader (); // Bind kết qu vào Listbox để hiển thị trên trang web lstDSND.DataSource = Dr; // L y d li u từ ngu n Dr lstDSND.DataTextField = "TenDangNhap"; // Hiển thị TenDangNhap lstDSND.DataBind (); // Thực hi n g n kết. } } Trang code thực hi n vi c Binding Chú ý: - Ta g n kết d li u gi a Listbox v i DataReader đ c b i vì Dr ch a m t t p h p ph n t - Vì m i m c d li u c a ngu n d li u (Dr) trong tr ng h p này l i ch a nhiều tr ng, do v y ta c n ph i chỉ rõ thêm là Listbox sẽ g n/l y tr ng nào ra để hiển th thông qua vi c gán tên tr ng c n hiển th cho thu c tính DataTextField. - Sau cùng, c n ph i g i ph ng th c DataBind () để thực hi n g n kết và hiển th thực sự. 15.3 Các điều khiển Data Source (Data source controls). 15.3.1 Giới thi u v DataSource controls bài tr c chúng ta đã s d ng các đ i t ng truy xu t d li u (nh datareader) kết h p v i vòng lặp (while (Dr.DataRead() == true)) để duy t và đ c toàn b b n ghi l y về. Tuy nhiên, còn m t cách khác để đ c d li u mà không ph i viết code đó là dùng các điều khiển Data Source. Hiện tại ASP.NET cung cấp một số Data source controls sau đây: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 121 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý - - SqlDataSouce: Cho phép truy xu t t i b t kỳ ngu n d li u s d ng trình điều khiển (Provider) c a ADO.NET. Bao g m OleDb, SqlClient, ODBC, Oracle. (bài này sẽ s d ng SqlDataSource để minh h a) ObjectDataSource: Truy xu t t i ngu n d li u do ng i dùng tự đ nh nghĩa. AccessDataSource: Truy xu t t i ngu n d li u Access XmlDataSource: Truy xu t t i ngu n d li u là file XML. Ý t ng c a DataSource control là: "Bạn chỉ việc đặt vài thông số kết nối và câu lệnh sql, sau đó có thể gắn vào control này để lấy lại dữ liệu.". Vi c g n và l y d li u này thực hi n d dàng thông qua các thu c tính khi khai báo control. Tuy nhiên, v i DataSouce control thì không chỉ có v y, nó còn cho phép thực hi n các thao tác c p nh t khác nh Update, delete,… 15.3.2 Sử dụng SqlDataSouce để chọn (Select) d a) T o điều khiển SqlDataSouce: Cú pháp: li u <asp:SqlDataSource runat="server" ProviderName="Tên_Provider" ConnectionString="Đ ng d n t i file CSDL hoặc thông s kết n i" SelectCommand/ UpdateCommand/ DeleteCommand ="Câu l nh SQL t ID="Giá trị ID"> ng ứng" L u ý: Để cho linh ho t, thông s kết n i th ng đ c đặt trong file c u hình (web.config). Để đ c xâu kết n i này ta có thể thực hi n thông qua ký pháp d ng: <%$ %>. Ví d : T o m t điều khiển SqlDataSouce để đ c toàn b n i dung c a b ng tblUser trong c s d li u QLCB. N i dung c a 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 d n t i th m c App_Data. Nếu c s d li u c n kết n i là SQL Server thì xâu sẽ có d ng: 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 S u t m b i: www.daihoc.com.vn 122 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Tạo một SqlDataSource và select dữ liệu trong bảng tblUser Sau khi đã t o m t ngu n d li u khá đ n gi n. trên r i thì vi c s d ng ngu n d li u này để hiển th Ví d : Hiển th b ng tblUser v a l y đ Hiển th danh sách ng c trên. i dùng <%@ 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Ví d 2: Hiển th tên các nhà cung c p trong m t Dropdownlist; Phân tích: đây Dropdownlist chỉ hiển th đ c m t c t (tr ng d li u) trong khi Dr ch a c m t b ng (có nhiều c t). Do v y, c n ph i chỉ cho Dropdownlist biết là g n v i tr ng nào c a Dr thông qua thu c tính 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>Hiển thị danh sách nhà cung c p 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 sách nhà cung c p</h2> <asp:DropDownList runat="server" ID="ddlDSNCC" DataSourceID="DSNCC" DataTextField="CompanyName"> </asp:DropDownList> </form> </body> </html> Trong đó: Xâu kết n i NWIND c a 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ử dụng SqlDataSource để cập nhật d li u Để c p nh t d li u thì trong khai báo điều khiển SqlDatasource ta c n cung c p c thể câu l nh Update cho thu c tính UpdateCommand. L u ý: Khi thực hi n Update, thông th ng ta sẽ truyền giá tr vào thông qua các tham s . Do v y, c n ph i Add các tham s (parameter) này tr c khi thực hi n thao tác Update. Ví d 1: Hiển th b ng tblUser trong gridview, nh ng có thêm ch c năng c p nh t. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 124 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Giao di n trang web Để có thể c p nh t đ c thực sự vào CSDL, thực hi n m y công vi c sau: 1. Hiển th c t Update, trong gridview: Đặt thu c tính AutoGenerateEditButton="true". 2. Thêm thu c tính UpdateCommand cho SqlDataSource 3. Truyền tham s và giá trị cho các tr ng mà ta mu n c p nh t. 4. G i ph ng thức Update của SqlDataSource. Trong đó 1) và 2) viết trong trang ASPX; 3) 4) viết trong sự ki n Row_Updating c a GridView. Trang giao di n <%@ 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>C p nh t ng i dùng</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>C p nh t thông tin ng i dùng</h2> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 125 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 (); // T o 2 tham s v i giá trị t ng ứng là TenDN và MKMoi, // Sau đó add vào UpdateCommand của đ i t ng SQLDataSource DSND.UpdateParameters.Add ("MatKhau", MKMoi); DSND.UpdateParameters.Add ("TenDangNhap", TenDN); DSND.Update (); } } Phân tích: Trong thu c tính UpdateCommand trên, ta có dòng: UpdateCommand="Update tblUser set MatKhau=@MatKhau where TenDangNhap=@TenDangNhap" đây @MatKhau và @TenDangNhap đ c g i là các tham s . Tham s này r t đa d ng, nó có thể là n i dung c a m t textbox hay cũng có thể do ta t o ra t ng minh bằng câu l nh d ng: SqlDataSource.UpdateCommand.Parameters.Add("Tên","Giá tr ") …. Trong tr ng h p này ta sẽ t o bằng ph ng i dùng v a s a đổi. Câu h i : Làm thế nào để l y đ ng th c Add, sau đó truyền giá tr là n i dung mà c giá tr mà ng i dùng v a s a ?. R t may cho chúng ta là khi ng i dùng s a đổi n i dung và b m vào nút "Update" (bên c nh Gridview) thì Gridview sẽ Postback tr l i Server và kích ho t sự ki n RowUpdating: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 126 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Khi postback (g i về) server, Gridview sẽ g i kèm các thông tin về hàng (b n ghi) hi n đang đ c s a ch a, c thể g m: Các giá tr cũ (OldValues), các giá tr m i (NewValues), chỉ s c a hàng đang s a và có thể c giá tr khóa c a b n ghi (nếu trong gridview ta đặt thu c tính DataKeyNames) Để truy xu t đến các giá tr m i/cũ này ta viết: e.OldValues[Chỉ s / tên tr ng], e.NewValues[Chỉ s hoặc tên tr ng]. Để truy xu t đến giá tr khóa c a b n ghi hi n hành, ta viết e.Keys[Chỉ s / hoặc tên tr ng] (Ví d e.Keys[MaSanPham]…) Sau khi l y đ c các giá tr này, ta sẽ t o ra parameters t Update() c a điều khiển SqlDataSource. ng ng và g i ph ng th c 15.3.4 Xóa bản ghi trong CSDL bằng SqlDataSource Để xóa b n ghi, ta cũng tiến hành t ng tự nh khi c p nh t, đó là ph i thêm thu c tính DeleteCommand cho điều khiển SqlDataSource, t o và truyền tham s trong sự ki n RowDeleting. Nh v y, n i dung trang web trên sẽ đ c bổ sung thêm nh sau: Trang giao di n <%@ 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>C p nh t ng i dùng</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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <h2>C p nh t thông tin ng i dùng</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 (); ///Lấy giá trị khóa 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 (); // T o 2 tham s v i giá trị t ng ứng là TenDN và MKMoi, // Sau đó add vào UpdateCommand của đ i t ng SQLDataSource DSND.UpdateParameters.Add ("MatKhau", MKMoi); DSND.UpdateParameters.Add ("TenDangNhap", TenDN); DSND.Update (); } } Chú ý: Th tự thêm tham s ph i gi ng nh th tự s d ng tham s trong thu c tính UpdateCommand, DeleteCommand c a SqlDataSource. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 128 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 16: TH C HÀNH M c tiêu: Kết thúc bài thực hành, h c viên có thể: ™ Đ c và hiển th d li u s d ng c chế DataBinding ™ Đ c và hiển th d li u s d ng c chế DataBinding và điều khiển SqlDataSource ™ C p nh t d li u s d ng SqlDataSource và GridView. N i dung: C s d li u đ c s d ng: QLCB.MDF (c s d li u SQL Server) Bài 1.1: Hiển th danh sách cán b (bao g m H tên, ngày sinh, gi i tính, đ a chỉ, đi n tho i) trong m t Gridview, s d ng c chế DataBinding. H ớng d n: Đ c d li u bằng DataReader và Command. Sau đó "G n" GridView v i DataReader bằng cách đặt thu c tính DataSource c a GridView: Trang giao di n <%@ 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 sách cán b - version 1.0</title> </head> <body> <form id="form1" runat="server"> <h3>Danh sách cán b &nbsp; <asp:Button ID="cmdDisplay" runat="server" onclick="cmdDisplay_Click" Text="Hiển 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 (); //G n kết v i Gridview để hiển thị dgrDSCB.DataSource = Dr; dgrDSCB.DataBind (); Cmd.Dispose (); Conn.Close (); } } Bài 1.1 Hiển th thông tin về ng i dùng (G m h tên, bằng c p, ch c v ) m i khi ng dùng ch n Đ n v trong m t Dropdownlist. Trang giao di n <%@ 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>Thông tin về cán b theo phòng ban</title> </head> <body> <form id="form1" runat="server"> <h3>Danh sách phòng</h3> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 130 i Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <asp:DropDownList runat="server" ID="ddlDSPhong" AutoPostBack="true"> </asp:DropDownList> <br /> <h3>Danh sách cán b trực thu c</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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Dr = Cmd.ExecuteReader (); dgrDSCB.DataSource = Dr; dgrDSCB.DataBind (); } Cmd.Dispose (); Conn.Close (); } } Bài 2: Xây dựng các trang cho phép c p nh t thông tin về ng i dùng, phòng ban, ch c v , chuyên môn, bằng c p. S d ng c chế DataBinding, kết h p v i GridView t ng tự nh trong bài lý thuyết. Bài 3: bổ sung vào các trang trên ch c năng "Thêm m i".để cho phép thêm m i các b n ghi. Giao di n có d ng nh sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 132 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 17: Làm vi c với GridView 17.1 Giới thiệu tổng quan GridView có lẽ là m t điều khiển trình di n d li u quan tr ng nh t c a ASP.NET. Nó cho phép g n và hiển th d li u d ng b ng, trong đó m i hàng là m t b n ghi, m i c t ng v i m t tr ng d li u. Ngoài vi c hiển th , GridView còn có r t nhiều tính năng khác mà tr c đây ng i ta ph i viết r t nhiều dòng code m i có đ c, ví d : Đ nh d ng, phân trang, s p xếp, s a đổi, xóa d li u. GridView có thể g n kết d li u v i các ngu n nh DataReader, SqlDataSource, ObjectDataSource hay b t kỳ ngu n nào có cài đặt System.CollectionsEnumerable. Trong bài h c này, chúng ta sẽ đi tìm hiểu và s d ng m t s tính năng nổi b t c a GridView, t đó có thể áp d ng làm Project cho môn h c. 17.2 Tìm hiểu lớp GridView 17.2.1 Các thuộc tính và cột thuộc tính GridView ngoài vi c hiển th thu n túy các tr ng c a m t ngu n d li u, nó còn cho phép hiển th d i các hình th c khác (ví d d i d ng nút, d ng HyperLink, d ng checkbox…), các c t khác bổ tr cho vi c thao tác d li u nh Select, Update, Delete hoàn toàn có thể tùy biến trong GridView. Để chỉnh s a các c t d ng này, click ch n "smart tag" c a GridView và ch n "Edit Field" hoặc ch n thu c tính Columns c a GridView trong c a sổ thu c tính. Loại c t Mô tả BoundField Hiển th giá tr c a m t tr ButtonField Hiển th m t nút l nh cho m i m c trong GridView. Nút này cho phép b n có thể t o ra các nút tùy biến kiểu nh Add hay Remove. CheckBoxField Hiển th m t checkbox ng v i m i m c trong GridView. C t này th ng đ c dùng để hiển th các tr ng kiểu Boolean (Yes/No). CommandField Hiển th các nút l nh đã đ select, edit, hay delete. ng thu c ngu n d li u. c đ nh nghĩa sẵn để thực hi n các thao tác HyperLinkField Hiển th giá tr c a m t tr ng d i d ng siêu liên kết (hyperlink). Lo i c t này cho phép b n g n m t tr ng th hai vào URL c a siêu liên kết. ImageField Hiển th m t nh ng v i m i m c trong GridView. TemplateField Hiển th n i dung tùy biến c a ng i dùng cho m i m c d li u trong GridView, theo nh m u đ nh sẵn. Lo i c t này cho phép ta t o ra các c t tùy biến. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 133 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Các thu c tính: Thu c tính Mô tả n, hi n các đ GridLines ng viền c a GridView. ShowHeader Cho phép Hi n/ n ph n Header ShowFooter Cho phép Hi n/ n ph n Footer PageSize Get/Set cho biết m i trang ch a bao nhiêu dòng. PageCount Cho biết s trang c a ngu n d li u mà nó g n kết PageIndex Get/Set chỉ s c a trang đang đ AllowPaging Có cho phép phân trang không ( true = có) AllowSorting Có cho phép s p xếp không (true=có) AutoGenerateColumns Có tự đ ng sinh ra các c t ng v i các c t trong ngu n d li u hay không ? Mặc đ nh = true (có) AutoGenerateDeleteButton Tự đ ng t o ra c t Delete (true = tự đ ng) c hiển th AutoGenerateUpdateButton Tự đ ng t o ra c t Update (true = tự đ ng) AutoGenerateSelectButton Tự đ ng t o ra c t Select (true = tự đ ng) EditIndex (SelectedIndex) Đặt hàng nào đó về chế đ edit. EditIndex = 2 Î hàng th 3 (chỉ s 2) sẽ về chế đ edit. Nếu đặt EditIndex = -1 thì sẽ thoát khỏi chế đ Edit. SelectedIndex Tr về chỉ s c a dòng đang ch n Rows M t t p h p ch a các hàng c a GridView. Columns M t t p h p ch a các c t c a GridView. 17.2.2 Các style áp dụng cho GridView GridView r t linh ho t trong vi c trình bày d li u, nó cho phép ta đ nh d ng các ph n thông qua style. Ví d ta có thể đ nh d ng cho ph n Header, footer, các m c d li u, các hàng chẵn-lẻ v.v… B ng d i đây sẽ gi i thích rõ ý nghĩa m t s thu c tính: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 134 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Thu c tính style Mô tả AlternatingRowStyle Style áp d ng cho các hàng d li u chẵn-lẻ trong GridView. Khi đặt thu c tính này thì các hàng sẽ đ c hiển th v i đ nh d ng luân phiên gi a RowStyle và AlternatingRowStyle. EditRowStyle Style để hiển th hàng hi n đang đ FooterStyle Style áp d ng cho ph n Footer. HeaderStyle Style áp d ng cho ph n Header. PagerStyle Style áp d ng cho ph n phân trang (các trang << 1 2 3 … >>). RowStyle Style áp d ng cho các hàng d li u trong GridView control. Khi AlternatingRowStyle đ c thiết l p thì sẽ áp d ng luân phiên gi a RowStyle và AlternatingRowStyle. SelectedRowStyle Style áp d ng cho hàng đang đ c s a (Edit). c ch n (Selected)c a GridView. 17.2.3 Các s ki n GridView có r t nhiều sự ki n quan tr ng, các sự ki n này khi kích ho t sẽ cung c p cho ta nh ng thông tin h u ích trong quá trình x lý. Ví d , khi chúng ta click nút Update, nó sẽ kích ho t sự ki n Updating và tr về cho chúng ta các giá tr mà ng i dùng v a s a…. D i đây là b ng tổng h p m t s sự ki n hay dùng nh t: Tên s ki n Mô tả PageIndexChanged Xu t hi n khi ta click ch n các nút ( << 1 2 3 >>) trong hàng phân trang. PageIndexChanging Xu t hi n khi ng i dùng click ch n các nút ( << 1 2 3 >>) trong hàng phân trang nh ng TR C khi GridView thực hi n vi c phân trang. Ta có thể h y vi c phân trang t i sự ki n này. RowCancelingEdit Xu t hi n khi nút Cancel đ khỏi chế đ Edit. RowCommand Xu t hi n khi m t nút đ RowCreated Xu t hi n khi m t hàng m i đ c t o ra. Th d ng để s a n i dung c a hàng khi nó v a đ RowDataBound Xu t hi n khi m t hàng d li u đ c g n vào GridView. T i đây ta có thể s a đổi n i dung c a hàng đó. c click nh ng tr c khi thoát c click. ng đ c s c t o ra. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 135 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý RowDeleted Xu t hi n khi nút Delete c a m t hàng đ c click, nh ng sau khi GridView đã delete b n ghi t ngu n. RowDeleting Xu t hi n khi nút Delete đ c click nh ng tr ớc khi GridView xóa b n ghi t ngu n. T i đây có thể Cancel vi c Delete. RowEditing Xu t hi n khi nút Edit đ về chế đ s a. RowUpdated Xu t hi n khi nút Update đ update hàng d li u. RowUpdating Xu t hi n khi nút Update đ c click, nh ng tr ớc khi GridView update hàng d li u. SelectedIndexChanged Xu t hi n khi nút Select c a hàng đ c click nh ng sau khi GridView x lý xong thao tác Select. c click, nh ng tr ớc khi GridView c click, nh ng sau khi GridView SelectedIndexChanging Xu t hi n khi nút Select c a hàng đ c click nh ng tr ớc khi GridView x lý xong thao tác Select. Sorted Xu t hi n khi Hyperlink (tiêu đề c t) đ khi GridView thực hi n vi c s p xếp. Sorting Xu t hi n khi Hyperlink (tiêu đề c t) đ c click, nh ng tr ớc khi GridView thực hi n vi c s p xếp. Sự ki n này khi x y ra, nó sẽ cung c p cho chúng ta thông tin về tên c t v a đ c click. Dựa vào đó ta có thể thực hi n vi c s p xếp m t cách d dàng. c click, nh ng sau 17.2.4 Các phương thức Tên ph ơng thức Mô tả DataBind() G n kết d li u gi a GridView và ngu n d li u (đặt các thu c tính DataSource, DataTextField hoặc DataSourceID. DeleteRow(int) Xóa m t dòng trong GridView UpdateRow(int i, bool Valid) C p nh t m t dòng trong GridView. Sort(Biểu thức sx, h ớng sx) S p xếp dựa trên biểu th c và h ng. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 136 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 17.3 Các tính năng hỗ trợ của GridView 17.3.1 Phân trang Để thực hi n phân trang, c n đặt thu c tính AllowPaging = True. Khi phân trang, có thể tùy biến hiển th các trang (hiển th d ng các s 1 2 3 hay mũi tên << >>) bằng cách đặt các thu c tính con trong PagerSettings. Ví d : Hiển th t t c ng i dùng trong b ng tblUser trong GridView nh ng s d ng c chế phân trang. M i trang g m 5 b n ghi. Trang giao di n <%@ 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 sách ng i dùng</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> Nếu g n kết gridview v i DataReader/ DataTable/ DataSet thì c n ph i chỉ đ nh rõ chỉ s trang c n hiển th khi sự ki n PageIndexChanging đ c kích ho t, c thể nh sau: Trang giao di n <%@ 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 sách ng i dùng - Paging v i DataSet</title> </head> <body> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 137 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <form id="form1" runat="server"> <asp:Button runat="server" ID="cmdHienThi" Text="Hiển 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() { //Kết n i đến csdl SQL. Chú ý l nh đ c xâu kết n i trong t p 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 li u vừa l y đ c vào GridView để hiển thị dgrDSND.DataSource = Ds.Tables ["DSND"]; dgrDSND.DataBind (); //Gi i phóng khi không còn s d ng Ds.Dispose (); Da.Dispose (); Cn.Close (); } protected void cmdHienThi_Click (object sender, EventArgs e) { NapDuLieu (); //G i hàm n p d li u } //Sự ki n này kích ho t khi ng i dùng click s trang trên GridView // Khi ng i dùng click trang nào thì ta hiển thị trang đó trên browser V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 138 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý // Chỉ s của trang vừa ch n nằm trong e.NewPageIndex protected void dgrDSND_PageIndexChanging (object sender, GridViewPageEventArgs e) { dgrDSND.PageIndex = e.NewPageIndex; // Đặt l i chỉ s trang c n hiển thị NapDuLieu (); // N p l i d li u } } 17.3.2 Tính năng t động sắp x p Tính năng này cho phép d li u trong GridView sẽ tự đ ng đ c s p xếp theo giá tr c a c t mà ng i dùng click. đây ta có thể s p xếp theo chiều tăng (Asscending) hoặc gi m (Descending). Để b t tính năng này, c n đặt thu c tính AllowSorting = true trong GridView. Khi ng i dùng click chu t vào m t c t tiêu đề nào đó c a GridView thì sự ki n Sorting sẽ đ c kích ho t, t i đây ta c n ph i chỉ rõ cho GridView biết là s p theo c t nào (SortExpression ) và theo chiều tăng hay gi m (SortDirection). Ví d : Hi n th danh sách ng theo chiều tăng d n. Trang giao di n i dùng trong b ng tblUser, khi ng i dùng click vào m t c t thì s p %@ 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 sách ng i dùng</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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý { protected void dgrDSND_Sorting (object sender, GridViewSortEventArgs e) { e.SortDirection= SortDirection.Descending; } } 17.3.3 Các mẫu hiển thị - Template ASP.NET cung c p cho chúng ta sẵn m t s Template (m u) để hiển th GridView cũng khá đẹp. Vì v y, b n có thể s d ng ngay các template này khi xây dựng ng d ng. Cách th c ch n template cho GridView nh sau: b1: M trang chế đ Design b2: Ch n GridView và ch n smart tag, tiếp theo ch n AutoFormat b3: Ch n Format trong danh sách. Tổ hợp màu được chọn từ Template có sẵn. Sau khi ch n Template, Asp sẽ tự đ ng t o ra các thu c tính (thẻ) t ng ng trong GridView, t i đây b n có thể tiếp t c tùy biến thêm theo nh ý mu n. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 140 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 17.4 Tạo các cột tùy biến HyperLink, BoundColunm… 17.4.1 Tạo cột BoundField thủ công Để t o các c t th công, c n đặt thu c tính AutoGenerateColumns = "Fase", sau đó so n th công các c t trong c a s Edit Columns. Ví dụ: Hiển thị danh sách người dùng nhưng các cột tạo thủ công Trang giao di n <%@ 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 sách ng i dùng</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="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> </Columns> </asp:GridView> </form> </body> </html> 17.4.2 Tạo một cột hyperlink, Hiển th danh sách ng i dùng (b ng tbluser) trong đó có thêm c t "Chi ti t" để khi ng i dùng click chu t vào hyperlink này thì chuyển đến trang hiển th chi tiết ng i dùng. Trong ASP.NET, GridView có kh năng hiển th (render) các tr ng có ch a HyperLink thành các thẻ <a href …> trên trình duy t. Do v y, về ý t ng chúng ta c n ph i t o m t c t m i có ch a sẵn Hyperlink sau đó "Chèn" tr ng này vào c t Hyperlink c a GridView. Chú ý: Trong SQL, thông th ng trong câu l nh SELECT chúng ta chỉ ch n các tr ng sẵn có trong b ng CSDL, tuy nhiên hoàn toàn có thể t o ra m t c t m i kiểu nh sau: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 141 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý SELECT Ten + Ho as HoVaTen FROM … Trong đó: Ten, Ho là 2 tr ng c a b ng, HoVaTen là m t c t m i (Do ta t o ra ngay trong câu l nh SELECT, còn trong b ng CSDL thì không có tr ng này) Hay một ví dụ khác: SELECT TenHang, NgayXua, SoLuong, DonGia, SoLuong * DonGia As ThanhTien … Tr ng ThanhTien là m t tr ng m i. Giá tr c a nó bằng giá tr SoLuong * DonGia c a b n ghi hi n t i. Để t o c t hiển th đ c HyperLink, GridView cung c p 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 sách ng i dùng</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="Tên đăng nhập" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" SortExpression="MatKhau" /> <asp:HyperLinkField HeaderText="Chi tiết" DataNavigateUrlFields="ChiTiet" Text="Xem chi tiết" /> </Columns> </asp:GridView> </form> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 142 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </body> </html> 17.4.3 Tạo c t Image T ng tự nh c t HyperLink, GridView cũng có m t c t chuyên để hiển th hình nh (ImageField) nếu tr ng d li u g n v i nó ch a đ ng d n đến nh nằm trong ng d ng. Để t o c t cho phép hiển th Image, dùng thẻ <asp:ImageField DataImageUrlField ../> Trang giao di n <%@ 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 sách ng i dùng</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="Tên đăng nh p" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="M t kh u" SortExpression="MatKhau" /> <asp:ImageField DataImageUrlField="HinhAnh" HeaderText="Hình 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 17.5 Tạo và xử lý các cột Select, Edit, Delete, Update… 17.5.1 Thêm cột Select, Edit - Update, Delete GridView không chỉ hiển th đ c các b ng d li u mà còn h tr r t t t trong vi c chỉnh s a và xóa d li u. Đặc bi t khi ngu n d li u là SqlDataSource thì vi c s a và xóa hoàn toàn tự đ ng, không c n ph i viết b t kỳ dòng code nào. Để b t tính năng này, c n bổ sung thêm thu c tính vào GridView v i 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 sách ng i dùng</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="Tên đăng nh p"/> DataField="HoVaTen" HeaderText="H và tên"/> DataField="MatKhau" HeaderText="M t kh u" /> DataField="QuyenHan" HeaderText="Quyền h n" /> <asp:CommandField HeaderText="Ch n" ShowSelectButton="True" /> <asp:CommandField HeaderText="Sửa ch a" ShowEditButton="True"/> <asp:CommandField HeaderText="Xóa" ShowDeleteButton="True" /> <asp:CommandField HeaderText="Thêm" 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 S u t m b i: www.daihoc.com.vn 144 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Hiển th các c t l nh (Select, edit, delete) 17.5.2 Cập nhật d li u Ví d 1: Xây dựng trang web cho phép hiển th và c p nh t (Update) tr ng Họ và tên và Mật khẩu c a b ng tblUser: Các b c c n tiến hành: - T o m t ngu n d li u SqlDataSource - Thêm thu c tính UpdateCommand v i câu l nh c p nh t Sql. - T o GridView và đặt thu c tính DataKeyNames = "Tên tr ng Khóa c a b ng CSDL" - G n kết GridView v i SqlDataSource bằng cách đặt DataSourceID c a GridView = ID c a SqlDataSource. Trang giao di n <%@ 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 sách ng i dùng</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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý AutoGenerateColumns="False" DataKeyNames="TenDangNhap"> <Columns> <asp:BoundField DataField="TenDangNhap" HeaderText="TênĐN" ReadOnly="true"/> <asp:BoundField DataField="HoVaTen" HeaderText="H và tên" ReadOnly="true"/> <asp:BoundField DataField="MatKhau" HeaderText="M t kh u" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyền h n" /> <asp:CommandField HeaderText="Sửa ch a" ShowEditButton="True"/> </Columns> </asp:GridView> </form> </body> </html> K t quả sau khi chạy trang trên. Chú ý: Khi s d ng ngu n d li u là SqlDataSource và trong câu l nh Update/Delete nếu ta đặt tên các tham s gi ng v i tên c a các tr ng d li u (ví d MatKhau=@MatKhau) thì SqlDataSource sẽ tự đ ng t o các tham s sau đó truyền giá tr mà ng i dùng v a m i nh p giúp chúng ta. Vì v y không c n ph i viết các câu l nh c p nh t t ng minh. Trang Code: Không ph i viết vì khai báo trên sẽ tự đ ng c p nh t !!!. 17.5.3 Xóa d li u Ví d 2: Xây dựng trang web cho phép xóa b n ghi trực tiếp trên GridView. Vi c xóa cũng hoàn toàn t ng tự nh Update. T c là ta cũng c n ph i thêm thu c tính DeleteCommand vào 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 S u t m b i: www.daihoc.com.vn 146 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <head runat="server"> <title>C p nh t danh sách ng i dùng</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="Tên" ReadOnly="true" /> <asp:BoundField DataField="HoVaTen" HeaderText="H và tên" ReadOnly="true"/> <asp:BoundField DataField="MatKhau" HeaderText="M t kh u" /> <asp:BoundField DataField="QuyenHan" HeaderText="Quyền h n" /> <asp:CommandField HeaderText="S a ch a" ShowEditButton="True" /> <asp:CommandField HeaderText="Xóa" ShowDeleteButton="True" /> </Columns> </asp:GridView> </form> </body> </html> Xóa tr c ti p trên GridView. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 147 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 18: TH C HÀNH M c tiêu: Kết thúc bài thực hành này h c viên có thể: - Sự d ng đ c kh năng s p xếp và phân trang c a GridView v i các c t sinh ta tự đ ng hoặc th công. - C p nh t d li u (S a và Xóa) trực tiếp trên GridView. - T o ra các c t tùy biến: HyperLink và Image N i dung: Bài 1: Hiển th thông tin v n t t (g m H và tên, đ a chỉ, ch c v ) về cán b trong c s d li u QLCB. Trong đó thực hi n phân trang v i kích th c trang đ c l u trong file web.config, ngoài ra còn cho phép ng i dùng s p xếp b ng hiển th bằng cách click chu t lên các c t tiêu đề. H ớng d n: Để l u thông s nào đó trong file web.config, c n thêm ph n t vào cặp thẻ <AppSettings>. Ví d : Ta c n l u thiết l p về kích th c c a trang, khi đó web.config sẽ có d ng: …………………….. <appSettings> <add key="PageSize" value="5"/> </appSettings> …………………….. Khi đó, để đ c giá tr này, ta viết: System.Configuration.ConfigurationManager.AppSettings ["PageSize"].ToString (); Minh h a: Trang giao di n <%@ 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>Hiển thị và s p xếp v i 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 S u t m b i: www.daihoc.com.vn 148 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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ú ý: Nếu mu n s p xếp theo nhiều c t thì c n đ a danh sách tên c t (tr SortExpression. Các ph n t cách nhau b i d u ch m ph y. ng đó) vào thu c tính Bài 2: T o m t trang hiển th thông tin chi tiết về ng i dùng trong b ng tblUser. Trong đó có thêm c t chi tiết (d ng Hyperlink) để khi ng i dùng click ch n thì chuyển t i m t trang m i là UserDetail.aspx, t i đây sẽ hiển th toàn b các thông tin khác c a ng i dùng v a đ c ch n. Giao di n H ớng d n: C n t o thêm m t c t – ví d ChiTiet - ngay trong câu l nh SELECT, sau đó "Chèn" c t m i này vào tr ng HyperLinkField c a GridView. Minh h a: Trang giao di n (Không 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 sách ng i dùng</title> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 149 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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="Tên đăng nh p" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="M t kh u" SortExpression="MatKhau" /> <asp:HyperLinkField DataNavigateUrlFields="ChiTiet" HeaderText="Chi tiết" Text="Xem chi tiết" /> </Columns> </asp:GridView> </form> </body> </html> Trang UserDetail.aspx: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 150 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 tiết ng i dùng</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 tiết ng i dùng đặt t i đây</h2> <table> <tr> <td class="CotTrai">H và tên</td> <td><asp:Label runat="server" ID="lblHVT"></asp:Label></td> </tr> <tr> <td class="CotTrai">Tên đăng nh p</td> <td><asp:Label runat="server" ID="lblTenDN"></asp:Label></td> </tr> <tr> <td class="CotTrai">M t kh u</td> <td><asp:Label runat="server" ID="lblMK"></asp:Label></td> </tr> <tr> <td class="CotTrai">Quyền h n</td> <td><asp:Label runat="server" ID="lblQH"></asp:Label></td> </tr> <tr> <td class="CotTrai">Tr ng thái</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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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 (); // Hiển thị thông tin chi tiết ra các nhãn 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 (); } } Bài 3: T o m t trang PhoToNguoiDung, đó hiển th 3 c t thông tin là HoVaTen, TrangThai, QuyenHan và nh t ng ng. Gi s th m c nh có tên là Images và nằm cùng v i trang web. H ớng d n: C n t o thêm m t c t m i – ví d đặt tên là DuongDanAnh – sau đó "Chèn" tr ng này vào ImageField c a GridView. Minh h a: Trang code giao di n <%@ 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 sách ng i dùng</title> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 152 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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="Tên đăng nh p" SortExpression="tendangnhap" /> <asp:BoundField DataField="HoVaTen" HeaderText="H và tên" SortExpression="HoVaTen" /> <asp:BoundField DataField="MatKhau" HeaderText="M t kh u" SortExpression="MatKhau" /> <asp:ImageField DataImageUrlField="HinhAnh" HeaderText="Hình ảnh" > </asp:ImageField> </Columns> </asp:GridView> </form> </body> </html> K t quả Î K t quả V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 153 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Bài 4: T o m t trang CapNhatCanBo, trong đó cho phép ng chỉ trực tiếp. (Trên GridView.) và xóa m t cán b b t kỳ. i dùng s a đổi H tên và Đ a H ớng d n: Làm t ng tự nh bài lý thuyết (Thêm các c t Edit, Delete vào GridView) Minh H a: Trang giao di n (Không 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 sách cán 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à tên" /> <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="S a ch a" ShowEditButton="True" /> <asp:CommandField HeaderText="Xóa" ShowDeleteButton="True" /> </Columns> </asp:GridView> </form> </body> </html> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 154 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 19: Sử dụng Templates 19.1 Giới thiệu tổng quan Trong các bài tr c, chúng ta đã tìm hiểu kh năng trình di n d li u r t m nh c a GridView, nó có thể phân trang tự đ ng, s p xếp tự đ ng và c p nh t d li u tự đ ng… Tuy nhiên, trong m t s tr ng h p c thể thì chúng ta v n r t c n ph i có sự trình bày linh ho t h n, ví d : Chúng ta mu n trình bày d li u theo chiều d c chẳng h n. v..v… R t may là GridView (và các điều khiển khác) đều có c chế để h tr cho chúng ta kh năng tùy biến r t cao – đó là TEMPLATE !. Template – d ch ra Tiếng Vi t – có thể hiểu là các M u đ nh sẵn. Cái m u này do l p trình viên tự thiết kế. Trong m u này, chúng ta có thể thêm b t c thẻ HTML hay thẻ server h p l . M i l n x lý m t m c d li u (m t b n ghi) thì h th ng sẽ tự đ ng đ a m c d li u này vào bên trong m u. Bài h c này sẽ gi i thi u thêm về Template c a các điều khiển nâng cao là GridView, DataList và Repeater. 19.2 Các điều khiển hỗ trợ Templates 19.2.1 Một s đi u khiển hỗ trợ Template thư ng dùng Trong asp.NET có r t nhiều điều khiển h tr kh năng tùy biến bằng Templates. M t s điều khiển phổ biến h tr Template bao g m: ™ GridView ™ DataGrid ™ DataList ™ Repeater 19.2.2 Các loại Template Các điều khiển đều có m t s ph n hiển th t ng tự nhau: Nh ph n tiêu đề (Header), ph n n i dung d li u (DataItem) và ph n chân trang (Footer). Ý nghĩa c thể c a t ng ph n này nh sau: ™ HeaderTemplate: Là ph n cho phép đ nh d ng tiêu đề tr c n i dung hiển th . Th ng là tên các tr ng trong CSDL,… ™ ItemTemplate: Là ph n cho phép đ nh d ng cách th c hiển th m c d li u (b n ghi). Ph n này đ c t o ra m i khi m t dòng d li u đ c g n kết vào điều khiển. ™ AlternateTemplate: Ph n này cho phép đ nh d ng cách th c hiển th c a ph n t thu c hàng chẵn. ™ FooterTemplate: Cho phép đ nh d ng chân trang sau n i dung hiển th . Ngoài ra, m i điều khiển còn có thêm các thu c tính khác n a. Khi s d ng Template, thông th ng chúng ta có mong mu n là hiển th m t s tr ng d li u nào đ y. Vì v y, asp.net cung c p m t hàm g i là Eval("Tên_M c/Tr ng d li u") cho phép chúng ta l y d li u c a m t tr ng thu c b n ghi hi n hành. Giá tr c a hàm Eval() này đ c đ a vào trong thẻ hi n hành thông qua c chế DataBind, kiểu nh sau: Họ và tên: <b> <%# Eval ("HoVaTen") %></b> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 155 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý 19.3 Repeater control, DataList control, GridView control 19.3.1 Tạo template với GridView. Ví d 1: T o m t trang web hiển th danh sách H và tên ng i dùng trong b ng tblUser bài tr c ta đã hiển th đ c m t cách d dàng, tuy nhiên sau đây chúng ta sẽ s d ng Template c a GridView. Trang giao di n <%@ 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 sách ng i dùng - s d ng 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à tên"> <ItemTemplate> <%# Eval("HoVaTen") %> </ItemTemplate> </asp:TemplateField> </Columns> Đặt n i dung b t kỳ (Có thể là text, html , server controls …) </asp:GridView> </form> </body> </html> Ví d 2: Nh ví d 1 nh ng đặt h tên vào các TextBox Trang giao di n ……………………………………………………………………………………………………………… <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="H và tên"> <ItemTemplate> <asp:TextBox runat="server" Text='<%# Eval("HoVaTen") %>'> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 156 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </asp:TextBox> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> ……………………………………………………………………………………………………………… Ví d 3: Hiển th h tên và TrangThai. Trong đó TrangThai đ h và tên. Trang giao di n c đặt trong ngoặc ngay sau ……………………………………………………………………………………………………………… <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="Họ và tên"> <ItemTemplate> <%# Eval("HoVaTen") %> ( <%# Eval("TrangThai") %> ) </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> ……………………………………………………………………………………………………………… Ví d 4: Hiển th h tên và nh Trang giao di n <%@ 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 sách ng i dùng - s d ng 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à tên & ảnh "> <ItemTemplate> <%# Eval("HoVaTen") %> <br /> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 157 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <asp:Image runat="server" ImageUrl='<%# Eval("HinhAnh")%>'/> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html> Thêm nhi u c t: Để thêm nhiều c t, ta c n thêm cặp thẻ <asp:TemplateField > </ asp:TemplateField> Trong đó, m i cặp thẻ sẽ t ơng ứng với m t C T của GridView . Ví d 5: Hiển th các tr ng HoVaTen, MatKhau, Hình ảnh trên GridView, m i tr hiển th trên m t c t và H tên ch đ m. Trang giao di n ng <%@ 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 sách ng i dùng - s d ng 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à tên"> <ItemTemplate> <b><%# Eval("HoVaTen") %></b> <br /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Trạng thái"> <ItemTemplate> <i><%# Eval("TrangThai") %></i> <br /> </ItemTemplate> </asp:TemplateField> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 158 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <asp:TemplateField HeaderText="Hình ả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: Hiển th d li u trong m t c t ……….. Nh ví d 5 …………………………………………………………………………………………… <asp:GridView ID="GridView1" runat="server" Width="100%" DataSourceID="SqlDataSource1" ShowHeader="false" AutoGenerateColumns="false" AllowPaging="true"> <Columns> <asp:TemplateField HeaderText="THÔNG TIN NG I DÙNG"> <ItemTemplate> <b> H và tên: <%# Eval("HoVaTen") %></b> <hr/> Tên đăng nh p: <%#Eval("TenDangNhap") %> <br /> Quyền h n : <%#Eval("QuyenHan") %> <br /> Tr ng thái: <%#Eval("TrangThai") %> <br /> Hình nh : <br /><asp:Image runat="server" ImageUrl='<%#Eval("HinhAnh") %>' /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> ……….. Nh ví d 5 …………………………………………………………………………………………… C p nh t d li u Để cho phép s a d li u c a m t tr ph ng th c Bind, d ng nh sau: ng, ta c n đặt thu c tính text c a tr ng đó vào trong <asp:TextBox Text='<%# Bind("Tên_Tr ng") %>' runat="server" id="textBox"/> </ asp:TextBox> Ví d 7: C p nh t h s cán b (Chỉ c p nh t tr ng "Bản thân") ……….. 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <Columns> <asp:TemplateField HeaderText="THÔNG TIN CÁN B "> <ItemTemplate> <b> H và tên: <%# Eval("HoVaTen") %></b> <hr/> Mã Cán b : <%#Eval("MaCanBo") %> <br /> Ngày sinh : <%#Eval("NgaySinh") %> <br /> Địa chỉ: <%#Eval("DiaChi") %> <br /> B n thân : <%# Eval("BanThan") %> </ItemTemplate> <EditItemTemplate> <b> H và tên: <%# Eval("HoVaTen") %></b> <hr/> Mã Cán b : <%#Eval("MaCanBo") %> <br /> Ngày sinh : <%#Eval("NgaySinh") %> <br /> Địa chỉ: <%#Eval("DiaChi") %> <br /> B n thân : <asp:TextBox TextMode="MultiLine" runat="server" id="txtBanThan" Text='<%# Bind("BanThan") %>'> </asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:CommandField ButtonType="Button" EditText="S a" ShowEditButton="true" /> </Columns> </asp:GridView> ……….. Nh ví d 5 ……………………………………………………………………………………… 19.3.2 Tạo template với DataList DataList cho phép ta hiển th d i d ng danh sách. Danh sách này có thể chia làm nhiều c t nh m t s ng d ng th ng th y trên Internet. Ví d 8: Hiển th nh nh hình trên; ……………………………………………………………………………………………………………… <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à tên: <b> <%# Eval ("HoVaTen") %></b> <br /> Quyền h n : <%# 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 S u t m b i: www.daihoc.com.vn 160 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý </form> </body> ……………………………………………………………………………………………………………… Kết quả sau khi chạy trang ở trên 19.3.3 Tạo Template với Repeater (light-weight) Repeater cũng là m t điều khiển có kh năng hiển th d li u d i d ng danh sách. Khi đ c g n v i ngu n d li u, nó sẽ l n l t thực thi n i dung nằm trong ph n Template m i khi m t b n ghi đ c đ c t ngu n. Tuy điều khiển này không có kh năng phân trang, s p xếp nh GridView nh nó là m t điều khiển chiếm ít tài nguyên c a h th ng (vì v y đ c g i là điều khiển Light-weight), do đó chúng ta có thể dùng trong nh ng tr ng h p mà đó tài nguyên đóng vai trò quan tr ng. Repeater cho phép chúng ta tùy biến các m c t d ng Template. ng tự nh GridView và DataList, đó là s Ví d 9: Hiển th h tên và nh minh h a ng khiển Repeater. i dùng trong b ng tblUser s d ng điều V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 161 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn 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>Hiển thị danh sách ng i dùng</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à tên: <%# Eval("HoVaTen") %> <br /> <asp:Image runat="server" ImageUrl='<%# Eval("HinhAnh") %>' Width="100px" Height="100px" /> <hr /> </ItemTemplate> </asp:Repeater> </form> </body> </html> 20. Đóng gói website Sau khi hoàn t t dự án thì m t khâu quan tr ng n a c n ph i thực hi n để đ m b o v n đề b n quyền đó là biên d ch và xu t b n ng d ng web. Vi c xu t b n (Publish) ng d ng sẽ giúp biên d ch các file code behind (file CS) thành các assemblies (file DLL). Khi đó, ng d ng ch y sẽ nhanh h n và b o m t h n. Để xu t b n web, Right click vào Tên c a Solution và ch n m c Publish. Sau đó m t h p tho i hi n ra cho phép ta ch n th m c sẽ l u kết qu . ng d ng đ c biên d ch này có thể copy vào Server để thực thi. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 162 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý BÀI 20: TH C HÀNH M c tiêu: Kết thúc bài h c này, h c viên có thể ™ S d ng đ c tính năng Template để trình di n và c p nh t d li u theo yêu c u ™ S d ng đ c DataList để trình di n d li u d i d ng c t. ™ S d ng ListView kết h p v i DataPager để hiển th và duy t các b n ghi. N i dung: Bài 1: Hiển th danh sách cán b (bao g m h tên, đ a chỉ, đi n tho i) trong b ng tblCanBo. Trong đó H tên ch đ m. Hướng dẫn: - Đặt thu c tính AutoGenerateColumns = "false" - Tự t o các c t cho GridView bằng cặp thẻ <asp:TemplateField> …</> - Đặt n i dung c n hiển th ( đây là H tên, đ a chỉ, đi n tho i) vào các c t bằng cách đặt bên trong cặp thẻ <asp:DataItemTemplate> </> Danh sách cán bộ Minh họa: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ThongTinCanBo.aspx.cs" Inherits="Lession_20_ThongTinCanBo" %> <head runat="server"> <title>Thông tin về cán 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à tên"> <ItemTemplate> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 163 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <b><%# Eval("HoVaTen") %></b> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Địa chỉ"> <ItemTemplate> <%# Eval("DiaChi") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Đi n tho i"> <ItemTemplate> <%# Eval("SoDienThoai") %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html> Bài 2: Bổ sung thêm tr ng Photo vào b ng tblCanBo, tr ng Photo này sẽ l u đ ng d n t i file nh c a m i cán b . Sau đó xây dựng trang web hiển th thông tin cán b (bao g m các tr ng H tên, đ a chỉ và nh t ng ng). Hướng dẫn: - Vì tr ng Photo đã ch a đ ng d n đến file nh r i, vì v y để hiển th hình nh thay vì văn b n text thu n túy, ta sẽ t o thêm ph n t <asp:Image>, trong đó thu c tính ImageUrl sẽ đ c gán giá tr c a tr ng Photo t ng ng. c thể là : <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' /> - Để đặt kích th c nh nh nhau, có thể thêm thu c tính Width và Height - Tr c giá tr <%# Eval("Photo") %> c n có thêm cặp d u nháy đ n để đ m b o tính đúng đ n khi đ ng d n nh ch a d u cách. Yêu c u về giao di n V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 164 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Minh họa: <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="Both" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="H và tên"> <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> Bài 3: Hiển th danh sách cán b d ng chi tiết. Thông tin đ c dàn trang theo chiều d c (Flow). Hướng dẫn: T o m t c t duy nh t, nh ng m i dòng c a c t đó sẽ ch a t t c các tr ng thông tin c n hiển th . V i m i hàng đ c t o ra, ta sẽ đặt vào m t table có kích th c c đ nh, b ng này có 1 hàng và 2 c t. C t th nh t sẽ ch a thông tin d ng text nh h tên, đ a chỉ, đi n tho i và mô t b n thân. C t th hai sẽ hiển th hình nh t ng ng. Kết qu V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 165 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Minh họa: <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="None" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Trích ngang danh sách cán b "> <ItemTemplate> <table border="0px" width="300px"> <tr> C t1 C t2 <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> </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> Bài 3: Hiển th danh sách ng i dùng d i d ng Flow (tuyến tính) nh bài 3, nh n có thêm ch c năng c p nh t và Delete. THông tin hiển th g m H tên, Đ a chỉ, Đi n tho i. Trong đó, tr ng đ a chỉ sẽ hiển th d ng Text Multiline khi s a. Hướng dẫn: T o các template nh bài 3, nh ng thêm 2 command là Edit và Delete. Trong đó các tr mu n s a ch a sẽ đặt vào các Textbox và dùng hàm <%# Bind("Tên_Tr ng")%>. ng Minh họa: V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 166 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Kết 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>C p nh t danh sách cán 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 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý <asp:GridView runat="server" ID="DSCB" Width="100%" GridLines="both" DataKeyNames="MaCanBo" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="H và tên"> <ItemTemplate> Ph n template <b><%# Eval("HoVaTen") %></b> <br /> cho ch đ Địa chỉ: <%# Eval("DiaChi") %> <br /> th ng Đi n tho i: <%# Eval("SoDienThoai") %> (ch a sửa) </ItemTemplate> <EditItemTemplate> <b>H tên: </b><br /> <asp:TextBox runat="server" ID="txtHVT" Width="98%" Text= '<%# Bind("HoVaTen") %>' > </asp:TextBox> <br /> Ph n template cho ch đ soạn thảo (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>Đi n tho i: </b> <br /> <asp:TextBox runat="server" ID="txtDT" Width="98%" Text= '<%# Bind("SoDienThoai") %>'> </asp:TextBox> </EditItemTemplate> </asp:TemplateField> <asp:CommandField HeaderText="S a ch a" EditText=" S a" UpdateText="L u" ButtonType="Link" CancelText=" Hủy bỏ" ShowEditButton="true" /> <asp:CommandField HeaderText="Xóa" DeleteText=" Xóa" 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 S u t m b i: www.daihoc.com.vn 168 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Bài 4: Hiển th thông tin trích ngang về ng i dùng trong b ng tblUser, trong đó d i m i ng i dùng thêm m t Hyperlink là "Xem chi ti t" để khi ng i dùng click vào hyperlink này thì m trang UserDetail.aspx và hiển th chi tiết thông tin về ng i dùng đó. Yêu c u thêm: Danh sách này hiển th làm 3 c t. H ớng d n: Để hiển th thông tin d i d ng c t, ta s d ng điều khiển DataList. Trong m i Hyperlink ta sẽ t o liên kết đến trang UserDetail.aspx và truyền cho trang này ID (trong tr ng h p này là TenDangNhap) c a ng i dùng t ng ng. Dựa vào ID này, trang UserDetail.aspx sẽ đ c (dùng Request.QueryString["TenNguoiDung"]) sau đó select thông tin ng v i ID đó và hiển th . Minh h a: <%@ 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 sách cán 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 /> Quyền hạn : <%# Eval("QuyenHan") %> <br /> <asp:Image Width="100px" Height="100px" runat="server" ImageUrl= '<%# Eval("HinhAnh") %>' /><br /> <a href ='UserDetail.aspx?TenDangNhap=<%#Eval("TenDangNhap") >'> Xem chi tiết </a> <hr /> </ItemTemplate> </asp:DataList> </form> </body> </html> V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 169 S u t m b i: www.daihoc.com.vn Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Kết qu . Bài 4: Hiển th danh sách ng i dùng d i d ng c t và thực hi n phân trang. Hướng dẫn: Để thực hi n t o các c t, có thể s d ng điều khiển DataList, ngoài ra ta còn m t điều khiển khác cũng r t m nh cho phép hiển th d i d ng các c t nh ng có thêm kh năng phân trang, đó là: ListView controls. Các bước thực hiện: B1. T o ngu n d li u SqlDataSource nh nh ng bài tr c. B2. T o m t ListView và g n v i ngu n d li u SqlDataSource (nh bài tr c) B3. C u hình cho ListView (ch n smart tag), sau đó click ch n "Config ListView…" B4: Ch n các thông s nh hình bên d B5: M trang web. i. L u ý: Chúng ta hoàn toàn có thể thay đổi format c a ListView bằng các vào Source code editor để s a. M t cách phân trang khác là t o m t DataPager và g n vào ListView, Khi đó ta chỉ c n đặt thu c tính PagedControlID="ListView1". Cách này có u điểm là ph n trang có thể đặt b t kỳ vị trí nào trên màn hình. V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 S u t m b i: www.daihoc.com.vn 170 Tài liệu khóa học lập trình web với ASP.NET – Biên soạn: Nguyễn Minh Quý Kết quả hiển thị V1.0 – http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 171 S u t m b i: www.daihoc.com.vn