Bai Giang Khoa ASP Net Print Version 8894

Tài liệu khóa học lập trình web với ASP.
NET - Biên soạn: Trung tâm Hưng Yên

Aptech _____________________________________________________________________________________________________________________________________________________________________________
M ỤC LỤC
1.1. Giới thiêu tổng quan công nghê .N E T ..........................................................................6
1.1.1 Sư ra đòi của .NET......................................................................................................6
1.1.2 -NF.T 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.N EĨ 200% ....................................... .............. ...... .................. 11
1.4. Giới thiêu môi trường tích hơp (IDE) của ASP.NET................................................. 11
1.5. Tao/lưu/mở/chay ứng dung ASP.NET........................................................................13
1.5.1 Tao mói.....................................................................................................................13
1.5.2 T.Ư11 ứng dụng Wph............................................................................................................................................... 14
1.5.3 MỞ (Chạy) ứng dụng................................................................................................ 14
1.6. Cơ bản về c s s và D H T M L,mmuuumuumuuuauuuum^ ............................. 15
1.6.1 c s s ............................................................................................................................15
1.6.2 DHTML.....................................................................................................................15
1.7. Định dạng các thẻ sử dụng c s s ...................................................................................16
1.7.1 Đinh dang ỏ mức dòng (Inline).................................................................................. 16
1.7.2 Đinh dang bòi bô chon 1D......................................................................................... 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ì..........................................................................................18
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à c s s bằng JavaScript................................... 20
1.8.1 Truv xuất các thuộc tính của thẻ................................................................................20
1.8.2 Truy xuất các thuôc tính c s s .....................................................................................21
BẢI S ổ 2: T ĩ ĩ ư c I1ÀNH.............................................................................................23
BẢI SỐ 3: ASP.NET và Web form............................................................................. 36
3.1 Mô hình lâp trình phía máy chủ.....................................................................................36
3.2 Cơ chê xử lý file ASP.NET phía máy chủ....................................................................38
3.3 Môt số ví du minh hoa...................................................................................................41
3.3.1 Yêu cầu xử lý tai phía server thông qua Runat=”Server”............................................ 41
3.3.2 Yêu cáu xử lý bẽn phía server thông qua căp thẻ <% %>...........................................42
3.3.3 Yêu cầu xử lý bên server thông qua Script.................................................................43
3.3.4 Yêu cầu xử lý bên phía server bằng cách đăt trong Code file..................................... 44
3.4 Webform trọng ASP,NET............................................................................................... 45
3.5 Tìm hiểu cấu trúc trang ASP.NET.................................................................................45
3.6 Code behind và viết code phía Server............................................................................49
3.7 HTML Server Controls và Web controls........................................................................49
3.7.1 Giới thiêu.......... ....................................................................................................... 49
3.7.2 Cách thức tao phán tử HTML Server Control và ASP.NET control........................... 49
BÀI 4: THƯC HÀNH..................................................................................................... 52
BÀI 5: Tìm h iểu và sử dụng các Server/Ajax Controls........................................ 61
5.1 HTML Server Controls...................................................................................................61
5.2 Web server Controls....................................................................................................... 61
5.2.1 Khai báo (tao các phán tử web server control)........................................................... 61
5.2.2 Cơ chẽ xử lý các phần tử web server conựol.............................................................62
5.2.2 Thưc thi các câu lênh tai phía server......................................................................... 67
5.2.3 Mô hình xử lý sư kiên trong ASP.NET......................................................................67
VI.0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

1
Tài liệu khóa học lập trình web với ASP.NET - Biên soạn: Trung tâm Huhg Yên
Aptech _____________________________________________________________________________________________________________________________________________________________________________
5.3 Ajax Control Toolkit...................................................................................................... 69

5.3.1 Giói thiêu..................................................................................................................69
5.3.2 Hướng dằn sử dung môt số Aiax Control cơ bản......................................................69
5.4 Thảo luân công nghê Aịax............................................................................................ 71
BẢI 6: THƯC HÀNH.................................................................................................... 72
BẢĨ 7: T ạo và sử dụng Custom Control.................................................................. 77
7.1 Giới thiêu User Custom Control....................................................................................77
7.2 Các bước tạo User Custom contro]............................................................................... 77
7.3 Thêm các thuôc tính, phương thức và SƯ kiên vào ucc .......................................... 80
7.3.1 Thêm thuôc tinh vào u c c ......................................................................................... 80
7.3.2 Thêm phương thức vào u c c .....................................................................................82
7.3.3 Thêm SƯ kiên vào u c ................................. ............................................................ 83
7.4 Truy cảp thuôc tính, phương thức của các phần tử con trong u c c ..........................83
7.5 Minh hoa tao môt số điều khiển.................................................................................. 85
BẢĨ 8: THỰC HÀNH........................................................................................................ 90
BÀI 9: Các đ ố i tượng trong ASP.NET.........................................................................98
9.1 Request Object........................v.......................................................................................98
9.1.1 Đổi tương Request dùng để làm gì ?..........................................................................98
9.1.2 Các thành phán (thuốc tính và phương thức) chính................................................... 99
9.1.3 Ví du sử dung........................................................................................................... 99
9.2 Response Object.............................................................................................................101
9.1.1 Đổi tương Response dùng để lầm gì ?...................................................................... 101
9.1.2 Các thành phần (thuôc tính và phương thức') chính..................................................101
9.1.3 Ví du sử dụng...............................................■ ■
■■■...................... ...................... ...... 101
9.3 Sprvpr Ohjprf................................................................................................................103
9.3.1 Đổi tương Server dùng để làm gì ?...........................................................................103
9.3.2 Các thành phán (thuốc tính và phương thức) chính..................................................103
9.3.3 Ví du sử dung..........................................................................................................103
9.4 Session Object............................................................................................................... 104
9.5 Application Object........................................................................................................ 104
9.5.1 Đổi tương Application dùng để làm gì ?.................................................................. 104
9.5.2. Khái niêm biến toàn ứng dung............................................................................... 104
9.5.3. Đối tương Application............................................................................................ 104
M ột s ố bài tập tổng hơp:......................................................................................... 105
BẢI 10: THƯC HÀNH................................................................................................112
BÀI 11. Truyền dừ liệu giữa các webpage............................................................. 112
MasterPage và g ỡ rố i (Debug) chương trình......................................................... 112
11.1 Truyền ÍPostl dữ liêu giữa các trang bằng mã lênh C#..........................................112
11.2 Truy xuất đến các phán tử bằng phương thức FindControl.................................. 112
11.3 Truy xuất đền trang gùi thông qua thuôc tính PreviousPage.................................. 112
11.4 MasterPage................................................................................................................. 112
11.5 Gd rối..........................................................................................................................115
11.5.1 Giới thiêu..............................................................................................................115
11.5.2 Chay úhg dung ở chẽ đô gở rối............................................................................115
11.5.3 Khái niêm điểm dừng........................................................................................... 115
11.5.4 Chay từng dòng lênh với chẽ đô Step Into ÍF8Ì.....................................................115
11.5.5 Chav từng dòng lênh với chẽ đô Step Over ('Shift-F8')...........................................115
Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

2
Tài liệu khóa học lập trình web với ASP.NET - Biên soạn: Trung tâm Hưng Yên
Aptech _____________________________________________________________________________________________________________________________________________________________________________
11.5.6 Chay từng dòng lềnh vỏi chê đỏ Step Out (Ctrl-Shift-F8~).................................... 115
11.2 sử dung Custom Error page....................................................................................... 115
11.3 Ghi các vết gây lỗi (Trace errors).............................................................................. 115
11.4 sử dụng công cu gỡ rối/ Menu Debug.................................................................... 115
11.5 Tracing lỗi ỏ mức trang/ Mức toàn ứng dung..........................................................115
BẢI 12: THƯC HÀNH................................................................................................115
BẢI 13: CỒNG NGHỀ ADO.NET............................................................................116
13.1 Giới thiệụ.chụng „„„....... ................................................................. .................... . „1.16
13.2 Kiến trúc của ADO.NET........................................................................................... 117
13.3 Các lớp thao tác với CSDL: Connection. Command................................................ 118
13.3.1 Lớp Connection..................................................................................................... 118
13.3.2 Lóp Command....................................................................................................... 121
13.3.3 LÓp DataReader..................................................................................................... 125
13.3.7 Lớp DataColumn................................................................................................... 127
13.3.8 LỚP DataTable....................................................................................................... 127
13.3.9 Lớp DataRow.........................................................................................................128
13.3.10 Lớp DataSet......................................................................................................... 129
13.3.11 LỚP DataAdapter..................................................................................................129
BẢI 14: THƯC HÀNH................................................................................................ 132
BÀI 15: Tìm h iểu vả ứng dụng c ơ c h ế Data Binding........................................ 139
15.1 Giới thiêu DataBinding.............................................................................................. 139
15«2 Dfltfl Binding........................ ................................................................................ .............. 139
15.2.1 Dang gẵn kết dữ liêu đơn (Single DataBinding')....................................................139
15.2.2 Dana gắn kết dữ liêu có sư lăp lai (Repeated Data Binding-).................................140
15.3 Cár điếu khiển Data Sonrrp (Datasonrrp rnntrnlsl.................................................. 143
15.3.1 Giới thiêu về DataSource conựols......................................................................... 143
15.3.2 sử dung SqlDataSouce đề chon ('Select') dữ liêu....................................................144
15.3.3 sử dung SqlDataSource để câp nhát dữ liêu.........................................................147
15.3.4 Xóa bản ghi trong CSDL bằng SqlDataSource...................................................... 150
BÀI 16: THƯC HÀNH................................................................................................152
BẢI 17: Lảm v iệc vó! GridView................................................................................158
17.1 Giới thiêu tổng quan...................................................................................................158
17.2 Tìm hiểu lớp GridView............................................................................................. 158
17.2.1 Các thuôc tính và côt thuôc tính............................................................................. 158
17.2.2 Các style áp dung cho GridView............................................................................ 159
17.2.3 Các sư kiên.......................................................................................................160
17.2.4 Các phương thức....................................................................................................161
17.3 Các tính năng hỗ trỢ của GridView........................................................................... 161
17.3.1 Phân trang...............................................................................................................161
17.3.2 Tính năng tư đông sáp xép.................................................................................... 164
17.3.3 Các mẫu hiển thi - Template...................................................................................165
17.4 Tao các côt tùy biển HvperLink. BoundColunm......................................................166
17.4.1 Tao côt BoundField thủ công................................................................................. 166
17.5 Tao và xử lý các cỏt Select. Edit. Delete. Update.....................................................170
17.5.1 Thêm côt Select. Edit - Update. Delete....................................................................170
17.5.2 cẳp nhẳt dữ liều...................................................................................................171
17.5.3 Xóa dữ liệu............................................................................................................ 173
BẢI 18: THỰC HÀNH................................................................................................. 175

3
Aptech _____________________________________________________________________________________________________________________________________________________________________________
BẢI 19: s ử dụng Templates...................................................................................... 184

19.1 Giới thiêu tổng quan.................................................................................................184
19.2 Các điều khiển hỗ trơ Templates..............................................................................184
19.2.1 Môt số điều khiển hỗ trơ Template thưòng dùng.................................................. 184
19.2.2 Các loai Template..................................................................................................184
19.3 Repeater control. DataList control. GridView control...............................................185
19.3.1 Tao template vái GridView....................................................................................185
19.3,3 Xạo Template với Repeater (light-weight)...... ............ ..... .......................... ,19.2
20. Đóng gói website........................................................................................................ 193
BÀI 20: THƯC HÀNH................................................................................................195

4
Aptech_____________________________________________________________________________________________________________________________________________________________________________
TR U N G TÂ M H Ư N G Y ÊN - A P T E C H APTECH
COMPUTER EDUCATION
Địa chỉ : Tầng 2, Nhà A - Đại học SPKT Hưng Yên
Điện thoại : 0321-713.319; Fax: 0321-713.015 Hung Y e n -ữ p te c n
E-mail : aptech@utehy.edu.vn; www.sptBch.utehy.vn
Website : 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 Ư N G Y Ê N 7/2008

5
Aptech________________________________________________________________________________________________________________________________________________________________________________________________
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 e
> 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 v s 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 c s s
> Truy xuất các thuộc tính của phần tử web thông qua c s s 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++ va sự dễ dàng của Visual Basic...
Những ưu điểm có tính đặc thù của tùhg 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 ữiể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) ừê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ê ữong 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!
V I.0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

6
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
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 đâ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 co 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 nhuhg 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ụhg 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 ữiể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 úhg. Việc
biên dịch và chạy được là nhờ Chương trình thực thi ngôn ngữ chung - C LR
(Common Language Runtime).

7
Aptech________________________________________________________________________________________________________________________________________________________________________________________________
■ 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).
■ 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
Source VB.HET
v u a iii. I c#
-x*rr Delphi
u u ip iii
code
CdfTMJiler Cormiftei CorroilGf Unmanaged
Component
Managed Assembly - Assembly - A ssenrty

code IL Code IL Code IL Code
i
▼ l ▼ l ▼
Common Language Runtime
JIT Compiler
Native Code
Operating System Services
Mô hình biên dịch và thực thi chương trình của ứng dụng .NET (1)

8
Aptech_____________________________________________________________________________________________________________________________________________________________________________
ỈL (Intermediate Language)
ư ũ ĩiữ íM
Native
Code
Mô hình biên dịch và thực thi chương trình của ứng dụng .NET (2)
Visual c# Project
c# Source Resources
File(s)
References
c# Compiler
Creates
Managed Assembly (.exe or .dll)

MSIL Metadata
IL metadata & references

loaded by CLR
•NET Framework
Common Language Runtime Uses ■
NET Framework
Security / Garbage
Collection / JIT Compiler Class Libraries
Converted to native
machine code
1f
Operating System
Mộí cúi nhìn khúc vè mô hình biên dịch vù ihực ihi ứriy dụriy
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.

9
Aptech________________________________________________________________________________________________________________________________________________________________________________________________
■ 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.
■ 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 tì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 D L L ” như trước đây.
1.2. Giới thiệu ASP.NET

ASP.NET là công nghệ phát triển các úhg 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áchbiệ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ầnxử 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 úhg
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

10
Aptech_____________________________________________________________________________________________________________________________________________________________________________
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ương đương 8 đĩa CD).
Trong đó bao gồm cả bộ MSDN. Kích thước khoảng 4.5 GB.
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
thiet để 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 (ẠSP.NET, VB.NET, c#,...). Điều này đảm bảo linh 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”.
— Document windows
— Toolbars
BEB
Solution Explorer
Server Explorer
Properties window
*— Toolbox
L— View tabs
cử a s ổ giao diện chính của môi trường phát triển tích hỢp.
Tronạ đó:
- Tab Design để hiển thị trang web ở chê độ Design, tức là cho phép sửa chữa nội dung
trang web trực quan.
/ TestOnline (2)/BaiThi.aspx TestOnline (2)/LamBai.aspx ▼ X
. ./MasterPage.master
0 1
C â u h ỏ i: 15
r [radbA] r [c h e c k A ] lĩ*
r [radbB] r¡-
r [checkB]
rfra d b C Jrtc h e c k C ]^ —
c [radbD] r* [c h e ck D ] i»
▼
/ H ------- 1 M
[ Q Design tsjln Split B Source 1 < <td> <table> <tr> <td> <span>| |>[
MỔ trang ở c h ế độ Design

11
Aptech_____________________________________________________________________________________________________________________________________________________________________________________
- Tab Source: MỞ trang ở chê độ mã nguồn HTML. T ại đây người dùng có thể soạn
thảo trực tiếp các thẻ HTML.
client Objects & Events I (No Events)
<%@ Page Language ='VB" Mas terPage File="^/Master Page ~

B <asp: Content ID="Contentl" ContentPlaceHolderID="Conten—
[] <asp:Panel ID="PanelLuaChon" runat= "server" Width="1000/

0 <table cellpadding="0" cellspacing="0" width="100°/c
0 <tr>
A <td align ="center" style="height: 73px">
<asplabel ID="Label2" runat= "server" Foi
Height="24px" Text="CÁC MODULE T E jr
u J . 2J
a Design 1 □ Split ( S Source |\ < <td> <table> <tr> <td> <span> Ị7Ị
MỞ trang ở c h ế độ Source
- Tab Split: Cho phép xem trang web đồng thời ở cả hai chê độ.
client Objects & Events (No Events)
ộl aũgn= "right" valign="middlel7>~

âsp:RadioButton ID="radbC" runat= "server" ForeColor="BL
<asp:CheckBox ID="checkC" runat= "server" Visible="False"/ „
li _______________________ I__________________________ u
../MasterPage. master
I <dĩ>ỊJ: K«dUIUDLH-ỊUI l^r<JUU«wI
in i
r [radbC] r [checkC] I*
r [radbD] r [checkD] !íĩ>
J
LÌ Design I n Split Source <td> <asp : RadioButton#radbC>
ä f.
M ở trang ở chê độ k êt hợp, vừa xem code HTML vừa xem Design.
Solution Explorer
ffl g jB s iT h ik ^ ,^ MỞ cửa sô soạn Code

ạ iLil BoBameTdSpx
ẸI Ò cogang.aspx Giông như Tab Designer
B ŨÌ Default.aspx
^ Default. aspxtVE1 Copy Website lên server, ns
.à, 1 Global, asax
M ỏ cửa s ổ soạn Code (C#, VB.NET
*** Ngoài thao tác ttự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ún tắt bên cạnh). V í dụ:
Shift+F7 để xem ở chê độ Design, F7 xem ở chê độ Code, F4 Focus tới Properties....

12
Aptech _____________________________________________________________________________________________________________________________________________________________________________
T e st Online (2 ) - M icrosoft v isu a l stu dio Jn JxJ

File Edit View Website Build Debug Format Table Tools Test Window Help
ề> u& i l s ü I *) ► u a o *1, g !ấ Sã %

style Application: Manual Tai let Rule: (New Inline style) ỊƯ '4 7. (None) » (Default Font)
Toolbox TestOi line 2 )/BoBannet.aspx ▼X Solution Explorer EZẳ
All W i n d . . .
^ Pointer Menu bar Vùng duyệt các, BaiThi.aspx

U ) MyButton — form và Code file BoBanner.aspx
Toolbar
2 ) MyButton coqanq.aspx
Chuyến đói giữa Code/Design-<-
*?= S t a n d a r d [-1 m Default.aspx
L . < a Default.aspx.vb
1^ Pointer
vùng chứa vùng sửa thuộc tính ■*- UoBai.aiá*
A Label -►các điều khiến I—i LamBai.aspx
labl TextBox Thay đổi ách xem Thông tin biên dịch =1 .
© Button
(ỊĨ) LinkBut...
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 J trên thanh công cụ.
New Web site -Ll-Xj

o D fc-ft-
Templates: j.NET Framework 3.5 I s i:::
Visual Studio installed templates
J %
ASP.NET Web ASP.NET Web Empty Web WCF Service ASP.NET ASP.M ET
Site Service Site Reports W... Crystal le..
J
M J T p m n b h p c zl
Abl. nk ASP MET Web site (.NET Framework 3.5)
Locat 3 \D:\My Documents\Visual 5tudio 200£ Browse,.
Lang:Il age:
Visual c#
OK Cancel
Ngôn ngữ lập trình được sử dụng.
Tạo dịch vụ Web Nơi chứa ứng dụng web

Dùng Framework
Tạo ứng dụng web thông thường
2.0 / 3.0/ 3.5

13
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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ún Alt-Shift-0
■ 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:
Open Web si
Mở dự án đuực lưu
trên máy (ổ đĩa) -
File System
MỞ dự án trong ____ ► Mj
W ebserver cục bộ. Local IIS
Mở dự án nằm trên «
một host bằng FTP ~ FTP Site
MỞ dự án nằm trên -
một host bằng HTTP Remote Site
Mở dự án nằm trên — * :
trình quàn lý mã Source Control
nguôn. Ví dụ
MS Source Safe
Open Cancel
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ạ3' 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 * trên thanh công cụ) để chạy úhg dụng và cho
phép Debug trễn trình duyệt.
■ 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ương trình và gỡ rối ở mức dòng lệnh/ thủ tục
thì có thể nhấn F8, Shift-F8.

14
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Người dùng có thể chạy (Browse) trang

web bất kỳ bằng cách chọn, sau đó Q. l à 0 1 ã n
. ỳ D:\...\W ebSite2\
click chuột phải và chọn mục View In App_Data
Browser (Hoặc nhấn tổ hỢp phím Ctrl-

^ web-' Open
Shift-W). Trong trường hỢp có nhiều Open With,.,
trình duyệt trong máy thì có thể chọn [TI View Code
trình duyệt mặc định khi View In View Designer

View Markup
Browser bằng cách click chuột phải lên
View Component Designer
trang và chọn Browse With như hình
•^ View in Browser
bên.
Set As start Page'£
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 cu pháp dạng, <Loại_phần_tử Thuộc_Tính l=Giá_T rị 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:G iá_Trị; ..... Danh
sách đầy đủ các thuộc tính này có thể ữa 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 đoi 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.

15
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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 = “ttl:gtl; tt2:gt2; tt,,: 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 đỏ.
cinput style="border-color:R ed; background-color:B lue; color:W hite" />
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 được định dạng
như sau thì người ta định nghĩa một bộ chọn ID. Cú pháp có dạng:
<style Type = “text/css”>

#Tên {
Tên_Thuộc_tính: Giá_Trị;
}
</style>
Ví dụ:
- Địiih 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>
< H I id = “Chuong”> Đây cũng là màu đỏ, cỡ chữ 20pt và đậm </Hl>
<H1 id=”xyz”> Đây thi không phải màu đỏ, vì có thuộc tính ID * “Chuong”</Hl>.
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 c s s 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ị;
VI.0 —hllp://www.uplech.utehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

16
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</style>
1client Objects & Events 3 bộ chọn ID - Microsoft Internet Explorer 1

3 <html xmlns="htto://www.w3.or File Edit View Favorites Tools Help
] <head runat="server"> Back » *■ uçj ^ l'j y ) Search Favorites
<titie>Bô chon ID</Öde>
J <style type="text/css"> Address € ) _iJ H Go
#Chuong { M.
color : Red; Đ ây là chữ đỏ, cữ 20pt và đậm vi có id = "Chuông"

font-size : 12pt;
font-weight : bold; Đ ây cũng là chữ đỏ, cỡ 20pt và đậm vỉ có id= “ Chuông"
}
</style > Đây là chữ thường (vì ID <> “Chuong") -
-</head> ZẤ
13 <body> Ế Done * J Local intranet
<p id=”Chuong"> Đây là chữ đỏ, cỡ 20pt và đậm vì có id = "Chuong"</p>
1 <p id="Chuong"> Đây cũng là chữ đó; cỡ 20pt vả đậm vì có id= "Chuong"</p>
<p id="xyz">Đây lả chữ thườhg (vì ID <> "Chuong") </p>
• </body>
- <ýhtmí> ▼
A ! >1
Lj Design a Split ịa Source 1 <html> <body> |<p#Chuong>|
V í dụ đầy đủ về BỘ chọn ID
Iclient O b jects &Even ts ▼11fWn FvfinKi T il

H 1 <%@ Page Language="C#" Aut 3 Bộ c h ọ n ID - Microsoft Internet E x p lo r e r
<!DOCTYPE html PUBLIC "-//VK File Edit View Favorites Tools Help
»
1b <html xmlns="http://www.w3.on j Ö Back ’ Ö '*■ [*) Ễ I & \ Se arch
6 <head runat= "server" >
<title >Bo chon ID</titie> Address |jg jhttp://localho5t:1047/WebSite2/Default5.a:_^J H <ão
3 <style type="text/css"> ▲
Pi ■Đây là chữ trắng, nền xanh (đo đinh nghĩa thẻ p ở trên)
color : white; 1
background-color: blue; ■Dòng này cũng là chữ trắng, nền xanh
}
</style> Đây là chữ thường (vi là thẻ H, không phải thẻ p)
_ iỊ
-é] Done [*í J Local intranet
-</head>
o <body>
<p> Đây là chữ trắng, nền xanh (do định nghĩa thẻ p ở trên)</p>
<p> Dòng này cũng lầ chữ Tắng, nền xanh </p>
<h3>Đây lả chữ thuờng (vì là thẻ H, không phải thẻ p) </h3>
</body>
L </htmí> ▼
1 r
Q Design □ Split 0 Source <html> <body>
V í dụ về định nghĩa bộ chọn thẻ
Vl.o — hup://www.aptech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

17
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
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ử.
Cú pháp định nghĩa lớp như sau:
cstyle type="text/css">
•<Tên_Lớp>
{
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.

■NenXanh_ChuTrang {
color: White;
background-color:blue;
}
.Lien_Ket
{
cursonhand;
color:Blue;
}
</style>
Ví dụ sử dụng:

18
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Client Objects & Events ▼I (No Events)

6 <head runat= "server" >
<title >Bo chon ID</titie>
<style type= "text/css" >
.NenXanh_ChuTrang {
color: White; '3 Bộ chọn ID - M icrosoft In te rn e t Explorer
background-color :blue; File Edit View Favorites Tools Help
}
Back * Q ' 0 [Ể U P Search
.Lien_Ket
{ )ây là nên xanh chữ trăng
cursor :hand;
color: Blue; Đây là dòng liên kếtn
} t)
</style > Dòng này cũng là liên kêt
-</head> ■fej Done

Ộ<body>
<p class="NenXanh_ChuTrang"> Đây là nền xanh chữ trắng</p>
<p dass="Lien_Ket"> Đây lả dòng liên kết </p>
<h4 class=''Lien_Ket">Dòng này cũng là liên kết</M>
- </body>
<ýhtmí>
IL
3 Design a Split s Source <html> I <body >
0
£
V í dụ đắy đủ và kết quả.
1.7.5 Vấn đ ề tổ chứ c lưu trữ.

Các định nghĩa về c ss có thể được đặt ngay trong tệp nguồn nhulìg 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 c ss (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 đó.

19
Tài liệu khóa học lập trình web với ASP.NET - Biên soạn: Trung tăm Huhg Yên
Aptech _____________________________________________________________________________________________________________________________________________________________________________
S ty le .cssy D e fä u k 3.aspx Default, ạspx.cs JScript.js Default.aspx_
len_Chuong
color :Red;
font-áze:20pt;
font-weight:bold;
}
sử dụng
nput
style.CSS* Default3.aspx Defdult.aspx.es JScript.js D e f a u lt is p x
{
font-äze:16pt; ülHVT onclick ▼
font-style:normal;
font-famüy:Times New Roman;
) <head runat="server" >
border-style :dashed; <title>3avaScriDt</btle> 1
border-cobr:Red; <link rel="Stylesheet" type="text/css" href="Style.css" />
} -</head>
] <bocV>
.NenXanh_ChuTrang
{ <!- Sử dụng bộ chọn thẻ ở trên -->
color :white; <p id="icH">Đây là nền xanh và chữ trẳng</p> <br />
font-size:20pt; <hl>Xin đưa chuột vào đây</hl>
backợound-color:Blue; <input type="text" id="HVT" value="viền gạch vả màu đỏ" /: ▼
}
<1 I ►
úi Design □ Split fliá Source ] < <htmt>1<bođy>1 0
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à c s s 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 ừong 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í du:
- Để 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.aỉl.txtHoVaTen.value.
- Để 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.

20
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
- Để 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>
<bodỵ>
cinput type=”text” value = “ASP.N ET”>
<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 c s s

Trong quá trình hoạt động của website, có thể có nhũhg lúc ta cắn phải sửa đổi giá trị
thuộc tính c s s 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ẻ>.styIe.<thuộc_Tính> hoặc
V 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 c s s như sau:

<html>
<body>
cinput 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 />
cinput type="button" value="Click here" onclick="ChangeColor()" />

21
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________

function ChangeCoiorO
{
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ệ).

22
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
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 c s s
■ Truy xuất các đối tượng trình duyệt và các phần tử HTML bằng JavaScript.
■ T ạo ứang 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 ạ n g các p h ầ n tử b ằ n g c s s và s ử d ụ n g JavaScript đ ể k iể m tra d ữ
liệ u
Yêu cáu:
♦♦♦ Tạo một trang web trong v s 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 ưa tính hợp lệ của dữ liệu.
Đ ác tả giao diên, chức nănạ và các ràng buôc:

1. Giao diện (Trang bên)
2. Đặc tả xử lý
- Khi người dùng nhấn vào nút_____— ——ĩ______ I thì thực hiện gửi toàn bộ nội dung
đang nhập rủa trang hiện hành sang trang CapNhatCanRo.aspx.
- K hi người dùng nhấn vào nút----- Nhạp triữi------1 nộ- c|ung trong các ô nhập được
reset trở về giá ữị mặc định (như trong hình).
3. Đặ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á ưị 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.
Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Teỉ: 0321-713.319
23
Aptech ____________________________________________________________________________________________________________________________________________________________________________________________
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

24
Tài ỉiệu khóa học lập trình web với ASP.NET - Biên soạn: Trung tâm Hưng Yên
Aptech_____________________________________________________________________________________________________________________________________________________________________________
CHƯƠNG TRÌNH QUẢN L Ý CẢN B ộ VERSION 1.0
NHẬP HÒ S ơ CÁN B ộ
THÔNG TIN CA NHÂN
*Họ và tên I
*Ngày sinh (ngày/lháng/nảm) [ U /F zì Giới tính: ^ Nam r Nữ
Chức vụ hiện tại (Đảng, cìúnh
quyển,...)
*Qụè quàn
*Nơi ở hiện nay
TRÌNH ĐỌ HỌC VẮN

Dân tộc : Tôn giáo.
Thành phần gia đừìh:
Nghề trước khỉ tuyền dụng
Tham gia cách mạng: Ngày I ~ .... Tổ chức r Cong tác I

Ngày vào Đảng: I ... /. ngày vào chính thức I ~~ĩ ~
N gày nhập ngữ: I ...7 ./... ngày xuất ngũ I
*Trừỉh độ Văn hóa: I Học hàm: I—

Lý luận chính trị I— ~3
Trinh độ ngoại ngữ Anh r ~ B Nga F T E Pháp p
*Ngạch công chức, viên chức: I M ã số: í *Hê số ỉương:
Danh hỉệu được phong (năm): I
Sở trường còng tác: 1
Khen thưởng (huân,huy chương cao
nhất)
Kỷ ìuật (đảng, chính quyòyi, năm, ìý ~n

do, hừìh thức)
zi
ĐAO TẠO, BỒI DƯỠNG CHUYỂN MÔN, NGHIỆP v ụ , LÝ LUẬN, NGOẠI NGỮ'
Ghì rõ Tên trường, ngành học, thời

gia», ỉoại hình, văn băng chứng chỉ
ấ
** 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, sư.
TÓM TẲT QUÁ TRINH CÔNG TAC
■
Ghì rõ then gian bất đầu và kết
~3
thúc; chức danh, chức vụ, đơn vị
còng tác tương ứng)
ấ
Đặc điềmlịchsửbảnthân
Đặc điềm hch sử bản thân
Quan hệ VỚI ngưcn mcởc ngoài
JỊ
"3
Quan hệ gia đừih (Bô, mẹ, anh chị
em ruột)
d
Hoàn cảnh kinh tế gia đính
C ậ p n h lt I N hâp m ó i

25
Aptech _____________________________________________________________________________________________________________________________________________________________________________
H ư ởng dần:
1. Định nghĩa style:
Khi thiết kê giao diện cho trang web, ữướ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;
colorPurple;
margin-bottom:30px;
}
-CellSpace
{
border-spacing:1px;
}
.Tiêu_Đề_Chính
{
color:White;
background-color:Purple;
font-size:12pt;
font-weight:bold;
margin:5px Opx 5px Opx;
height:25px;
}
•Cột1
{
colorrGray;
font-style:italic;
text-al ign:right;
width :30%;
}
■Cột2
{
width :70%;

26
Aptech_____________________________________________________________________________________________________________________________________________________________________________
text-align:left;
}
-TextboxDài
{
width :99%;
text-align:left;
}
-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 Opx 2px 2px;
}
input.NgayThang
{
text-align:center;
width:80px;
}
select

27
Aptech _____________________________________________________________________________________________________________________________________________________________________________
{
text-align:center;
width:100px;
}
2. Code trang giao d iệ n

N hapH SC B .aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NhapHSCB.aspx.cs"
lnherits="Lession_02____LAB_YahooRegister" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionai//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.citd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Nhập hồ sơ cán bộ</title>
clink rel="Stylesheet" href="Lession02.css" type="text/css" />
</head>
<body >
<form id="form1" actioiW'CapNhatCanBo.aspx" method="post" >
<div style="text-align:center">
<p style="border-bottom:solid; border-width:thin; font-size:20pt;
margin:0; padding:OX; border-spacing:Opx">
CHƯƠNG TRÌNH QUẢN LÝ CÁN BỘ VERSION 1.0
</pxbr /> <br />
<p class="HeadTitle">NHẬP Hồ s o 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"xinput type="text" id="HoVaTen" class="TextboxDài" />
</td>
</tr>
<tr>

28
Aptech_____________________________________________________________________________________________________________________________________________________________________________
<td ciass="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 ¡d="cboThangSinh" >
<option value="1">1</option>
coption value="2">2</option>
<option value=',3">3</option>
coption value="6">6</option>
«coption value="11”>11</option>
</select> /
<select id="NamSinh">
<option value="1951 ">1951 </option>
</select>
Giới tính:
<input type="radio" ¡d="optNam" checked="checked" /> Nam
<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>
ctdxinput 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"/x/td>
</tr>

29
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<tr>
<td class="Cột1 ">*Nơi ỏ hiện nay</td>
<td class="Cột2"> cinput type="text" class="TextboxDài7></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"xinput type="text" /> Tôn giáo: cỉnput type="text" />
</td>
</tr>
<tr>
<td class="Cột1 ">Thành phần gia đình:</td>
<td class="Cột2"> <input type="text" class="TextboxDài"/x/td>
</tr>
<tr>
<td class="Cột1 ">Nghề trước khi tuyển dụng</td>
<td class="Cột2"xinput type="text" class="TextboxDài" /></td>
</tr>
<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 cinput style="width:20%" />
</td>
</tr>
<tr>
<td cỉass="Cột1 ">Ngày vào Đảng: </td>
<td class="Cột2"xinput tỵpe="text" value="..... /....../......" id="NgayVaoDang"
class="NgayThang"
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);"/>
ngày vào chính thức <input type="text" cỉass="NgayThang"
value="..... /....../......"

30
Aptech_____________________________________________________________________________________________________________________________________________________________________________
</td>
</tr>
<tr>
<td c!ass="Cột1 ">Ngày nhập ngũ:</td>
<td class="Cột2"xinput type="text" value="..../..... class="NgayThang"
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);7>
ngày xuất ngũ cinput type="text" class="NgayThang" value="..../..... /......"
onfocus="XuLyFocus(this);" onblur="XuLyLostFocus(this);7>
</td>
</tr>
<tr>
<td class="Cột1">*Trình độ Văn hóa: </td>
<td class="Cột2"xinput style="width:15%" />
Học hàm:
<select>
<option value="">— </option>
<option value="Thạc S ĩ ’>Thạc sĩ </option>
coption value="Tiến Sĩ">Tiến sĩ</option>
</select>
Học v ị :
<select>
coption 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> <option>— </option>
<opt¡on 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>

31
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<tr>
<td class="Cột1">Trình độ ngoại ngữ</td>
<td class="Cột2">
Anh <selectxoption>.......</option>
coption value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Nga <select>
<option>.......</option>
<option value="A">A</option>
</select>
Pháp <select>
</select>
</td>
</tr>
<tr>
<td class="Cột1 ">*Ngạch công chức, viên chức:</td>
<td class="Cột2">
cinput style="width:20%" />
Mã số: cinput style="width:15%" />
*Hệ số lương: cinput style="width:15%" />
</td>
</tr>
<tr>
<td class="Cột1">Danh hiệu được phong (năm): </td>
<td class="Cột2"xinput class="TextboxDài" /></td>
</tr>
<tr>
<td class="Cột1 ">sỏ trường công tác:</td>
</tr>

32
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<tr>
<td class="Cột1">Khen thưởng (huân,huy chương cao nhất)</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">
ctextarea class="TextboxDài" cols="50" rows="3"x/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>
<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>
<tdxtextarea class="TextboxDài" cols="100" rows="5"x/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>
<td colspan="2">TÓM TẮT q u á t r ìn h c ô n g 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>
<tdxtextarea class="TextboxDài" cols="100" rows="5"></textareax/td>
</tr>

33
Aptech_____________________________________________________________________________________________________________________________________________________________________________
<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"x/textarea>
</td>
</tr>
<tr>
<td class="Cột1 ">Quan hệ với người nước ngoài</td>
<td class="Cột2">
</td>
</tr>
<tr>
<td cỉass="Cột1">Quan hệ gia đình (Bố, mẹ, anh chị em ruột)</td>
<td class="Cột2">
</td>
</tr>
<tr>
<td cỉass="Cột1 ">Hoàn cảnh kinh tế gia đình</td>
<td class="Cột2">
</td>
</tr>
</table>
<br/>
<table class="Table" style="border:0">
<tr>
<td style="text-align:right"xinput type="submit" value=" Cập nhật "
onclick="return KiemTraO;" /></td>
<td style="text-align:left"xinput type="reset" value=" Nhập mới “ /></td>
</tr>
</table>
</div>
</form>

34
Aptech _____________________________________________________________________________________________________________________________________________________________________________

var Giá_Trị_CQ;
III Hàm xử lý khi người dùng bấm vào nút Nhập

function KiemTraO
{
if (formi .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;
}
III Hàm xử lý khi phần tử nhận được focus

function XuLyFocus(txt)
{
G iá_T rị_Cũ=txt.value;
txt.value="";
}
III Hàm xử lý khi phần tử mất focus

function XuLyLostFocus(txt)
{
if (txt.value==M
") txt.value=Giá_Trị_Cũ;
}
</script>
</body>
</html>

35
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
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ười ta có 2 cách tiếp cận để xử lý “request trang web” từ máy
khách:
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 ý n g h ĩ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ủl về cho client) đ ể được kết
quả, tiếp theo lấy kết quả xử lý được gủl 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 ừê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:
V Mô hình lập trình phía máy khách (Client side)

3 ( .mmt r«Kl VÍTVPT In lw n tt l xịỊk» . ! □ ! »I
ĩM 'Ở** Favorte* look t*ei>
ị Q - ■
■ • o ■ L*j M i ✓ ‘M n h
<^5jwww .aptech .vn/abc .htm --[]{] Ị-

'$ * Ị ( íụ Ể lỆ M & ị
l ĩ đ M i n r n i ^ r 1 1 '1 'ii w « i j Ị O ĩn
H o a h ậ u V e n e i u e U g ià n h v ư ơ n g "
HM HV 2 0 0 8 V *« -« — .« 4 . Web
serve r
EO— ỉ
Mô hình lập trinh phía máy khách
Máy chủ chỉ đơn giản là đọc trang và

gửi về cho máy khách.

36
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Mô hình lập trình phía máy chủ

E3S
MÔ hình lập trình phía máy chủ

1 1 1
index, asp
Trong mô hình này, trang web được (không còn Index.asp
xử lý trước tiên bên server, sau đó Code asp) (chứa asp)
mới gửi về cho client xử lý tiếp.
F r
Câu hỏi: Khi nào thì một trang sẽ được xử lý ở bên Server trước ?. hay nói cách khác là
khi nào thì được gọi là xử lý theo mô hình phía server?
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 và trang sẽ không
được xử lý phía server ?
Trang Trangl.htm Trang2.aspx
<html> î <%@ Page Language="C#" %> i

<body> - - - - - - - - - - - - - - - - - - - - - -■
Hello world /
</body> / chtml xmlns="http://www.w3.org/1999/xhtmỉ">
</htmí> / chead runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
*■ <div>
.........................................a
I •
■<% Response.Write (DateTime.Today.Date.ToStringQ); %> 1
</div>
</form>
</body>
</html>

37
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
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 tình duyệt rồi (IE, FireFox...), còn server là chương trình
nàó ?
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ương
trình server thực chất là một chương trình có tên là IIS (Internet Information Service).
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ước
khi gửi về cho phía Client ?
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 0); %>

Hoặc:
<asp:Calendar r u n a t= MS e rv e rM 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ủl 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 ơ c h ế 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 diêm tính năng Compile and Cache:

38
Aptech_____________________________________________________________________________________________________________________________________________________________________________
Gen’d
R eq u est 1
A SPX Page
Instantiate
File C la s s
R eq u est Com pile
V
R e sp o n se
R e sp o n se Instantiate,
P r o c e s s and
R e n d er
W eb S e rv e r (ns S erv er)
Giải thích cơ chê xử lý ở trên:

Bước 0: Người lập trình phải tạo các ữang 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.comi . Trên
thanh địa chỉ của ưình duyệt, người dùng nhập ưang 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.neư
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 ữì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:
\ Tran này sẽ
được biên
dịch
.ASPX (Compiled)
Lân đâu tiên trang aspx được yêu câu

39
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Lần thứ 2, nếu có yêu cầu

lại trang aspx đó thì
không phải biên dịch nữa
-> Nhanh hơn ! Com piledỊ .ASPX
ir — 1
—■
---
Chỉ phải biên dịch lại

/
trang aspx nêu nội dung I
file nguồn aspx có sự Com piled
thay đoi. -

40
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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”
Client Objects 8í Events ▼I I (No Events)
<%@ Page Language="C#" %>

E <html xm1ns= "http://www.w3.orQ/1999/xhtml">
¡Ỷ<head runat="server">
<t)tle>Server side - example K/title >
</head>
ộ <body>
< f o r r n id = " f o r m 1 " ũ im r = " s f t r v f ìf " > __________
<asp:Calendar runat="server" ID="Lịch"> </asp:Calendar>
</form>
</body> IE - Jal. xj
1 3 Server side - example 1 - Microso*3SHT"
r
</htmí> £ hie tdic View favorites tools help
C Ỉ
f A.
< July 2008 >
Dòng : Sun M on Tue W ed Thu Fri Sat
<asp:Calendar runat="server" ID="üch''x/asp:Calend i >
29 30 I 2 3 4 5
Sẽ được xử lý bên phía server vì bên trong nó có ghi 6 7 8 9 10 n 12
Runat = "Server". 15 16 '12
13 M 12
Vì Server rất hiếu câu lệnh này nên nó sẽ sinh ra các thẻ 20 21 22 23 i24 25 26
HTML vả các câu lệnh JavaScript gũi trả vẽ cho trình duyệ t 27 28 29 30 ;31 i 2
đế tạo thành một Calendar như h ình bên cạnh — >
3 4 5 6 7 8 9 _
▼
lấ) r~ r m o Local intranet

ìd
Ci Design □ Spilt I tsl Source
Vl.o —hltp://www.aplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

41
Aptech _____________________________________________________________________________________________________________________________________________________________________________
3.3.2 Yêu cầu x ử lý bên phía server thông qua cặ p thẻ <% %>
client Objects & Events I I (No Events)

p<html xmlns="http://www.w3.ora/1999/xhtml">
¿chead runat= "server" >
<titie>Server side - example 2</title>
i-</head >
g <body>
b <form id="forml" runat="server">
<% int i;
for (i = 1; i <= 10; i++) 3 Server side - example 2 - Microso
Response.Write (i + "<br>"); File Edit View Favorites Tools Help
%>_______________________
'form>
v/iurir
1
-</body>
2
-</html>
3
\ 4
5
Khối lệnh ớ trên sẽ được phía server xử lý
6
trước, sau đó mới lấy kết quả xử lý được
7
gửi trả lại cho phía citent (trinh duyệt) :
8
Câu hòi: Kêt quả trả về cho client 9
trong trường hỢp này cụ thê’ là gì ? ? ? 10
Dor * J Local intranet Á

a
LỈ Design n Split E>l Source ~| <html> <head> |<title>
0
Nfgüài 2 cách Irên, cùn 2 cach để yêu cắư x ử lý Irang web ưực Liếp ưên server, đú là:
Đặt các câu lệnh ngay ttong cặp thẻ Script, nhưng có thuộc tính Runat = “Server”:
<script language="C#" type="text/c#" runat="server">

/// <summary>
III Các câu lệnh/ khai báo biến/ khai báo hàm/ định nghĩa lớp v.v...
Ill 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)
{

42
Aptech _____________________________________________________________________________________________________________________________________________________________________________
return a * b;
}
}
</script>
3.3.3 Yêu cầ u x ử lý bên server thông qua Script

client Objects & Events -»•I I (No Events)
p <html xmlns= "http: //www,w3.ora/1999/xhtml"> M ột v ỉ dụ đây đủ hơn, trong đó
i<ệnfỉ
ó
cj] <head runat= "server"> :chứa cà phần từ serv er và mã lệnh
<title>Server side - example 3</title>
j </head>
0 <body>
e <form id="forml" runat= "server">
<asp:TextBox id="txtA" runat= "server" width="50px" />
<asp:Textfiox id="txtB" runat= "server" width="50px"/>
<asp:Button id="cmdTinhTong" Text="Tinh" runat= "server" OnClick="Tong" />
<asp:TextBox id="txtKetQua" runat= "server" width="50px"/>
<script language="c#" type="text/C#" runat= "server" width="20px">

public void Tong (object sender, EventArgs e)
{
txtKetQua.Text = (int.Parse (txtA.Text) + int.Parse (b<tB.Text)).ToString();
</script> P
</form> File Edit View Favorites Tools Help
</body>
n
■</html> [Too Ịẽõ Tính 150
zl
, Dor * J Local intranet //.
<l_ n
LỈ Design a Split 0 Source 0

43
Aptech _____________________________________________________________________________________________________________________________________________________________________________
3.3.4 Yêu cầu x ử lý bên phía server bằng cách đặt trong Code file
Client Objects & Events I (No Events)
<%@ Page Language="C#" CodeFSe="~/Lession 03/Defauit.aspx.cs"

Inherits ="Lession_03_Default"% >
<JLessiorNfi3 Default ...V TciiWobject sender, EventArgs e)I
using System.Web.Security; _ ,
using Syltem.Web.UI; Codefile : default.aspx
using Systehn.Web.UI.HtmlControls; . . __ _ ,
0 4- ui it û C a ss: Lession — 03 - Defau t
using System .Web.Ul.WebControls;
using System.Wsb.UI.WebContrcfc.WebParts;
I .
□public partial class Lession_03_Default: System.Web.UI .Page
, {
i protected void Tong (object sender, EventArgs e)
{
txtKetQua.Text = (int.Parse (txtA.Text) + int.Parse (txtß.Text)).ToString ();
}
}

44
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
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ụhg 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).
Một sô Ưu điểm của web forms:
*** 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).
V 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.
V 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 XM L 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 C LR ở 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 .c s (nếu dùng ngôn ngữ c#).
Trong 1 f i l e Đ ặt r i ê n g ( “ code-behind” )
» code *
<tags>
<tags>
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.

45
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Trong 1 f i l e Đặt r iê n g ( “ cod e-b eh ind ” )
^code
<tags>
<tags>
Solution Explorer - Solution 'ASP.NET Cours... ■
* Solution Explorer - Solution 'ASP.NET Cours...
U lM E Ü lS ili
Ẹ D:\...\ASP.NET Course\ B - ỷ D:\...\ASP.NET Course\
ES u Lession 01 - Theory Ệ LJỈ Lession 01 Theory
El □ Lession 02 - LAB Ẹ ¿JT Lession 02 - LAB
Lession 03 v A j Less¡on02.css
è v l Default.aspx B ú H NhapHSCB.aspx
: Default.aspx.es NhapHSCB.aspx.es
Default2.aspx B L> Lession 03
à - & Tai lieu khac H -v p
; Default.aspx.es
Trang Default2.aspx
Code được đặt trong deỉault.cs
chứa code ở bên trong nó.
Còn phẩn giao diện chứa trong deíault.aspx
t h i s f i le . aspx t h i s f í le .e s
s ubmi t B t n_Cl i ck ( )
< a s p :B u tto n id = “ LookUp“ { ...
O n C li ck= „ Submĩ t Btn_cl Ï c
Fíe £đt View ĩ ¡porte-. lools Heb

-¿-•Back » ^ [ i ỉ ¿3 «lF«voH«
Address I http/ylocahoaytheííe «p*
J
N am e: (Gandalf Lookup 1
Hỉ G an d alf
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.es

46
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Phân tích một ttang 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"%>
chtml xmlns="http://www.w3.org/1999/xhtml">
</head>
<body>
<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 System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.Ul.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.Ul.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 defaultaspx:

47
Aptech________________________________________________________________________________________________________________________________________________________________________________________________
- 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">
</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>
</head>
- <form ¡d="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à cínput type=”TextBox” id="txtA" style = “width:50px”>
cscript 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 uày hoàn Loàn diứa các câu lệnh của ngôn ngữ lập ưùih VB.NET lioặ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 TR U Y 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”;

48
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
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 ừả 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à ưang chứa mã code (.vb; .cs) dể dảm bảo tính chuyên môn hóa và dễ bảo ưì
hơn.
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à}f đề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 ttong 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 được chức năng
phức tạp hơn HTMLServer controls.
3.7.2 C ách thức tạo phần tử HTML Server Control và A SP.N ET control
a) HTML Server conừol
♦♦♦ Cú pháp tạo phẩn tử HTML Server control:

0 <Tên_Loại_Thẻ runat=”server” thuộc_Tính = “giá trị” ....>
0 Trong đó: Tên loại thẻ là input, select, p, hl, ....
*** 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
0 <asp: Loại_PT thuộc_tính = “giá trị” .... r u n a t = “ s e r v e r ” >
Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 49

Aptech_____________________________________________________________________________________________________________________________________________________________________________
o Trong đó asp: là bắt buộc, Loại_PT có thể là button, textbox, calendar, select,
treeview, adRotator, listview, gridview, image,....
❖ Ví dụ:
0 <asp:TextBox ID="txtHVT" runat="server"></asp:TextBox>
0 <asp:Calendar ID="cal" runat="server" BorderColor="Blue"x/asp:Calendar>
0 <asp:Table> <asp:TableRow>
<asp:TableCell>cell</asp:TableCell></asp:TableRow>
</asp:Table>

50
Aptech _____________________________________________________________________________________________________________________________________________________________________________
C h ú ý si«***
♦♦♦ Để 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ể được thì nên dùng các ASP.NET server control
để đảm bảo tính tươ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ười dùng tạo ra.
(phần này sẽ được đề cập trong phần Lập trình ASP.NET nâng cao)

51
Aptech_____________________________________________________________________________________________________________________________________________________________________________
BÀI 4: THỰC HÀNH

Mục tiêu: K ết thúc bài thực hành nảy, người học có th ể
Tạo các phần tử web server control
Sử dụng các câu lệnh phía server để truy cập các phần tử trang web.
♦♦♦ Tạ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 nhltìng sử dụng các phần tử ASP Server
control thay VI 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:
<asp:TextBox runat="server" id="HoVaTen" class="TextboxDài" />
Tạo textbox có nhiều dòng:
<asp:TextBox runat="server" ID="txtKyLuat" TextMode="MuitiLine"
CssClass="TextboxDài" Rows-'5" Coiumns="80">
</asp:TextBox>
- Tạo hộp comboBox (HTML Server control)
<seỉect runat="server" id="cboTiengAnh">
coption value="A">A</option>
coption value="B">B</option>
coption value="C">C</option>
</select>
- Tạo hộp ComboBox (ASP server control)
<asp:ListBox ID="cboTiengAnh" runat="server">
<asp:Listltem Text="A" Value="A"x/asp:L¡stltem>
<asp:Listltem Text="B" Value="B"x/asp:L¡stltem>
<asp:Listltem Text="C" Value="C"></asp:Listltem>
</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'7>
Để 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[l], ...
b) Minh họa m ẫu

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

"http://www.w3.org/TR/xhừnll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhùnl">
<head id="Headl" runat="server">

<title>Nhập hồ sơ cán bộ</title>
<link rel="Stylesheet" href="Lession04.css" type="texưcss" />
</head>
<body >
<form id="forml" 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:Opx">
CHƯƠNG TRÌNH QUAN LÝ CÁN BỘ VERSION 1.0
</p><br /> <br />
<p class="HeadTitle">NHẬP Hổ s ơ CÁN BỘ</p>
<table class="Tabie">
<ư class="CellSpace">
<td colspan= 2" class="Tiêu_Đề_Chính">THÔNG TIN CÁ NHÂN</td>
</ữ>
<ữ>
<td dass="CỘtl">*HỌ và tên</td>
<td class="Cọt2">
<asp:TextBox runat="server" id="HoVaTen" class="TextboxDài" />
</td>
</tr>
<ư>
<td class="CỘtl">*Ngày sinh (ngày/tháng/năm)</td>
<td dass="Cổt2" >
<asp:ListBox Rows="l" id="cboNgaySinh" runat="server">
</asp:ListBox> /
<asp:ListBox Rows="l" id="cboThangSinh" runat="server" >

</asp:ListBox> /
<asp:ListBox Rows="l" 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>
</ữ>

53
Aptech _________________________________________________________________________________________________________________________________________________________________________________________
<ư>
<td class-'CỘtl">Chức vụ hiện tại (Đảng, chính quyền,...)</td>
<td><asp:TextBox runat="server" ID-'txtChucVu" CssClass="TextboxDài" /></td>
</ữ>
<ư>
<td class="CỘtl">*Quê quán</td> <td class-'Cột2">
<asp:TextBox runat="server" ID="txtQueQuan" CssClass="TextboxDài"/x/td>
</tt>
<tr>
<td class-'CỘtl">*Nơi ở hiện nay</td>
<td class="Cột2"> <asp:TextBox rũnat="server" ID="txtNoiOHienNay" CssClass="TextboxDài"/>
</td>
< /tt>
<ữ>
<td colspan="2" class="Tiêu_Đề_Chính">TRÌNH ĐỘ HỌC VẤN</td>
</tr>
<ư>
<td class-'Cộtl"> Dân tộc : </td>
<td class-'Cột2">
<asp:TextBox runat="server" ID="txŨDanToc" Text="Kinh"/>
Tôn giáo: <asp:TextBox mnat=''server" ID="txtTonGiao" Text="Không" />
</td>
</ữ>
<ư>
<td class=”CỘtl">Thành phần gia đình:</td>
<td class="Cột2"> <asp:TextBox runat="server" ED="txtThanhPhan" cssdass="TextboxDài"/></td>
</tr>
<tr>
<td class="CỘtl">Nghề trước khi tuyển dụng</td>
<td class="Cọt2">
<asp:TextBỏx runat="server" ID="txtNgheTruocKhiTuyen" CssClass="TextboxDài" />
</td>
</ữ>
<tt>
<td class="CỘtl">Tham gia cách mạng: </td>
<td class="Cọt2">
Ngày <asp:TextBox runat="server" ID="txtNgayThamGiaCM" Text="..../..
style="width:15%; text-alignxenter" onfocus="XuLyFocus(ửús);" 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>
</ữ>
<ư>
<td class="CỘtl">Ngày vào Đảng: </td>
<td class="Cọt2">
<asp:TextBox runat="server" ID="txtNgayVaoDang" T e x t = " . C s s C l a s s = " N g a y T h a n g "
ngày vào chính thức <asp:TextBox runat="server" ID="txtThangVaoDang"

54
Aptech_______________________________________________________________________________________________________________________________________________________________________________________
cssdass-'NgayThang" Text=".../.../..." onfocus="XuLyFocus(this)" onblur="XuLyLostFocus(this)7>

</td>
</tr>
<ư>
<td class="CỘtl">Ngày nhập ngũ:</td>
<td class="CỘt2"><input type="text" valué-1..../.../...." class="NgayThang"
onfocus="XuLyFocus(this);" onblur-'XuLyLostFocus(this);"/>
ngày xuất ngũ <input type="text" class="NgayThang" value="..../.../..."
</td>
</ừ>
<tt>
<td dass-'CỘtl">*Trình độ Văn hóa: </td>
<td dass-'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 Sr'>Tiến sĩ</option>
</select>
Học vị :
<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>
</tt>
<tr>
<td dass="CỘtl">Lý luận chính trị </td>
<td dass="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>
<ữ>
<td dass="CỘtl">Trình độ ngoại ngữ</td>
<td dass="Cọt2">
Anh <select runat="server" id="cboTiengAnh">
<option vaiue="A">A</option>
</select>
Nga <select runat="server" id="cboTiengNga">

55
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<option>-----</option>
<option vaiue="A">A</option>
<option vaiue="B">B</option>
</select>
Pháp <select runat="server" id-'cboTiengPhap">
</select>
</td>
</tt>
< tt>
<td class="CỘtl">*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>
</ữ>
<ữ>
<td class="CỘtl">Danh hiệu được phong (năm): </td>
<td class="CỘt2"><asp:TextBox runat= server" ID="txtDanhHicu" CssClass="TextboxDài" />
</td>
</tr>
<ư>
<td class="CỘtl">SỞ trường công tác:</td>
<td class="CỘt2"><asp:TextBox runat="server" ID="txtSoTruongCT" CssClass="TextboxDài" />
</td>
</tt>
<ữ>
<td class="CỘtl">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>
<ư>
<td class="CỘtl">Kỷ luật (đảng, ctú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"x/asp:TextBox>
</td>
</ữ>
<tr dass-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>
</ữ>

56
Aptech_____________________________________________________________________________________________________________________________________________________________________________________
<tr>
<td dass-'Cộtl">
Ghi rõ Tên trường, ngành học, thời gian, loại hình,văn bằng, chúhg chỉ
</td>
<td><asp:TextBox runat="server" ID="txtQuaTrinhDaoTao"
CssClass="TextboxDài" TextMode="MuItiLine" Columns="100" rows="5"x/asp:TextBox>
</td>
</ữ>
<ữ>
<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 S1, cử nhân, kỹ SƯ.
</td>
</tr>
<Ư class="Tiêu_Đề_Chính">
<td coispan="2">TÓM TAT q u á t r ìn h c ô n g TÁC</td>
</tr>
<tr>
<td dass-'CỘtl">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 úhg)</td>
<td> <asp:TextBox runat="server" ID="txtQuaTrinhCongTac"
CssClass="TextboxDài" TextMode="MultiLine" Columns="100" rows="5">
</asp:TextBox>
</td>
</ữ>
<td colspan=”2">Đặc điểm lịch sử bản thân</td>
</tr>
<ư>
<td dass-'CỘtl">Đặc điểm lịch sử bản thân</td>
<td dass-'Cọt2">
<asp:TextBox ranat="server" ID="txtDDBanThan"
</asp:TextBox>
</td>
</ừ>
<tt>
<td class="CỘtl">Quan hệ với người nước ngoài</td>
<td dass="CỘt2">
<asp:TextBox runat="server" lD="txtQHNguoiNN"
</asp:TextBox>
</td>
</tr>
<ữ>
<td class="CỘtl">Quan hệ gia đĩnh (Bố, mẹ, anh chị em ruột)</td>
<td dass="CỘt2">
<asp:TextBox runat="server" ID="txtQHGD" CssClass="TextboxDài"
TextMode="MultiLine" Coiumns="100" rows="5"x/asp:TextBox>

57
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</td>
</tr>
<ữ>
<td class="CỘtl">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"x/asp:TextBox>
</td>
</ữ>
</table>
<asp:Label runat="server" id="lblTrangThai" visible="false" style=”text-align:center" >

</asp:Label>
<br />
<table class="Table" style="border:0">
<tt>
<td style="text-align:right">
<asp:Button runat="server" id="cmdSubmit" Text=" cập nhật " />
</td>
<td style="text-align:left">
<input type="reset" value=" Nhập mới " />
</td>
</tt>
</table>
</div>
</form>

var Giá_Trị_Cũ;
III Hàm xử lý khi phẩn tử nhận được focus

function XuLyFocus(txt)
{
Giá_Trị_Cũ=txt.value;
txt.value="";
}
III Hàm xử lý khi phẩn tử mất focus

finiLliou XuLyLoi>LFuLus(LxL)
{
if (txt.value=="") txt.value=Giá_Trị_Cũ;
}
</script>
</body>
</html>
NhapHS CB.aspx.cs
using System;

58
Aptech _____________________________________________________________________________________________________________________________________________________________________________
using System.Data;
using System.Web;
using System.Web.UI.HtmlControls;
public partial class Lession_04 : System.Web.uI.Page

{
protected void Khởi_Tạo_Các_Controls 0
{
int i;
Listltem L;
//Ngày sinh
for (i = 1 ; i <= 31 ; i++)
{
L = new Listltem (i.ToString (), i.ToString 0);
cboNgaySinh.ltems.Add (L);
}
// Tháng sinh
for (i = 1 ; i <= 12; i++)
{
L = new Listltem (i.ToString 0, ¡.ToString 0);
cboThangSinh.Items.Add (L);
}
//Năm sinh
for (i = 1950; i <= 1990; i++)
{
L = new Listltem (i.ToString (), ¡.ToString 0);
cboNamSinh.Items.Add (L);
}
}
public void KiemTra 0

{
if (txtHoVaTen.Text.Trim O-ToString 0 == "")
{

59
Aptech _____________________________________________________________________________________________________________________________________________________________________________
IblTrangThai.Visible = true;
IblTrangThai.Text = "Họ tên không được rỗng !";
}
else
{
IblTrangThai. 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 ();
}
}

60
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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 conừol để 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 ỪƯỚ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 Conơol (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 conừol 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) Dạng 2 (có thẻ đóng tường minh)
<asp: Tên_Điếu_Khiển <asp: Tên_Điều_Khiển
ID = "Định danh duy nhất" ID = "Định danh duy nhất"
runat = "Server" runat = "Server"
ttl="gtl" ttl="gtl"
tt2="gt2" ... tt2="gt2"
/> > </ asp: Ten_Đ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 ưước khi gửi về cho Client.

61
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
Có thể đặt giá trị cho các thuộc tính ở ngay bên trong các thẻ này, thậm chí có thể đưa
các mã JavaScript! ...
5.2.2 C ơ c h ế 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ũìig 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>
cinput type="hidden" name="__ VIEW STATE" id="_VIEW STATE"
value=7wEPDwUJNzgzNDMRYrsdybepETo3ZpHQh9iJeRBA=="
/>
</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:
cinput 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):
Vl.o —hllp://www.uplech.ulehy.vri; uplech@ulehy.edu.vn; Tel: 0321-713.319

62
Aptech_____________________________________________________________________________________________________________________________________________________________________________
<asp:Calendar ID="Cal" runat="server"> </asp:Caỉendar>

63
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Thì server sẽ tạo ra đoạn code HTML rất "khủng" !!!:

ctable 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(,car,'V3074')"
style="color:Black" title="the previous month"><
</a>
</td>
<td align="center" style="width:70%;">July 2008</td>
<td align="right" style="width:15%;">
<a href="javascript:__ doPostBack('car,'V3135')"
style="color:Black" title="Go to the next month">>
</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('car,'3102')"
style="color:Black" title="June 29">29</a>
</td>
<a href="javascript:__ doPostBack('car,'3104')"
style="color:Black" title="July 01">1</a>
</td>

64
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________

style="coíor:Black" title="July 02">2</a>
</td>
</td>
<td align="center" stỵle="width:14%;">
<a href=”javascript:__ doPostBack('car,'3107’)"
</td>
</td>
</tr>
» » > Còn gấp khoảng 5 lần đoạn code ở trên nữa » » >
Vì tong 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 tó chương trình dễ dàng hơn rất
nhiều.

65
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
Ví dụ 4: X ử lý phần tử web server control nhlihg 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úhg 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ó ranat="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 được xử lý phía
server, vừa xử lý phía Client.
V í dụ 5: x ử lý các phần tử 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à:
cinput name="ht" tỵpe="text" value="Hello" id="Text1"

onmousemove="document.bgColor='biue';"
onmouseout="document.bgColor='yellow';n
/>
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ì 2sự kiện này đã quá quen thuộc:

66
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
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.
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ử runat = "Server" onClick = "Tên_Phương_Thức" ....>
Ví dụ: Gọi phương thức KiemTra khi người dùng nhân vào nút "cmdKiemTra":
<asp:Button ID="cmdKiemTra" runat="server" OnClick="KiemTra" />
Luli ý : 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.Data;
using System.Web;
using System.Web.Ul.HtmlControls;
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)
{
III Đật câu lệnh ở đây !
}
5.2.3 Mô hình x ử lý s ự kiện trong A SP.N ET

1. Lần đầu tiên khi trang web được chạy. ASP.NET tạo ữang và các đối tượng và
thực hiện khởi tạo, sau đó ừang sẽ được chuyển đổi (rendered) thành tong
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.
Vl.o —hllp://www.uplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

67
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
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ượng của trang và trả về client trạng thái cuối cùng khi
chúng đưỢc gửi đi.
4. Tiếp theo, ASP.NET sẽ kiểm ứa 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 xử lý sự kiện này chúng ta thường thực hiện một sô xử lý như cập nhật
CSDL, kiếm tra,....
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 Postbackthì đặt thuộc tính AutoPostback = "true", ví dụ:
<asp:DropDownList runat="server" ID="ds" AutoPostBack="true"x/asp:DropDownList>
Hay : <asp:TextBox runat="server" ID="txtHVT" AutoPostBack="true"x/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 SelectedlndexChanged và TextChanged tương ứng sẽ
được gọi:
using System;
using System.Data;
using System.Web;
public partial class _default : System.Web.UI.Page

{
protected void ds_SelectedIndexChanged (object sender, EventArgs e)
{
}
protected void txtHVTJTextC hanged (object sender, EventArgs e)

{
}
Vl.o —hllp://www.uplech.utehy.vn; uptech@ulehy.edu.vri; Tel: 0321-713.319

68
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
5.3 Ajax Control Toolkit

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ùhg đó 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 ừa dữ liệu nhập (Data Validation
control),... BỘ Ajax Toolkit Conứol là một tập các điều khiển nhằm đáp úhg 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
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:
Thêm tham chiếu Ajax control toolkit vào Project
BƯ Ớ C 1:
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"
TargetControllD="ID của phần tử mà ta muốn áp dụng cho" />

69
Aptech ________________________________________________
|Ì5 S ta n d a rd _____________________
l ề AccordionPane
*5? D a ta
Pointer
Ị Ĩ Ị V alid atio n
& AnimationExtenderControlBase
]±i N avigation
153 Login
& AnimationExtender
1 5 W e b P a rts RoundedCornersExtender
1 3 R e p o rtin g PagingBulletedListExtender
1 5 HTML & SliderExtender
" 0 AJA X E x te n sio n s
& ResizableControlExtender
^ Pointer
CascadingDropDown
ScriptManager
'¡a DragPanelExtender
ScriptManagerProxy
AutoCompleteExtender
Timer
MaskedEditValidator
Ị71 UpdatePanel
DropDownExtender
• ] UpdateProgress
& AlwaysVisibleControlExtender
^ A ja x C o n trol To olkit
& ToggleButtonExtender
PopupExtender
TextBoxWatermarkExtender
& NumericUpDownExtender
SlideShowExtender
& Accordion
■'¿ị NoBot
& ValidatorCalloutExtender
UpdatePanelAnimationExtender
& TabPanel
& ModalPopupExtender
& MaskedEditExtender
PopupControlExtender
DynamicPopulateExtender
MutuallyExdusiveCheckBoxExtender
FilteredTextBoxExtender
& HoverExtender
m DropShadowExtender
& ConfirmButtonExtender
& ReorderList
PasswordStrength
& DraggableListltemExtender
ListSearchExtender
íà l Rating
CollapsiblePanelExtender
HoverMenuExtender
& CalendarExtender
TabContainer
M ột sô phần tử Ajax
V í dụ: Cho phép ngườ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"
lnherits="Default2" %>
<%@ Register
Assembly="AjaxControlT oolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

70
Aptech ______________________________________________________________________________________________________________________________________________________________________________
<title>Untitled Page</title>
</head>
<body>
<form ¡d="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"

TargetControllD="txtNgaySinh" />
</form>
</body>
</html>
5.4 Thảo luận công nghệ Ajax
Mô hình xử lý của Ajax

71
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________

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;
V 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.
V 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á ữị 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.
V 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:
V Để đọ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.
V Để truy xuất tới một phần tử có chỉ sô i trong Dropdownlist, viết:
DDL_Name.Items[i];
V Để xóa các mục: DDL_Name.Clear(); để đếm sô mục : DDL_Name.Count;
V Để thêm một mục vào DDL (Dropdownlist)
0 D S.Items.Add ("Mục mới"); Hoặc
0 D S.Items.Add (new Listltem ("text", "value"));
♦♦♦ Hàm chuyển ngày tháng dạng xâu sang kiểu Date: DateTime d;
0 DateTime D = DateTime. Parse (s);
0 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á ữị ID>.Focus(); VD: DS.Focus();
Phép toán lấy phần nguyên, phần dư:
0 Lấy nguyên: 20/ 6 ^ 3
0 Lấy phần dư: 20 % 6 2
2. sử dụng một số điéu khiển Ajax Control Toolkit

V I.0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vrt; Tel: 0321-713.319 72
Aptech_____________________________________________________________________________________________________________________________________________________________________________
Cách đăng ký và đưa Ajax Control Toolkit vào dự án:

jijisy stem .Web .Extensions .Design, dll
^ System.Web.Extensions.dll
, _ ... *jAjaxControlToolkit.dll
Can CO 3 file sau:
- 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ười dùng nhập vào ngày sinh của họ. Ngày sinh
này đượ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"

lnherits="Default3" %>
<%@ Register
Assembly="AjaxControlToolkit"
<!DOCTYPE html PUBLIC "-//W3CVDTD XHTML 1.0 Transitional//EN"

<title>Calendar</title>
</head>
<body>

<asp:ScrỉptManager ID="ScriptManager1"
runat="Server" EnableScriptGlobalization="true"
EnableScriptLocalization="true" />
<t»Nhập ngày sinh:</b>

<asp:TextBox runat="server" ID="txtNS"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="cal"

73
Aptech_____________________________________________________________________________________________________________________________________________________________________________
TaraetControlID="txtNS" runat="server" >
</ajaxToolkit:CalendarExtender>
</form>
</body>
</html>
Lưu ý;
- Trong thẻ <ajaxToolkit:CalendarExtender ID="cal"
TarqetControlID="txtNS" runat="server" >. Thuộc tính TargetControllD cho biết
là sẽ hiển thị Calendar khi người dùng focus điều khiển có id là txtNS.
0 Trong trang cần phải có thẻ <asp:ScriptManager và đặt trong thẻ Form.
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"
lnherits="MaskedEdit" %>
<%@ Register
<!DOCTYPE html PUBLIC "-/AA/3C//DTD XHTML 1.0 Transitionai//EN"

<html xmlns="http://www.w3.org/1999/xhtmi">
<title>Maskedit</title>
</head>
<body>
<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="M askedEditExtender1" runat="server"

TargetControl ID="Text Box 1"
Mask="99/99/9999"

74
Aptech _____________________________________________________________________________________________________________________________________________________________________________
MessageValidatorTip="true"
MaskType="Date"
DisplayMoney="Left"
AcceptNegative="Left" />
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator1" runat="server"

ControlExtender="M asked Ed itExtend er1"
ControlToValidate="TextBox1"
lsValidEmpty="False"
EmptyValueMessage="Phải nhập ngày tháng"
lnvalidValueMessage="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à ajaxĩoolkit: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.
2.3 Sử dụng Dialog modal

%@ Page Language="C#" AutoEventWừeup="tn.f"phầri riSn r,l»la'îalog.aspx.cs"
Phần tiêu đề của
Inherits="PopupDialog" %>
hộp ứioại. Đặt
trong một Panel.
<%@ Register
<!DOCTYPE html PUBLIC "-/AV3C//DTD XHTM L 1.0 TransiüonaWEN"

"http://www.w3.org/TRyxhtmll/DTD/xhtmll-transitional.dtd">
<hữnl xmỉns="http://www.w3.org/1999/xhtml">
<titIe>Modal Dialog</title>
</head>
<b(dy>
<form id="forml" runat="server">

asp:Button ID="cmdOpenPopup" runat="server" Text="Cửa sổ Login" />
<asp:ScñptíVIanager ID="sml" runat="server"x/asp:ScriptManager>
VI 0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vn;TeL-Cn n i - 7
Phần nội dung
hộp thoại. Đặt
. ___ Tì
Aptech________________________________________________________________________________________________________________________________________________________________________________________
<asp:Panel ID="NoiDung" runat="server"

style="background-color:White; margin: lOpx lOpx lOpx lOpx; 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"x/asp:TextBox> <br />

Password : <asp:TextBox ID="txtPassword" runat="server"x/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>
<aj axToolkit: ModalPopupExtender

ID="Popup01" runat="server"
TargetControlID="cmdOpenPopup"
PopupContxolID="NoiDung"
OkContxolID="cmdLogin"
Drop Shadow="tìrue"
PopupDragHandIeControlID="TieuDe">
</ajaxToolkit:ModalPopupExtender>
</form>
</body>
</httnl>

76
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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 ưiể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ộ úhg
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ự: Tao 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ộ.
Phẩn mềm quản ỉý càn bộ - phiên bản 2.0

©Bản quyền hệ thong thuộc vể Trung tâm đào tạo Hưng Yên - Aptech 2008
Tel: 0321-713.179; E-Mail: apiech@Mtehy.edu.vn; website: http://www.aptech.utehy.vn
▼
1 1 1 J 1 Local intranet Â
Kết quả sau khi đưa ucc vào trang web.
V l.o —hlip://www.aplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

77
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
ở đâ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.ascxT
Vl.o —hllp://www.uplech.utehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

78
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Nội dung trang Footer.ascx và Default.aspx như sau:

Footer.ascx
<%@ Control Language="C#"
AutoEventWireup="true"
CodeFile="Footer.ascx.cs"
lnherits="Footer"
%>
<table border="0px" width="100%">

<tr>
<td align="center" style="font-style:italic" runat="server" id="No¡Dung">
<hr/>
Phần mềm quản lý cán bộ - phiên bản 2.0 <br />
©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#"
CodeFile="Default.aspx.cs"
lnherits="_Default"
%>
<%@ Register
TagPrefix="Aptech"
TagName="Footer"
Src="~/Footer.ascx"
%>
<title>Phần mềm quản lý cán bộ - Versión 2.0</title>
</head>

79
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<body>
<div>
<Aptech¡Footer ÍD="Footer1" runat="server" />
</div>
</form> r -*
TagPrefix
</body> L
</html>
*** 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 vào
trang ascx và "kéo-thả" vào form .aspx (ỏ chế độ Design view).
*♦* Một u c c có thể xuất hiện nhiều lần trong một trang.
♦♦♦ Muốn thay đổi u c c trên các trang thì phải trở về trang ascx ban đầ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 u c c

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ương
thức, sự k iệ n ..
7.3.1 Thêm thuộc tính vào u c c

Để 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 .W eb.UI;
public partial class F o o te r: UserControl

{
private string m au_nen;
public string Mau_Nen
{
set
{

80
Aptech _____________________________________________________________________________________________________________________________________________________________________________
m au_nen=value;
NoiDung.BgColor = mau_nen;
}
get
{
return m au_nen;
}
}

{
Chú ý; - NoiDung là ID của phần tử <TD> trong trang Footer.ascx. Do vậy viết
NoiDung.BgColor = m au_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"/>
Properties
Footer2 <APTECH:FOOTER >
ị
(ID) Footer2
EnableTheming True
EnableViewState True
Maujden blue
runat server
Visible True
M an Nan
Đặt trực tiếp trong cửa sổ Properties
VI.0 - http.'/Avww.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

81
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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ương thức vào cho lớp như khi xây
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 ở trên.
Footer.aspx.cs
using System ;
using System .W eb.UI;
public partial class F o o te r: UserControl

{
private string m au_nen;
public string Mau_Nen
{
set
{
mau_nen=value;
}
get
{
return m au_nen;
}
}
/// Value= true ==> Hiện.

Hi Value=False ==> Ân
public void Show HideUCC (Boolean Value)
{
if (Value == true)
this.Visible = true;
else
this.Visible = false;
}

{
Vl.o - http.'/Avww.aptech.utehy.vn; aptech@utehy.edu.vrt; Tel: 0321-713.319

82
Tài liệu khóa học lập trình web với ASP.NET Biên soạn: Trung tâm Huhg Yên -
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
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 T hêm s ự k iệ n v à o u c
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ũhg 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;
public partial class Footer: UserControl

{
prívate string mau_nen;
pubỉic string Mau_Nen
{
set
{
mau_nen=value;
}
get
{
return mau_nen;
}
}
/// Value= true ==> Hiện.

III Value=False ==> Ấn
public void Show HideUCC (Boolean Value)
{
if (Value == true)
this.Visible = true;
else
this.Visible = false;

83
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Hỉ 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;
}

{
Khi sử dụng:
Trang Default.aspx.es
using System;
public partial class _D efault: System.Web.UI.Page

{
{
Footerl .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 Textboxl 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 TextBoxl;
}
}

84
Aptech _____________________________________________________________________________________________________________________________________________________________________________
7.5 Minh họa tạo một s ô điều khiển

V íd u n ạo một menu cho ứng dụng Quản lý cán bộ, có dạng:
Address ệ ì http://localhost/Ba¡07/MenuQLD.aspx 3 a Go
Main Menu
Trang chủ
Giói thiệu
Hướng dẫn
Liên hệ
Nhập hồ so cán bộ
sửa đối hô sở
Tìm kiẽm
Thõng kê
In ãn
Đăng nhập
User name:
Password:
Đãng nhập
ZẢ
.é] Done
Kết quả
File Menu.ascx
<%@ Control Language="C#" AutoEventWireup=''true" CodeFile="MainMenu.ascx.cs"
lnherits="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:1 px;
border-bottom-color:Silver;
margin:5px 2px 2px 5px;
width :100%;
}
</style>
ctable border="0px" style="border-collapse:collapse; border:solid 1px purple;width:150px">

<tr>

85
Aptech ___________________________________________________________________________________________________________________________________________________________________________________________
<td align="ccntcr" stylc="background color:Purple; color:Whitc;font wcight:bold">

Main Menu
</td>
</tr>
<tr>
<td>
<asp:LinkButton runat="server" ID="lnkHome" CssClass="HLink" Text="Trang chủ"
PostBackUrl="~/DefauIt.aspx"></asp:LinkButton><br />
<asp:LinkButton runat="server" ID="LinkButton1" CssClass="HLink" Text="Giới
thiệu"x/asp:LinkButton> <br />
<asp:LinkButton runat="server" ID="LinkButton2" CssClass="HLink" Text="Hướng
dẫn"x/asp:LinkBũtton><br />
<asp:LinkButton runat="server" lD="LinkButton8" CssClass="HLink" Text="L¡én
hệ"x/asp:LinkButton>
<hr/>
<asp:LinkButton runat="server" ID="LinkButton" CssClass="HLink" Text="Nhập hồ sơ cán
bộ"x/asp:LinkButton> <br />
<asp:LinkButton runat="server" ID="LinkButton3" CssClass="HLink" Text="Sửa đổi hồ
sơ "x/a sp :Lin k B u tto n xb r />
<asp:LinkButton runat="server" ID="LinkButton4" CssClass="HLink" Text="Tìm
kiếm"x/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="ln
ấ n "x/a sp :Lin kB u tto n xb r />
</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 i 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.

86
Aptech_____________________________________________________________________________________________________________________________________________________________________________
1/1/2001 Button 1
January, 2001
Su Mo Tu We Th Fr Sa
31 2 3 4 5 6
□
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3
4 5 6 7 8 9 10
Today: July 28 2008
p r r r r r ^ Local intranet
Kết quả.

87
Aptech _____________________________________________________________________________________________________________________________________________________________________________
File MyCalendar.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyCalendar.ascx.cs"
lnherits="MyCalendar" %>
<%@ Register assembly="AjaxControlToolklt"

namespace="AjaxControlToolkit" tagprefix="cc1" %>
<table>
<tr>
<td>
< a sp :T e x tB o x runat="server" ID="txtNT" style="w idth:100px"></asp:TextBox>
</td>
</tr>
</table>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server"

T argetControl ID="txtNT">
</cc1 :CalendarExtender>
Fiel MyCalendar.ascx.cs
using System;
public partial class MyCalendar: System.Web.UI.UserControl

{
private string gt;
public string GiaTri
{
set
{
gt = value;
txtNT.Text = gt;
}
get
{
return gt;
}
}

{

88
Aptech_____________________________________________________________________________________________________________________________________________________________________________

89
Aptech _____________________________________________________________________________________________________________________________________________________________________________

Muc t iê 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#"
CodeFile="Login.ascx.cs" Inherits="Login" %>
ctable runat="server" id="NoiDungLogin" stvle="border:solid lpx 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%"x/asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align:center; width:40%">Password:</td>
<td>
<asp:TextBox runat="server" ID="txtPassword" VVidth-'99%" TextMode="Password">
</asp:TextDox>
</td>
</tr>
<tr>
<tdx/td>
<td>
<asp:Button runat="server" ID="cmdCancel" Text="Cancel" />
<asp:Button mnat="server" ID="cmdLogin" Text="Login" />
</td>
</tr>
</table>

90
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Bải 2: Tạo điều khiển Loginl 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;
public partial class Login : System.Web.UI.UserControl

{
private string dorong;
public string DoRong
{
set
{
dorong = value;
NoiDungLogin. Width = dorong;
}
get
{
return dorong;
}
}
{
}
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 nhlftig có thêm 3 phương thức. Phương thức CheckAccoutO để
kiểm ưa, 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á ưị ưong ô 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ụhg 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 ỉạ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

91
Aptech _____________________________________________________________________________________________________________________________________________________________________________
{
private string dorong;
public string DoRong
{
set
{
dorong = value;
NoiDungLogin. Width = dorong;
}
get
{
return dorong;
}
}
public Boolean CheckAccount 0
{
return (txtUserlD.Text == "asp.net" && txtPassword.Text == "123456");
}
III Lấy User name trong Ô User name
public string GetUserName 0
{
return txtllserlD.Text;
}
III lấy Password trong Ô Password
public string GetPassword 0
{
return txtPassword.Text;
}
Trang aspx sử dụng điều khiển này sẽ có dạng:

92
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Lo g in .ascx.cs Login.a scx Ị LoginDemo.aspx.es L o g in D e m o .a sp x ▼ X
Client: objects & Events (No Events)
<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="LoginDemo.aspx.es" lnherits="LoginDemo" %>
<%@ Register src="Login.ascx" tagname="Login" tagprefix="uc1 " %>
<title>Login testing</title>
</head>
<body>
<div>
<uc1:Login ID="Login1" runat="server” DoRong="200px" />
<br/>
<asp:Label runat="server" ID="lblThongBao"x/asp:Label>
</div>
£
Q Design I n Split @ Source ' <html>;i<body> <form#forml>
...J-pgjp.■ascx.cs Login.ascx LoginDemo.aspx.es LoginDemo.aspx ▼ X
I^LoginDemo ▼I j^Page_Load(objectsender,EventArgse)
using System;
using System.Web;
.
public partial class LoginDemo : System.Web.UI.Page

{
if (this.lsPostBack==true) ///Nếu không phải lần đầu nạp trang
{
IblThongBao.Text = "Bạn đã nhập User name=" +
Loginl 1.GetUserNameO +" Mật khẩu :" + Login 11 .GetPassword();
}
± A
Nội dung ưang C# của trang ASPX
Bải 4: Tao phần Header và Footer để có thể chèn vào các trang. Giao diện như sau:

93
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Forum Contact HlflSfftTT'lBülT'PBMl

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" lnherits="Header"
%>
<style type="texư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;
}
</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 R ESO U RC E MANAGEMENT SYSTEM - V2.0
</td>
</tr>
<tr style="height:30pt">

94
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<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). Nhuhg thêm một sô hyperlink khác..
Bải 6: Lắp ghép header, footer và Menu để được trang như sau:
HUMAN RESOURCE MANAGEMENT SYSTEM - V2.0

ỹ- ~ \ J - ■l ' y * ''•/ ị i - ĩ ĩ ' ; ' Forum £ jm ta rt D o w iiloail I P n i d u c t s I L ogin
! .. IS-' 1 is
Trang chủ
Giới thiêu
Liên hệ
Nhập hổ so cán bộ
Sửa đoi hồ sơ
lìm kiếm
Thong kê
In ấn
Đ àng nhập
User name:
Password:
Đăng nhập I
Phần mềm quản ỉý cán bộ - phiên bản 2.0

©Bản quyền thuộc về Trung tăm đào tạo Hưng Yên Aptech 2008 -
Tel: 0321-713.179; E-Mail: aptech@ụtehy.eẩii.vn; website: www.aptech.utehy.vn
Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319 95

Aptech _____________________________________________________________________________________________________________________________________________________________________________
Trang code giao diện của ucc MainMenu.ascx.cs

<%@ Control Language="C#" AutoEventWireup="true" CndfìFilfì=j|MaịnMgm agcY rg"
lnherits="MainMenu" %> Main Menu
Trang chủ
Giới thiệu
Liên hệ ^
•A_MainMenu
Nhập hồ sơ cán bộ
{
Sửa đổi hồ sơ
float:none; Giao diện ucc
Tìm kiếm
width:100px; của
Thống kê
text-decoration:none; ^MainMenu.ascx
ân
color:purple;
text-align:left;
■ Đảng tiỉiập
User name
}
Password:
A:Hover
{ Đăng nhập
background-color:silver;
color:Purple;
}
</style>
<table border="0px" style="border-collapse:collapse;

border:solid 1px purple;width:150px">
<tr>
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"x/asp:LinkButton>
</td>

96
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</tr>
<tr>
<td>
runat="server" ID="LinkButton8" Text="Liên hệ"x/asp:LinkButton>
</td>
</tr>
<tr>
<td>
runat="server" ID="LinkButton" Text="Nhập hồ sơ cán bộ"x/asp:LinkButton>
</td>
</tr>
<tr>
<td>
runat="server" ID="LinkButton3" Text="Sửa đổi hồ sơ"x/asp:LinkButton>
</td>
</tr>
<tr>
<td>
runat="server" ID="LinkButton4" Text="Tìm kiếm"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
<asp:LinkBiJtton Width="100%" CssClass="A_MainMenun
runat="server" ID="LinkButton5" Text="Thống kê"x/asp:LinkButton>
</td>
</tr>
<tr>
<td>
runat="server" ID="UnkButton6" Text="ln ấn"x/asp:LinkButton>
</td>

97
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</tr>
<tr>
Đă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>
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 tín đặ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
conừols 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á ừị
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ố dố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 I
Request là một đối các trang khác
gủl (Submit) đến.
Mô hình gửí/đỌc giá trị:

Form l
User name : aptech ----- Request("txtUserName") => aptech

-h@u Request("txtPassword") => 123456
Password: *******
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Trang G ửi Trang nhận
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ủl 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 Webforml.aspx
để hiển thị.
Trang gui - Mozilla Firefox
File Edit View Go Bookmarks Tools Help
MMBBKm-Mu
- K j) 1_J http://localhost:1050/Default.aspx © Go
*
•
User name: quynm

Password: 123456
Submit
Done
Trang nguồn (gửi): Default.aspx
Trang nh°n - Mozilla Firefox (V|fn~ |fx"I

File Edit View Go Bookmarks Tools Help
<^3 - - http://localhost:1050/WebForml.aspx v © Go
Username: quynm
Password: 123456
Done

99
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Kết quả nhận về.

Code của 2 trang sẽ như sau:
D eíault.aspx X
Client O b jects & Even ts V (No Events)

<%@ Page Language="C#" Aut oEv ent Wireup="true" A
C o d e B e h i n d = " D e f a u l t .aspx.cs" I n h e r i t s = " b a i 8 ._Default" %>
^ c h e a d runat="server " x t i t l e > T r a n g giri</titlex/head>
3 <body>
3 <form id="forml" runat= "s e r v e r " m e t h o d = " P o s t ">
User name:
<as p: TextBox r u n a t = "s e r v e r " I D = fftxtUserName">
< / a s p :T e x t B o x x b r />
Password:
<as p: TextBox r u n a t = " s e r v e r " ID="txtPassword" >
< / a s p :T e x t B o x x b r />
<asp:Button runat="server" I D = " c m d S u b m i t "

Text= "Submit" P o s t B a c k U r l = ,f~/WebForml .aspx" />
</form>
-</body>
■</html>
Design Cl Split 0 Source <<> <bcdy> <form#forml>
Default, aspx
W eb Fo rm l.asp x ▼ X
Client O bjects & Events V (No Events) V
<%0 Page L a n g u a g e = r,c#" AutoEventKỉireup=,,true"

CodeBehi nd= "We bF orm l .aspx .es " Inherits = r,bai8 .WebForml" %>
chead runat="server">
< tit le>Trang nhận</title>
</head>
<body>
<form id="forml" r u n a t = " s e r v e r ">
<asp: Label r u n a t = ,fserver " ID="lblKetQua">
</asp:Label>
</form>
</body>
</html>
V
>
Q Design n Split @ Source « «>
Webforml.aspx

100
Aptech _____________________________________________________________________________________________________________________________________________________________________________
WebForm 1.aspK.cs WebForm1. aspx ▼X
■Ì£bai8,WebForml V ,vPage_Load(object sender, EventArgs e) V
using System; A
[3namespace bai8
public partial class WebForml : S y s t e m - W e b -UI .Page
{
H p rotected void P a g e _ L o a d (object sender, EventArg:
{
lblKetQua.Text = "Username: " +
R e q u e s t . F o r m . G e t ("txtưserName") +
"<bc>Pa5swoi:d: " +
R e q u e s t . F o r m . G e t (" t x t P a s s w o r d " ) ;
}
}
L 1 V
< ___________________ m\
Code xử ]ý của ữang webforml.aspx.es
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.
9.1.2 C á c thành phần (thuộc tính và phương thức) chính
♦♦♦ Phươ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ỉ U R L”): Chuyển tới một trang khác.
Tạo một trang Login hoàn toàn bằng phương thức Response.write như sau:

101
Aptech _____________________________________________________________________________________________________________________________________________________________________________
'Ü Response - Microsoft Internet Explorer _ fn X

File Edit View Favorites Tools Help * 1
Address http://localhost:1050/WebForm2.aspx v 0 “
A
Login:
User name:
Password :
Login
-
Done Local intranet

102
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Trang code sẽ như sau:

WebForm2.aspx.cs WebForm2.aspx ▼ X
Client Objects & Events V (No Events) V
<%0 Page Language="C#" AutoEventWireup="true" A
CodeBehind="WebForm2.aspx.cs" Inherits="bai8 .WebForm2'' %>
< IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
□ <ht ml x ml n s = " h t t p : / / www.w3 . o c a / 19 99/ x h t m l " >

¿]<head runat="server">
<title>Response</title>
-</head>
<body>
<h2>Login:</h2>
User name: <% Response.Write("<input>"); %> <br />
Password : <% Response.Write("<input type=,passwordT>");%>
<br/> <%Response.Write("<input type=,submitT value='LoginT>");%>
-</form>
-</body>
-</html>
,y
£ ^ { 1 ^ __________________________________________ Mi
Gi Design n Split | Isl Source~| <html> <body> <form #form l> |< % % > |
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ý.
9.3.2 Các thành phần (thuộc tính và phương thức) chính

♦♦♦ CreateObject(“COM Specification”) ^ ít dùng trong ứng dụng .NET
V MachineName: Sữing; Trả về tên của máy tính server đang chạy.
Mappath(“Virtual patìi”): Trả về đường dẫn vật lý của đường dẫn ảo tươ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 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”);

103
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
9.4 Session Object
9.4.1. Biên Sesstìon

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.
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 b i ế 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ấ
y /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>);

104
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
+ 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.

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.UnLockO để 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 ữong 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 hoa: c ầ n tạo 3 trang là Home.aspx/cs, Login.aspx/cs và Global.asax như sau:
Vl.o —hltp://www.aplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

105
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Homp.aspx Home.aspx.es í Global.asax Ị Login.aspx Ị Loqln.aspx.es 1 x
client Objects &Events I

I (No Events) ▼
-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs"
lnherits="Home" %>
<title>Thanh toán - Trang cần phải Login trước khi xem</title>
</head>
<body> —
<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> ▼
<l I ►I
L j Design In split EE Source <html> <head> <title> 0
Nội dung trang Home.aspx
V I.0 —hllp://www.uplech.utehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

106
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Home.aspx ' Hnmp.aspx.r«; Global.asax Login.aspx Loqin.aspx.es ]__________________________________________________ T X
^Home ▼I >^Page_Load(object sender, EventPrgs e) I
using System;
using System.Web;
public partial class Home : System.Web.UI.Page

{
{
if (Session.Contents ["TrangThai"].ToString () == "chuadangnhap")
{
Response.Redirect ("Login.aspx");
}
n
Trang Home.aspx.cs
y ' Home.aspx I Home.aspx.es Global.asax Login.aspx Login.aspx,csj_______________________________T x
1Server objects &Events (No Events) d

<%@ Application Language="C#" %> ▲
<script runat="server">
void Application_Start(object sender, EventArgs e)
/i
// Code that runs on application startup
i
/
void Application_End(object sender, EventArgs e)
/i
// Code that runs on application shutdown
\
/
--
void Application_Error(object sender, EventArgs e)
I/
// Code that runs when an unhandled error occurs
1
)
void Session_Start(object sender, EventArgs e)
ii
// Code that runs when a new session is started
Session.Add ("TrangThai", "chuadangnhap");
\!
void Session End(object sender, EventArgs e)
J il
« IJ I
J
Trang Global.asax

107
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Hnme.aspx Hom e.aspx.cs Global.asax Login.aspx Login, a s p x x s ▼ X
Client Objects & Events (No Events)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs"

lnherits="Login" %>
chlml xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> <title>System Login</title> </head>
<body>
<table>
<tr>
<td>User name (asp.net): </td>
<td>
<asp:TextBox runat="server" ID="txtUserlD" 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>
11_____:___________________________________________________________ I.......... -....

□ Design a Split 1*3 Source <html> <body> <form#forml> <table> <tr> <td> 0
Trang Login.aspx
ome.aspx rHoroe.aspx.es Global.asax Login.aspx Login.aspx.es* ▼ X
.jf*ij>cmdLogin_Click(object sender, EventArgs e)
using System;
public partial class Login : System.Web.UI.Page

{
protected void cmdLogin_Click (object sender, EventArgs e)
{
if (txtUserlD.Text == "asp.net" && txtPassword.Text == "123456")
{
Session.Contents ["TrangThai"] = "DaDangNhap";
Response.Redirect ("Home.aspx");
Vl.o - http:/Avww.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

108
Aptech_____________________________________________________________________________________________________________________________________________________________________________
Trang Login.aspx.es

109
Tài liệu khóa học lập trình web với ASP.NET - Biên soạn: Trung tăm Huhg Yên
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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="lndex.aspx.cs"
lnherits="lndex" %>

<title>Home Page - Hit counter</title>
</head>
<body>
<h1>Chào mừng bạn đã đến website của chúng tôi</h1>
<asp:Label runat="server" ID="lblSLKhach"x/asp:Label>
</form>
</body>
</html>_______________________________________________________________________________
Trang Index.aspx.cs________________________________________________________________
using System;
public partial class Index : System.Web.UI.Page
{
{
lblSLKhach.Text="Bạn là vị khách thứ:" +
Application.Contents["SLTruyCap"].ToString();
}
1____________________________________________________________________
Trang Global.asax____________________________________________________
<%@ Application Language="C#" %>
cscript runat="server">
void Application_Start(object sender, EventArgs e)
{
Application.Lock ();
System. lO.StreamReader sr;

sr = new System.lO.StreamReader (Server.MapPath ("SL.txt"));

110
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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);
}
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 0) + 1;
//LƯU vào file SL.txt (mở và ghi đè)

System.lO.StreamWriter sw;
sw = new System.lO.StreamWriter (Server.MapPath ("SL.txt"));
sw.Write (Application.Contents ["SLTruyCap"].ToString 0);
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ượng người truy cập
luôn luôn tăng lên bất kể là server có tắt hay máy tính bị trục trặc.
Đâ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.

111
Aptech_____________________________________________________________________________________________________________________________________________________________________________
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í du:
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 ưa 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!".
FindControlQ
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 í du; 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

112
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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.
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).
Vl.o — hllp://www.uplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

113
Aptech_____________________________________________________________________________________________________________________________________________________________________________
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

114
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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-tìme gọi là quá trình gỡ rối (hay Debug).
11.5.2 C h ạ y ứng dụng ở c h ê độ gỡ rối
11.5.3 Khái niệm điểm dừng
11.5.4 C h ạ y từng dòng lệnh vái c h ê độ step Into (F8)
11.5.5 C h ạ y từng dòng lệnh vói c h ê độ step Over (Shift-F8)
11.5.6 C h ạ y từng dòng lệnh với c h ê độ 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

115
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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 úhg 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 XM L (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à: O LE DB Provider (nằm trong System.Data.OLEDB) dùng để truỵ xuất đến
bất kỳ C SD L nào có hỗ trỢ O L E D B : SQL Provider (nằm trong
System.Data.SQLClient) chuyên dùng để truy xuất đến CSDL SQL Server (Không
qua O LE 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 úlng 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
ASP .NET Windows Forms
Class Framework
Drawing
-------- XML
----- Data
J 11 * I ADO .NET
Common Language Runtime
System Services
Vị trí của ADO.NET trong kiến trúc của .net Framework
V I.O http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

-
116
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
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.N ET... 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 ứhg
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).
1 makes a connection w
^ 2 passes some query and read result from DB
Connected Client
^ 3 passes another query and read result jrom £>if Database
System
4 disconnectsJrom the DB system v /
T ra d itio n a l D ata A c c e s s A rch ite c tu re
_1, m okes ạ Íữ/iỉtỉcíiữn _________ ________ *

2 passes some query and ẹei result back
Client 3 disconnectsfrom the DB system
Disconnected A makes connects» again Database
System
5 passes another query and get result
6 disconnectsfrom the DB system
ADO.Net D is co n n e cte d D a ta A c c e s s A rc h ite c tu re

117
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
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:
C n n .O p en O : 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.CloseO;
-> 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 đã được mở)
+ 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

{
III <summary>
III Hàm kết nối đến Cơ sở dữ liệu
III </summary>
III <param name="DBFileName">Đường dẫn tới file MDB</param>
III <retums>Trả về đối tượng OledbConnection hoặc null</retums>
public static OleDbConnection OpenDB (string DBName)
{
try
{
OleDbConnection Conn = new OleDbConnection 0;
Conn.ConnectionString="Provider=Microsoft.jet.oledb.4.0;data source="+DBName;
Conn.Open 0;

118
Aptech _____________________________________________________________________________________________________________________________________________________________________________
return Conn;
}
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,
{
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"));

119
Aptech_____________________________________________________________________________________________________________________________________________________________________________
1Solution Explorer
©till , 1 1 a #
+ -ĩ| App_Code
ặ li0/ App_Data
Ẻ~ 1 J NWIND.MDB
+ ^ Bin
+ l_j| Lession 01 - Theory
ế ; j Lession 02 - LAB
+ 'Cũ1Lession 03 - Theory
+ r~3Lession 04 - LAB
s n Lession 05
+ r j Lession 06
+ P3 Lession 07
+ i'~3 Lession 08
ả r~j Lession 09
è 'Cà Lession 10
ế ỉ"3 Les5ion 11
ồ lì^ Lession 12
FHÍBBIC'efauít.dSp' p
^ Default.aspx.es ▼
¿J_ _ _ _ _ _ _ _ _ I -U
Vị trí của tệp CSDL nwind.mdb

120
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
- 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..)
13.3.2 Lớp Command
♦♦♦ Chứ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 ExecuteNonQueryO: 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 Coimt(*)...
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 ExecuteXMLReaderO: 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.

121
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Cmd .CommandType=CommandT ype .|

•ijjStoredProcedure
lif* TableDirect
lĩt1 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.

122
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Default.aspx.cs
using System;
using System.Data;
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,
{
//Tạo đối tượng Connection và mở kết nối đến CSDL
Conn=new OleDbConnection();
Conn.ConnectionString="Provider=Microsoft.jet.oledb.4.0; data source=";
Conn.ConnectionString += Server.MapPath("../App_Data/nwind.mdb");
Conn.OpenO;
//Tạo đối tượng Command và thực thi câu lệnh đếm số bảng ghi
OleDbCommand Cmd;
Cmd.CommandText = "Select CountO from Products";
Cmd.Connection = Conn;
// Hiển thị kết quả trên Label

int SL = (int) Cmd.ExecuteScalar();
IblThongBao.Text = "Số bản ghi trong bảng Products:" + SL.ToString ();
// Giải phóng kết nối.

Cmd.Dispose ();
Conn.Close 0;
}
Y íd ụ ; Thêm Tên nhà cung cấp vào bảng Suppliers:

Trang giao diện
CodeFile="Command_lnsertData.aspx.cs" lnherits="Lession_12_CommandJnsertData"
%>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional. dtd">

123
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<title>lnsert data</title>
</head>
<body>
<h2>
<asp:TextBox runat="server" ID="txtNCC"></asp:TextBox>
<asp:Button runat="server" ID="cmdAdd" Text="Thêm" onclick="cmdAdd_Click" />
</h2>
</form>
</body>
</html>
Trang Code behind:

using System;
using System.Data;
public partial class Lession_12_CommandJnsertData : System.Web.uI.Page

{
{
}
protected void cmdAdd_CNck (object sender, EventArgs e)
{
// Tạo đối tượng Connection và mở kết nối đến CSDL
Conn = new OleDbConnection ();
Conn.ConnectionString = "Provider=Microsoft.jet.oledb.4.0; data source=";
Conn.ConnectionString += Server.MapPath ("../App_Data/nwind.mdb");
Conn.Open 0;
// Tạo đối tượng Command và thực thi câu lệnh đếm số bảng ghi
OleDbCommand Cmd;
Cmd.CommandText = "Insert into Suppliers(CompanyName) valuesC" + txtN CC.Text +
Cmd.ExecuteNonQuery ();
Cmd.Dispose ();

124
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Conn.Close ();
}
13.3.3 Lớp DataReader
♦♦♦ Chức năng: Dùng để đón nhận kết quả ưả 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 ữả 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.
■ String: GetName(int i) -> Trả về tên của cột i
■ Getlnt(int i), GetString(int i),..., GetXXX(int i) -> Trả về giá ữị 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ụ D r- cho phép đọc dữ liệu của tlftig ô (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:
CodeFile="DataReader.aspx.cs" lnherits="Lession_12_DataReader" %>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional. dtd">
<title>OleDbDataReader demo</title>
</head>
<body>
<h2> Danh mục sản phẩm</h2>
<asp:ListBox runat="server" ID="lstDSSP" Rows="20">
</asp:ListBox>
</form>

125
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</body>
</html>
Trang Code Behind

using System;
using System.Data;
public partial class Lession_12_DataReader: System.Web.UI.Page

{
{
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";
OleDbDataReader D r; ///không có new

Dr = Cmd.ExecuteReader ();
//Duyệt và đưa vào IstDSSP

while (Dr.ReadO == true)
{
IstDSSP.Items.Add (Dr ["ProductName"].ToString());
}
Cmd.Dispose ();
Conn.Close ();
}
Câu hòi: Viết lstDSSP.Items.Add (Dr [0].ToStringO) có được không ?.

126
Aptech ____________________________________________________________________________________________________________________________________________________________________________________________
13.3.7 Lớp DataColumn
♦♦♦ Chức năng: Là một thành phần tạo nên DataTable.

Khai báo:
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ột.
❖ Ví dụ :
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", Sỵstem.Type.GetType ("Int32"));
Dc_HVT.Caption = "Tuổi";
13.3.8 Lớp DataTable
V Chức năng: Quản lý dữ liệu dạng bảng 2 chiều (Các hàng và các cột).
Khai báo:
DataTable D t;
Dt=new DataTableO; hoặc Dt = new DataTable("Tên_Bảng");
■ DataRow NewRow(): Trả về một đối tượng DataRow;
■ Clear(): Xóa tất cả các dữ liệu trong DataTable
*** Mộ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 ttong DataTable. Rows cũng có
các phương thức để thêm/xóa hàng.

127
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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 D t;
Dt=new DataTableO;
Dt.Columns.Add (Dc_HVT); // Tạo cột họ tên nhờ vào Column ỏ trên
Dt.Columns.Add(Dc_Tuoi); //Tạo cột tuổi.
Hoặc có thể thêm ngắn gọn hơn: Dt.Columns.Add("HoVaTen",Type.GetType("String"));
13.3.9 Lá p DataRow
♦♦♦ Chức năng: Là một đối tượng để quản lý một hàng của một DataTable.
♦♦♦ Khai báo: DataRow Dr; Lưu ý: Vì Dr phụ thuộc vào bảng (DataTable) nên nó chỉ được
tạo ra bởi một DataTable có sẵn, không thể tạo DataRow theo kiểu:
DataRow Dr=new DataRow()!!!
V 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ản ghi
có giá trị tương ứng là {"Nguyễn Văn An", 30} và {"Nguyễn Văn Bình", 20}.
DataTable D t;
Dt=new DataTableO;
Dt.Columns.Add (Dc_HVT);
Dt.Columns.Add(Dc_Tuoi);

128
Aptech _____________________________________________________________________________________________________________________________________________________________________________
DataRovv 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
13.3.10 Lớp DataSet
♦♦♦ Chức năng: Là một đối tượng chứa các DataTable. Nó là nơi lull trữ dữ liệu tạm thời
cho ứng dung trong quá trình xử lý. Lớp DataSet này nằm trong System.Data.
0 L
1 I
2 h
DataSet Object
V 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ột bảng cụ thể trong
Dataset.
♦♦♦ Ví dụ : Xem ví dụ mục 13.3.11
13.3.11 Lớp DataAdapter
V Chứ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).

129
Aptech _____________________________________________________________________________________________________________________________________________________________________________

■ Fill (DataSet, Tên_Cho_DataSet): Điền dữ liệu lấy được vào DataSet.
■ Update(DataSet/DataTable...): Cập nhật dữ liệu trong DataSet, DataTable ngược
trỏ về Cd sỏ dữ liệu.
♦♦♦ Mộ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"
lnherits="Lession_12_DataSet" %>
<title>DataSet demo</title>
</head>
<body>
<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;
public partial class Lession_12_DataSet: System.Web.UI.Page

{
{
V I.0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vrt; Tel: 0321-713.319

130
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Conn.ConnectionString += Server.MapPath ("../App_Data/nwmd.mdb");

Conn.Open ();
//Tạo đối tượng Command và select toàn bộ bảng Suppliers

OleDbCommand Cmd;
Cmd.CommandText = "Select * from Suppliers";
OleDbDataAdapter Da;
Da=new OleDbDataAdapter();
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 ();
}

131
Aptech _____________________________________________________________________________________________________________________________________________________________________________

M u 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
Field Name Data Type Description 1* 1

? id AutoNumber □
HoVaTen Text Ho và tên
NgaySinh Date/Time Ngày sinh
GioiTinh Yes/No Giới tính. Yes=Nam, No = Nữ
DiaChi Text Đia chì (255)
SoDienThoai Text sõ điên thoai (50)
NgayVaoDang Date/Time Ngày vào đàng (dd/MM/yyyy)
MaBangCap Text Mã bắng cấp (DH, ThSj TS)
MaPhongBan Text Mã phòng ban
MaChuyenMon Text Mã chuyên môn (K5, CNj Ths, Ts)
MaChucVu Text Mã chức vu
BanThan Memo Ghi chú vê bàn thân. 1
Bảng Bằng cấp: tbiBangCap

Field Name Data Type Description -1
V MaBangCap Text Mã bang cãp (DH, Ths, TS)
J
► MoTa Text Mô tả vê bang, not cấp, năm cấp v .v ...
■p
V Bảng phòng ban: tblPhongBan

Field Name Data Type Description
V MaPhong Text Mã phòng ban I
TenPhong Text Tên phòng ban
SoDienThoai Text sõ điên thoai liên hê cùa Phòng ban
DiaChi Text Đia chi cùa phòng ban (Phòng mẩy, tâng mây...)
ZẢ
**+ Bảng trình độ chuyên môn: tblChuyenMon

Field Warne Data Type Description
9 MaChuyenMon
MoTa
Text
Text
Mã chuyên môn (KS hóa, Ths Toán, TS văn chương...)
Mô tả
J
Bảng chức vụ: tblChucVu

Field Name Data Type I Description
V MaChucVu
MoTa
Text
Text
Mã chức vu (GD, TP, PTP, ...)
Mô tả (Trưởng phòng Khoa hoc, Giám đõc kỹ thuât..,) J

132
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Bảng người dùng

Field Name Data Type Description -
ĩ' TenDangNhap Text Tên đăng nhâp
MatKhau
__ 11
Text Mât khấu
QuyenHan Number Quyên han (l=thãp nhãtj 5=cao nhât). Default=l
TrangThai Number 1=Active, 0 = unactive (Bi khóa)
NgayTao Date/Time Ngày tao tài khoán này.
GhiChu Text Ghi chú thêm
k 1 ZẢ
♦♦♦ Mối quan hệ giữa các bảng (Chú ý chọn Cascading Update/ Delete khi tạo)
tblCanBo
id MaChuyenMon
MaBangCap
HoVaTen MoTa
MoTa
NgaySinh
GioiTinh
DiaChi
SoDienThoai
NgayVaoDang
MaBangCap
MaPhong MaPhongBan
TenPhong MoTa
MaChuyenMon
SoDienThoai MaChucVu
DiaChi BanThan
tblUser
TenDançÿttap
MatKhau
QuyenHan
GhiChu
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" %>
<!DO CTYPE html PU B LIC "-//W3C//DTD XH TM L 1.0 Transiũonaly/EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-ưansitional.dtd">
<hừnl xmlns="http://www.w3.org/1999/xhtml">
<title>Nhập thông tin người dùng</title>
.CanPhai {text-align:right; font-style:italic}
</style>
</head>
<body>
<div>

133
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<table style="border:soIid lp x purple; border-colIapse:collapse;">

<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>
<td class="CanPhai">
Tên đăng nhập
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"x/asp:TextBox>
</td>
</Ư>
<tr>
Mật khẩu
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"x/asp:TextBox>
</td>
</tt>
<tr>
Quyền hạn
</td>
<td>
<asp:DropDownList ID="ddlQuyenHan" runat="server"
style="text-align:left">
<asp:Listltem> 1</asp:Listltem>
<asp:Listltem>2</asp:Listltem>
<asp:Listltem>3</asp:Listltem>
<asp:ListItem>4</asp:ListItem>
<asp: Listltem>5</asp:Listltem>
</asp:DropDownList>
</td>
</ư>
<tr>
Ghi chú
</td>
<td>
<asp:TextBox ID="txtGhiChu" runat="server"
Rows="2" TextMode="MultiLine"x/asp:TextBox>
</td>
</ư>
<tr>
<td>
</td>
<td>
<asp:Button ID="cmdThem" runat="server" Text="Thêm" ondick="cmdThem_Click" t>
</td>
</ư>
</table>

134
Aptech ______________________________________________________________________________________________________________________________________________________________________________________
</div>
</form>
</body>
</htmí>
2.2 Viết code behind.

NhapNguoiDung.aspx.es
using System;
using System.Data;
public partial class Lession_13_NhapNguoiDung : System.Web.UI.Page

{
{
}
protected void cmdThem_Click (object sender, EventArgs e)
{
Conn = new OleDbConnection 0;
Conn.ConnectionString += Server.MapPath ("../App_Data/QLCB.mdb");
Conn.Open ();
sữing strSQL;
sưing TenDN=txtUserName.Text;
string M atKhau =txtPass word .Text;
string GhiChu=txtGhiChu.Text;
string NgayTao=DateTime.Now.Month.ToString() +"/" + DateTime.Novv.Day.ToSữingO;
NgayTao += "/" + DateTime.Now.Year.ToStringO;
int QuyenHan=int.Parse(ddlQuyenHan.Text);
strSQL="Insert into tbluser(TenDangNhap, MatKhau, QuyenHan, NgayTao, GhiChu)

strSQL += " values (’" + TenDN + "V" + MatKhau +
+ QuyenHan + + NgayTao + "V" + GhiChu
// Tạo đối tượng Command và select toàn bộ bảng Suppliers

OleDbCommand Cmd;
Cmd.CommandText = strSQL;
Cmd.ExecuteNonQuery ();
txtUserName.Text =
txtPassword.Text =
txtGhiChu.Text =
ddlQuyenHan.Text - "1";
txtUserName.Focus ();
}

135
Aptech _____________________________________________________________________________________________________________________________________________________________________________
3. Hiển thị dữ liệu trong bảng lên trình duyệt

3.1 Trang giao diện
HienThiN guoiDung. aspx
<%@PageLanguage="C#" AutoEventWứeup="true" CodeFile-'HienThiNguoiDung.aspx.cs"
Inherits="Lession_13_HienThi" %>
<!DOCTYPE html PU B LIC "-//W3C//DTD XH TM L 1.0 Transitional//EN"

"http:Vwww.w3.org/TR/xhtmll/DTD/xhtrnll-transitional.dtd">
<title>Danh sách người dùng</title>
</head>
<bodv>
<div>
<h2> Danh sách người dùng</h2>
<asp:DataGrid runat="server" id="dgiDSNS"x/asp:DataGrid>
</div>
</form>
</body>
</htirJ>
3.2 Trang code behind

Trang HienThiNguoiDung.aspx.es
using System;
using System.Data;
p u h l i r p a r tia l r l a s s T .PS sion_ 13_ H ip n T h i : S y s te m . W p b .lJ I .P a g e
{
{
II Tạo đối tượng Connection và mở kết nối đến CSD L
Conn = new OleDbConnection 0 ;
Conn.ConnectionSưing = "Provider=Microsoft.jet.oledb.4.0; data source=";
Conn.ConnectionSưing += Server.MapPath ("../App_Data/QLCB.mdb");
Conn.Open 0;
// Tạo đối tượng Command và select toàn bộ bảng Suppliers

OleDbCommand Cmd;
Cmd = new OleDbCommand 0 ;
Cmd.CommandText = "Select * from tblUser";
Da = new OleDbDataAdapter 0 ;
Da.SelectCommand = Cmd;
DataSet DsNCC = new DataSet 0 ;

D a.Fill (DsNCC, "DS_USer");
// Hiển thị trên một bảng

dgrDSNs.DataSource = DsNCC.Tables ["DS_USer"];
dgrDSNS.DataBind 0;
}

136
Aptech _____________________________________________________________________________________________________________________________________________________________________________
4. Cập nhật dữ liệu bằng DataSet và DataAdapter

Để cập nhật dữ liệú vào trong CSDL, ta có thể dùng câu lệnh SQL dạng như "UPDATE
...W H ERE 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:
DataSet
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 vao 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/
s qic ommandBuilder)
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
CodeFile="UpdatewithDataAdapter.aspx.cs"
lnherits="Lession_13_UpdatewithDataAdapter" %>
chtml xmlns="http://www.w3.org/1999/xhtmr>
<title>Cập nhật dữ liệu thông qua Data Adapter</title>
</head>
<body>

137
Aptech _____________________________________________________________________________________________________________________________________________________________________________

<h2>sửa trạng thái đăng nhập thành 1</h2>
<asp:Button runat="server" ID="cmdEnableAIIUser"
Text="Enable all users"
onclick="cmdEnableAIIUser_Click" />
</form>
</body>
</html>
Trang code behind: UpdatewithDataAdapter.aspx.es

using System;
using System.Data;
public partial class Lession_13_UpdatewithDataAdapter: System.Web.UI.Page

{
protected void cmdEnableAIIUser_Click (object sender, EventArgs e)
{
Conn.ConnectionString += Server.MapPath (”../App_Data/QLCB.mdb");
Conn.Open ();
// Tạo đối tượng Command và select toàn bộ bảng tblllser

OleDbCommand Cmd;
Cmd.CommandText = "Select * from tbluser";
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++)
{

138
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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ượng không còn sử dụng

Cmd.Dispose ();
Da.Dispose ();
Conn.Close O;
}
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 ứ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: < % # G Ì á _ T r ỉ % > .
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ụ:

139
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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.DataBindO đề thực sự gắn kết.
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,...
DataSourcelD: 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 DataSourcelD 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í du 1;
Tạo một mảng có 100 phần tử (từ 0 đến 99), sau đó hiển thị ữên một Listbox thông qua
cơ chê DataBinding:

140
Aptech _____________________________________________________________________________________________________________________________________________________________________________
L e stio n 1 4/A rray B in d in g .asp x Lession M /ArrayBinding.aspx.cs
Client Objects & Events (No Events)
<%@ Page Language="C#" AutoEventWireup="ừue"

CodeFile="ArrayBinding .aspx .cs" Inherits= "Lession_14_ArrayBinding" % >
0 <html xmlns="httD : //www.w3 .ora/1999/xhtml" >

ỏ <head runat= "server">
<title >Binding một mảng vảo Listßox </title >
- < Alead >
<body>
<form id="forml" runat= "server" >
<asp:ListBox runat= "server" ID="lstĐanhSach"x/asp:ListBox>
</form>
- </body>
L<ýhtmí>
Ü____________________________________________ L. c
a Design o Split E3 Source <html> <head> 0
Trang giao diện: ArrayBinding.aspx
C h ủ ý : 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, DataSoucelD 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ó).
Lession 14/ArrayBindinq.aspx Lession 14/Arr...nding.aspK.es* ỵr X
~^] ^Page_Load(object sender, EventArgs e)
using System;
a public partial class Lession_14_ArrayBinding : System.Web.UI.Page
K
{
int[] Mang=new int[ 100]; '3 Binding một màng vào ListB ox -
for (int i = 0; i < 100; i++) File Edit View Favorites Tool:
{
Mang [i] = i;
}
0
1 HHJ
IstĐanhSach .DataSource = Mang;
this.DataBind 0 ; 2
3 zl
11
rr * J Local intranet
Trang Code và kết quả: ArrayBinding.aspx.es
VI.0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vri; Tel: 0321-713.319

141
Aptech______________________________________________________________________________________________________________________________________________________________________________________________
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:
Trang giao diện

142
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Lession H /Da..,erBinding.aspx L e ssĩo n 1 4 /D a t...ind in g.asp K .es - X
Lession_l 4_DataBinding z \ fỹ*Page_Load(object sender, EventArgs e) VỊ
using System; 7
public partial class Lession_14_DataBinding : System.Web.UI.Page

{
{
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.CommandText = "Select * from tblUser";
OleDbDataReader Dr;
// Bind kết quả vào Listbox để hiển thị trên trang web I
<l I Jj
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) ừong 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 cung, cần phải gọi phương thức DataBind 0 để 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.DataReadO == 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.

143
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
H iện tại ASP.NET cung cấp m ột s ố Data source controls sau đây:
- 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
sqỉ, sau đó có th ể gắn vào control này đ ể lấy lại d ữ l i ệ 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ữ liệu

a) Tạo điều khiển SqlDataSouce:
Cú pháp:
<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ương ứng"
ID="Giá trị ID">
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ụ; Tao 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 đó: IData Di recto ry| 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 lnfo=False;lnitial Catalog=QLCB;Data Source=localhost"/>

144
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Lession 15/dat...eControl.aspx* web.config Ị Lession 13/Upd...dapter.aspx.es ▼ x
Client Objects & Events (No Events) J*]

ICodeFile="datasourceControl.aspx.es" Inherits="Lession_15_datasourceControl" %>
<html xmlns= "httD : /¿WWW■w3 .org/1999/xhtmr1>

ệ <head runat= "server1 ">
<title >SqlDataSouce confrol</titleì>
:
Ị-</head>
ị <body>
<form id="forml" runat= "server" >
<div>
<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>

</div>
Ị- < /fo rm >
-</b o d y>
*-</htmí>
1.......
Q Design I □ Split s Source I <%@ Page %>
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 ở trên rồi thì việc sử dụng nguổn dữ liệu này để hiển
thị khá đơn giản.
Ví dụ: Hiển thị bảng tblUser vừa lấy được ở trên.

Hiển thị danh sách người
dùng
CodeFile="datasourceControl.aspx.es" lnherits="Lession_15_datasourceControl" %>
<title>SqlDataSouce control</titie>
</head>
<body>
<asp:SqlDataSource runat="server" ProviderName="System.Data.OleDb"
SelectCommand="Select * from tblUser" ID="DSND" >

145
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
</asp:SqlDataSource>
<asp:GridView runat="server" ID="dgr" DataSourcelD="DSND" >

</asp:GridView>
</form>
</body>
</html>
Ví du 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.
Lession 15/DataTextField.aspx Lession 15/DisplaytblUser.aspx ▼ x
I Client: objects & Events ▼ I (No Events)

CodeFile="DataTextField.aspx.cs" lnherits="Lession_15_DataTextField" %>
<title>Hiển thị danh sách nhà cung cấp trong nwind.mdb</title>
</head>
<body>
<asp:SqlDataSource runat="server" ID="DSNCC"
ProviderName="System.Data.OleDb"
ConnectionString="<%$ ConnectionStrings:NWIND %>"
SelectCommand="Select * from Suppliers'^
<h2> Danh sách nhà cung Cấp</h2>

<asp:DropDownList runat="server" ID="ddIDSNCC"
DataSourcelD="DSNCC"
DataT extField="CompanyName">
</asp:DropDownList>
Li
Q Design n Split 53 Source ! I <%@ Page %>
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"/>

146
Aptech_____________________________________________________________________________________________________________________________________________________________________________
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í du 1: Hiển thị bảng tblUser trong gridview, nhưng có thêm chức năng cập nhật.
3 Untitled Page - Microsoft Internet Explorer -!□ ! X
File Edit View Favorites Tools Help »
Q « * • J • U Ll ¿1 ù > \P Search Favorites
Address |<^ http://localhost/A5P.NET%20Course/Lession%2Q15/Upt [ Q Go
C ậ p n h ậ t thông tin người dùn g

TeiiDaiigNliap MatKhau
Edit quynm 123456
Update Cancel loilq |abcdef
Edit longpd abcl23
Edit hurigdb xmanees
Edit user 123
Edit admin 456
Edit superadmin mnhkjfs
Edit userl 3436445
Edit us er2 434hbghf#$#
ZẢ
HT * J Local intranet
Giao diện trang web

Để có thể cập nhật được thực sự vào CSDL, thụt 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 ữong sự kiện Row_Updating của
GridView.
Trang giao diện
CodeFile="UpdateDeleteUser.aspx.cs" Inherits="Lession_15_DisplaytblUser" %>

147
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<title>cập nhật người dùng</title>
</head>
<body>
<asp:SqlDataSource runat="server" ID="DSND"
ProviderName="System.Data.01eDb"
ConnectionSữing="<%$ ConnectionSưings:QLCB %>"
SelectCommand="Select TenDangNhap, MatKhau from tbluser"
UpdateCom mand=" Update tblUser set M atK hau=@ M atK hau where
TenDangNhap=@ TenĐanqiVhap"
<h2>cập nhật thông tin người dùng</h2>

<asp:GridView run at-'server" ID= dgrDS"
DataKeyNames="TenDangNhap"
DataSourceID="DSND"
A utoG enerateE ditB utton-" true "
onrowupdating="dgrDS_RowUpdating" >
</asp: GridView>
</form>
</body>
</html>
Trang code
using System;
using System.Data;
using System.Web;
public partial class Lession_15_DisplaytblUser: System.Web.UI.Page

{
protected void dgrDS_Rowllpdating (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);

148
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
DSND.UpdateParameters.Add (" TenDanaNhạp", 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á
t rị" )....
Trong trường hỢp này ta sẽ tạo bằng phương thức Add, sau đó truyền giá trị là nội dung
mà người dùng vừa sửa đổi.
Câu hòi 1 Làm thế nào để lấy đƯỢc giá ữị 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:
a public partial class Lession_15_DisplaytblUser : System.Web.U I.Page
í
a protected void dgrDS_RowUpdating (object sender, GridViewUpdateEventArgs e)
{
e,
jÿ Cancel Sự kiện này xuãt hiện khi người dùng bấm
V Equals vào nút "Update". Trong đó, các giá trị của
y GetHashCode bàn ghi hiện đang sửa sẽ được đặt trong
V GetType e.OldValues và e.NewValues.
2? Keys
OldValueiS
Dựa vào các giá trị này ta dễ dàng thực hiện
J ÿ Rowlndex các thao tác như Update, delete...
V ToString
}
L}
Khi postback (gửi về) server, Gridview sẽ gủl 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.01dValues[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á ữị này, ta sẽ tạo ra parameters tương Lftig và gọi phương thức
UpdateQ của điều khiển SqlDataSource.
VI.0 - http://www.aptech.utehy.vn; aptech@utehy.edu.vri; Tel: 0321-713.319

149
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
15.3.4 Xóa bản ghỉ trong C S D L 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
CodeFile="UpdateDeleteUser.aspx.cs" lnherits="Lession_15_DisplaytblUser" %>
<title>Cập nhật người dùng</title>
</head>
<body>
<asp:SqlDataSource runat="server" ID="DSND"
ProviderName="System.Data.OleDb"
SelectCommand="Select TenDangNhap, MatKhau from tbluser"
UpdateCommand="Update tbluser set MatKhau=@MatKhau where
TenDangNhap=@TenDangNhap"
DeleteCommand="delete from tblUser where
TenDanaNhap=@TenDangNhap">
<h2>Cập nhật thông tin người dùng</h2>

<asp:GridView runat="server" ID="dgrDS"
DataKeyNames="TenDanqNhap"
DataSourcelD="DSND"
AutoGenerateEditButton="true"
onrowupdating="dgrDS_Rowllpdating" >
</asp:GridView>
</form>
</body>
</html>
Trang code
using System;
using System.Data;
using System.Web;

150
Aptech _____________________________________________________________________________________________________________________________________________________________________________
public partial class Lession_15_DisplaytblUser: System.Web.UI.Page

{
protected void dgrDS_RowDeleting (object sender, GridViewDeleteEventArgs e)
{
string TenDN = e.Keys ["TenDangNhap"].ToString 0; III Lấy giá trị khóa
DSND.DeleteParameters.Add ("TenDanqNhap", TenDN);
DSND.Delete 0;
}
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 0;
}
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.

151
Aptech _____________________________________________________________________________________________________________________________________________________________________________

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
V Đọ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)

tb BangCap * tb CanBo * tblChucVu *
MaBangCap MaCB MaChucvu
MoTa HoVaTen MoTa
NgaySinh
GioiTinh tbl PhongBan *
tb ChuyenMon * DiaChi MaPhong
MaChuyenMon SoDienThoai to__í TenPhong
MoTa NgayVaoDang SoDienThoai
MaBangCap DiaChi
MaPhongBan
tb User
MaChuyenMon
V TenDangNhap MaChucVu
MatKhau
QuyenHan z BanThan
TrangThai
NgayTao
__ GhiChu
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

CodeFile="DSCB_DataBinding.aspx.cs" lnherits="Lession_17_DSCB_DataBinding" %>
<title>Danh sách cán bộ - versión 1.0</title>
</head>
<body>
<h3>Danh sách cán bộ
<asp:Button ID="cmdDisplay" runat="server" onclick="cmdDisplaỵ_Click"
Text="Hiển thị" />
</h3>
<hr/>
<asp:GridView runat="server" ID="dgrDSCB">

152
Aptech_____________________________________________________________________________________________________________________________________________________________________________
</asp:GridVỉew>
</form>
</body>
</html>

153
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Trang Code
using System;
using System.Data;
using System.Data.SqICIient;
using System.Web;
public partial class Lession_17_DSCB_DataBinding : System.Web.UI.Page

{
private SqIConnection Conn = new SqIConnection ();
private SqICommand Cmd = new SqICommand ();
private SqlDataReader Dr;

{
}
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";

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 H iề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ười dùng chọn Đơn vị trong một Dropdownlist.
Trang giao diện

154
Aptech ______________________________________________________________________________________________________________________________________________________________________________________

CodeFile="DSCB_PhongBan.aspx.cs" lnherits="Lession_17_DSCB_PhongBan" %>
<title>Thông tin về cán bộ theo phòng ban</title>
</head>
<body>
<h3>Danh sách phòng</h3>
<asp:DropDownList runat="server" ID="ddlDSPhong" AutoPostBack="true">
</asp:DropDownList>
<br/>
<h3>Danh sách cán bộ trực thuộc</h3>
<asp:GridVỉew runat="server" ID="dgrDSCB"x/asp:GridView>
</form>
</body>
</html>
Trang code
using System;
using System.Data;
using System.Web;
public partial class Lession_17_DSCB_PhongBan : System.Web.UI.Page

{
private SqIConnection Conn = new SqIConnection ();
private SqICommand Cmd = new SqICommand ();
private SqlDataReader Dr;

{
Conn.ConnectionString =
System.Configuration.ConfigurationManager.ConnectionStrings ["strConn"].ToString 0;
Conn.Open ();

155
Aptech _____________________________________________________________________________________________________________________________________________________________________________
if (IsPostBack == false)
{
Cmd.CommandText = "Select MaPhong from tblPhongBan";
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 + ... ;
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:

156
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Danh sách cán bộ Hiển thị I
HoVaTen NgaySỉnh GioiTinh DiaChi SoDienThoai

Nguyễn Minh Quý F Hưng Yên 0321-713319
Lê Quang Lợi ■ Hưng Yên
Phạm Ngọc Hưng ■ Quảng Ninh
Nguyễn Đình Hân ■ Hưng Yên
Đặng Bá Hùng ■ Hải Dương
Nguyễn Thị Hiền ■ Hưng yên 012344567
Nguyen Văn Huyen ■ Hưng Yên 213424324
Họ tên:
Mật khẩu:
Quyền hạn : | Ĩ H
Trạng thái: p
Thêm mói I
Vl.o — hllp://www.uplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

157
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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ường thuộc nguồn dữ liệu.
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 đã được định nghĩa sẵn để thực hiện các thao
tác select, edit, hay delete.
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 ừườ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.
Các thuộc tính:

158
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Thuộc tính Mô tả
GridLines Ẩn, hiện các đườ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 GeƯ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
Pagelndex GeƯSet chỉ sô của trang đang được hiển thị
AllowPagmg 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 ứhg 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)
AutoGeneratellpdateButton Tự động tạo ra cột Update (true = tự động)
AutoGenerateSelectButton Tự động tạo ra cột Select (true = tự động)
Editlndex Đặt hàng nào đó về chê độ edit. Editlndex = 2

(Selectedlndex) hàng thứ 3 (chỉ số 2) sẽ về chê độ edit. Nêu đặt
Editlndex = -1 thì sé thoát khỏi chế độ Edit.
Selectedlndex 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 GrídView.
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:
Thuộc tính style Mô tả
AlternatingRowStvle Style áp dụng cho các hàng dữ liệu chẵn-lẻ trong GridView. Khi

159
Aptech _____________________________________________________________________________________________________________________________________________________________________________
dặt thuộc tính này thì các hàng sẽ dược hiển thị với dịnh dạng
luân phiên giữa RowStvle và AltematingRowStvle.
EditRowStvle Style để hiển thị hàng hiện đang được sửa (Edit).
FooterStvle Style áp dụng cho phần Footer.
HeaderStvle Style áp dụng cho phần Header.
PagerStvle Style áp dụng cho phần phân trang (các trang « 1 2 3 ... » ) .
RowStvle Style áp dụng cho các hàng dữ liệu trong GridView control. Khi
AlternatingRowStvle đươc thiết lâp thì sẽ áp dung luân phiên
Qiữa RowStvle và AlternatinaRowStvle.
SelectedRowStvle Style áp dụng cho hàng đang đượ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 ữỌ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ả
PagelndexChanged Xuất hiện khi ta click chọn các nút ( « 1 2 3 » ) trong hàng
phân trang.
PagelndexC hanging 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 T R Ư Ớ 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 được click nhưng trước khi thoát
khỏi chế độ Edit.
RowCommand Xuất hiện khi một nút được click.
RowCreated Xuất hiện khi một hàng mới được tạo ra. Thường được sử
dụng để sửa nội dung của hàng khi nó vừa được tạo ra.
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 đó.
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.

160
Aptech _____________________________________________________________________________________________________________________________________________________________________________
RovvDeletinẹ Xuất hiện khi nút Delete dượ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 được click, nhưng trước khi
GridView về chê độ sửa.
RowUpdated Xuất hiện khi nút Update được click, nhưng sau khi
GridView update hàng dữ liệu.
RowUpdating Xuất hiện khi nút Update được click, nhuhg trước khi
GridView update hàng dữ liệu.
SelectedlndexChanged 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.
SelectedlndexChanging 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) được click, nhưng sau
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.
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 DataSourcelD.
DeleteRow(int) Xóa một dòng trong GridView
UpdateRow(int i, bool Cập nhật một dòng trong GridView.

Valid)
Sort(Biểu thức sx, Sắp xếp dựa trên biểu thức và hướng.
hướng sx)
17.3 Các tính năng hỗ trợ của GridVievv

17.3.1 Phân trang
Để thực hiện phân trang, cần đặt thuộc tính AllovvPaging = 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.

161
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Ví dụ;
Hiển thị tất cả người dùng trong bảng tblUser trong GridView nhutag sử dụng cơ chê
phân trang. Mỗi ữang gồm 5 bản ghi.
Trang giao diện
CodeFile="AIlUserwithPaging.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %>
<titIe>Danh sách người dùng</title>
</head>
<body>
<asp:SqiDataSource ID="SqlDataSourcel" runat="server"
ConnectionString="<%$ ConnectionStrings:QLCBConnectionString %>"
SelectCommand=" SELECT * FROM tblUser">
<asp:GridView DataSourceID="SqlDataSourcel" runat="server"

AIlowPaging= "true "
PageSize="5"
PagerStyle-HorizontalAlign= "Center "
PagerSettings-Mode= "NumericFirstLast">
</asp:GridView>
</form>
</body>
</htmí>
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 PagelndexChanging được kích hoạt, cụ thể như sau:
Trang giao diện
CodeFile="PagingwithDataReaderBinding.aspx.cs"
lnherits="Lession_18_PagingwithDataReaderBinding" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionai//EN"

<title>Danh sách người dùng - Paging với DataSet</title>
</head>
<body>
<asp:Button runat="server" ID="cmdHienThi" Text="Hiển thị"
onclick="cmdHienThi_Click" />

162
Aptech ___________________________________________________________________________________________________________________________________________________________________________________________
<asp:GridVỉew runat="server" ID="dgrDSND"

AllowPaging="true"
AutoGenerateColumns="true"
PagerStyle-HorizontalAligrW'Center"
PagerSettings-Mode="NumericFirstLast"
onpageindexchanging="dgrDSND_PagelndexChanging">
</asp:GridView>
</form>
</body>
</html>
Trang Code behind

using System;
using System.Data;
public partial class Lession_18_PagingwithDataReaderBinding : System.Web.UI.Page

{
protected void NapDuLieuO
{
//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");
III 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_CNck (object sender, EventArgs e)

163
Aptech _____________________________________________________________________________________________________________________________________________________________________________
{
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
// Chỉ số của trang vừa chọn nằm trong e.NewPagelndex
protected void dgrDSND_PageIndexChanging (object sender, GridViewPageEventArgs e)
{
dgrDSND.Pagelndex = e.NewPagelndex; // Đặ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ười dùng trong bảng tblUser, khi người dùng click vào một cột thì
sắp theo chiều tăng dắn.
Trang giao diện
%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sorting.aspx.cs”
lnherits="Lession_18_AIIUserwithPaging" %>
</head>
<body>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
SelectCommand="SELECT * FROM tblUser">
<asp:GridView DataSourcelD="SqlDataSource1" runat="server" id="dgrDSND"

AllowPaging="True"
AllowSortina="True"

164
Aptech _____________________________________________________________________________________________________________________________________________________________________________
PageSize="5"
PagerStyle-HorizontaIAIign="Center"
PagerSettings-Mode="NumericFirstLast"
</asp:GridView>
</form>
</body>
</html>
Trang code
using System;
public partial class Lession_18_AIIUserwithPaging : System.Web.UI.Page
{
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:
bl: Mở trang ở chê độ Design
b2: Chọn GridView và chọn smart tag, tiếp theo chọn AutoFormat
asp:GridView#dgrD5ND 1
ColuituiO Cohmuil Cohmm2 □ Grid View Tasks
abc abc abc
abc abc abc Choose òiía\ource: (None) ▼
abc abc_____ abc sdit Columns...\ 2

abc abc abc And New ColumnV.
abc abc abc Edit Templates

Egg ---------------------------------------------
b3: Chọn Format trong danh sách.

165
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Hiển thị I
TeiiDangNliap HoVaTen MatKhau QuyenHan TrangTliai NgayTao GhiChu

loilq Lê Quang Lợi 123456 4 1 2/8/2008 Staff
longpt Phí Đức Long 123456 2 1 2/8/2008 Staff
nguyetdt Đinh Thị Nguyệt 123456 5 1 2/8/2008 Staff
quynrn Nguyễn Minh Quý 123456 2 1 1/1/2008 Lecturer
tannd Nguyen Duy Tân 123456 1 1 2/8/2008 Staff
user user 123 1 1 2/8/2008 Staff
uyenpt Phạm Thị Uyên 123456 5 1 2/8/2008 Staff
12
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.
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
CodeFile="UserList_ColumnManual.aspx.cs" lnher¡ts="Lession_18_AIIUserwithPaging"
%>
<title>Danh sách người dùng</titie>
</head>
<body>
<asp:GridView DataSourcelD="SqlDataSource1" runat="server"

AllowPaging="True"
PageSize="5"

166
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
PagerStyle-H orizontalA lign= "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 S ELEC T 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:
S ELEC T 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:

S ELEC T TenHang, NgayXua, SoLuong, DonGia, SoLuong * DonGia As ThanhTien ...
Trường ThanhTien là một ưườ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>

CodeFile="UserList_ColumnHyperlink.aspx.cs" lnherits="Lession_18_AIIUserwithPaging"
%>

167
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
</head>
<body>
ConnectionString="<%$ ConnectionStringsiQLCBConnectionString %>"
SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau,

'UserDetail.aspx?TenDangNhap=' + TenDangNhap as ChiTỉet FROM tbll)ser">

AllowPaging="True" PageSize="5"
PagerStyle-HorizontalAlign="Center"
PagerSett¡ngs-Mode="Numer¡cF¡rstLast" AllowSorting="True"
<Columns>


^âspiHvpeTmkFieí^Heade^xtr^ChnietâtaÑa^
</Columns>
</asp:GridView>
</form>
</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.

168
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
Dể tạo cột cho phép hiển thị Image, dùng thẻ <asp:lmageField DatalmageUrlField ../>
Trang giao diện
CodeF¡le="UserL¡st_Columnlmage.aspx.cs" lnherits="Lession_18_AIIUserwithPaging" %>
</head>
<body>
ConnectionString="<%$ ConnectionStrings:QLCBConnectionSỉring %>”
SelectCommand="SELECTTenDangNhap, HoVaTen, MatKhau,
HinhAnh FROM tblUser">
<asp:GridView DataSourcelD=''SqlDataSource1" runat="server"

AllowPaging="True"
PageSize="5"
PagerStyle-HorizontalAlign=''Center"
PagerSettings-Mode="Numer¡cF¡rstLast" AllowSorting="True"
AutoGenerateColumns="False" >
<Columns>
<asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu1'
I<asp:lmaaeFỉeíd DatalmaaeUrlField="HinhAnh" HeaderText="Hình ảnh"> ỉ

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

169
Aptech________________________________________________________________________________________________________________________________________________________________________________________________
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:

CodeFile="AddEditUpdateDeleteColumn.aspx.cs"
lnherits="Lession_18_AIIUserwithPaging" %>

</head>
<body>
SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau FROM tblUser">
<asp:GridView DataSourcelD="SqlDataSource1" runat="server" ID="dgrDSND"

AutoGenerateColumns="False"
DataKeyNames="TenDangNhap">
<Columns>
<asp:BoundField DataField="TenDangNhap" HeaderText="Tên đăng nhập"/>
<asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên"/>
<asp:BoundField DataField="MatKhau" HeaderText="Mật khẩu" />
<asp:BoundField 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" />

170
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</Columns>
<SelectedRowStyle BackCo!or="#999999" />

</asp:GridView>
</form>
</body>
</html>
'3 Danh sách ngưòì dùng - Microsoft Internet Explorer jn ] j< j

File Edit View Favorites Tools Help ft
»
Back » ■ x| 2Ị , Search Favorites •» -
Address l^ i http://localhost/ASP. NET%20Course/Lession%2017/AddEditUpdateDeleteColumn. aspx ~~zl 0 Go
T êii đăng nhập Họ và tên Mật khẩu Quyển hạn Chọn Sửa chữa Xóa Thêm
Hà Van Cu?ng cuonghv 8978978 2 Select Edit Delete New
haint Nguyen Thị Hải 123456 1 Select Edit Delete New
hannd Nguyen Đình Hân 123456 1 Setect Edit Delete New
haunv Nguyễn văn Hậu 123456 1 Seìcẻt Edit Delete New
hiennt Nguyễn Thị mền 123456 1 Select Edit Delete New
12 34 56
qj javascript:__doPostBackCdgrD5NDy5elect$2) Local intranet
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 k h ẩ 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 DataSourcelD của GridView =
ID của SqlDataSource.
Trang giao diện

<%@ Page Language="C#" AutoEventWừeup="true"
CodeFile="AddEditUpdateDeleteColumn.aspx.cs"
Inherits="Lession_18_AllUserwithPaging" %>
<html xmlns="http://www.w3.org/1999/xhưnl">

171
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</head>
<body>
<asp:SqlDataSource ID="SqlDataSourcel" runat="server"
ConnectionString="<%$ ConnectionSưings:QLCBConnectionSưing %>"
UpdateCommand-
"UPDATE tblUser SET MatKhau=@MatKhau. OuvenHan=@OuvenHan
WHERE TenDangNhap=@TenDangNhap" >
</asp:SqiDataSource>
<asp:GridView DataSourceID="SqlDataSourcel" runat="server" ID="dgrDSND"

<Columns>
<asp:BoundField DataField="TenDangNhap" HeaderText="TênĐN" ReadOnly="true"/>
<asp:BoundField DataField="HoVaTen" HeaderText="Họ và tên" Readonly-'tnie"/>
<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>
'3j Danh sách ngưòí dùng - Microsoft: Internet Explorer

Fie Edit View Favorites Tools Help sr
Back * ^ I J D Search Favorites ^2) ^ -
Address I http: //localhost/ASP. NET%20Course/Lession%2017/AddEditUpdateDeleteColumn. aspx Q Go
Tên đăng nhập Họ và tên Mật khẩn Quyền hạn Sửa chữa
Hà Van Cu?ng cuonghv 8978978 2 Edit
harnt Nguyễn Thi Hải 123456 1 Edit
hannd Nguyễn Đình Hân 123456 1 Edit
haunv Nguyễn văn Hậu 123456 1 Edit
hiennt Nguyễn Thị Hiền 1123456 h Update Cancel
123456
* J Local intranet
Ket 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á
ưị 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.

172
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
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="AddEditUpdateDeieteColumn.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %>
<html xmlns="http://www.w3.org/1999/xhưnl">
<hcad runat“ "servcr">
<title>cập nhật danh sách người dùng</title>
</head>
<body>
<asp:SqlĐataSource ID="SqlDataSourcel" runat="server"
ConnectionSưing="<%$ ConnectionSưings:QLCBConnectionString %>"
SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau FROM tblUser"
DeleteCommand= "Delete tblUser where TenDangNhap = @TenDangNhap">
<asp:GridView DataSourceID="SqlDataSourcel" runat="server" ID="dgrDSND"

AutoGenerateColumns-"False"
<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>
</htmí>

173
Aptech _____________________________________________________________________________________________________________________________________________________________________________
' 3 D anh s á c h ngư òí dùng M icro so ft In t e r n e t E x p lo re r _ |g | X

File Edit View Favorites Tools Help t r
»
Q Back - Q - \*\ g ) ịỊ) Search Favorites Jp1 0 ’ â » & '
Address ^ hfctp://localhost/ASP.NET%20Course/Lession%2017/AddEditUpdateDeleteColumn.aspx ■'I Q Go
u
Tên đăng nhập Họ và tên Mật khẩu Quyền hạn Xóa
quyenbt BÙI Tôn Quyền 123456 1 Delete
quyetnv Nguyễn Văn Quyết 123456 2 Delete
quynrn Nguyễn Minh Quý 123456 1 Delete
thangnv Nguyễn Văn Thắng 123456 1 Delete
tuannv Nguyễn Văn Tuấn 123456 1 Delete
123456
Á
Xóa trực tiếp trên GridView.
Vl.o - http:/Avww.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

174
Aptech_____________________________________________________________________________________________________________________________________________________________________________

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 luti 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 0;
Minh họa:
Trang giao diện
CodeFile="PagingSorting.aspx.cs" lnherits="Lession_18_PagingSorting" %>
<title>Hiển thị và sắp xếp với GridView.</title>
</head>
<body>
SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau FROM
tblUser">
<asp:GridView runat="server" ID="dgrDSND"

AllowSorting="True"
AllowPaging="True"

175
Aptech _____________________________________________________________________________________________________________________________________________________________________________
DataSourcelD="SqlDataSource1 ">
</asp:GridView>
</form>
</body>
</html>

176
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Trang Code behind

using System;
using System.Web;
public partial class Lession_18_PagingSorting : System.Web.UI.Page

{
{
dgrDSND.PageSize=int.Parse(
System.Configuration.ConfigurationManager.AppSettings ["PageSize"].ToString 0);
}
Chủ v:
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ường đó) vào thuộc
tính SortExpression. Các phần tử cách nhau bởi dấu chấm phảy.
Bải 2: Tạo một ttang 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 dung vừa được chọn.
adirrni Admin 54355433 Xem chi tiết

anhlt Lưu Tuấn Anh 123456 Xem ch; tiết
chiennd Nguyễn Đình Chiến 123456 Xem chi tiết
chuanpm Phạm Minh Chuẩn 123456 Xem chi tiết
dungvt Vũ Thị Dung 123456 Xem chi tiết
123456
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)
CodeF¡le="UserL¡st_ColumnHyperlink.aspx.cs" lnherits="Lession_18_AIIUserwithPaging"

177
Aptech __________________________________________________________________________________________________________________________________________________________________________________
%>
</head>
<body>
SelectCommand="SELECT TenDangNhap, HoVaTen, MatKhau,
'ChiTietNguoiDung.aspx?TenDangNhap=' + TenDangNhap as ChiTỉet
FROM tblUser">

AllowPaging="True"
PageSize="5"
PagerSett¡ngs-Mode="Numer¡cFirstLast" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" >
<Columns>
<asp:HyperLinkField DataNaviqateUrlFields="ChiTiet" HeaderText="Chi tiết"
Text="Xem chi tiết" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
Trang UserDetail.aspx:
VI.0 — http://www.uplech.uCehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319 170

Aptech _____________________________________________________________________________________________________________________________________________________________________________
Address ệ ĩ ! n % 2 0 13iUserDetail. asDX?T enDanaNhaD=admin Go

3 0
Chi tiết người dùng đật tại đây
Họ và têri Admin
Tên đãng nhập adrmn
M ật khẩu 54355433
Quyển hạn 5
Trạng thái 1
< Trở về
.1
UserDetail.aspx
CodeFile="UserDetail.aspx.cs" lnherits="Lession_18_UserDetai!" %>
<title>Chi tiết người dùng</title>
■CotTrai { text-align:right; font-style:italic; font-weight:bold}
</style>
</head>
<body>
<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>
<tdxasp:Label runat="server" ID="lblHVT"x/asp:Label></td>
</tr>
<tr>
<td class="CotTrai">Tên đăng nhập</td>
<tdxasp:Label runat="server" ID="lblTenDN"x/asp:Label></td>
</tr>
<tr>
<td class="CotTrai">Mật khẩu</td>
<tdxasp:Label runat="server" ID="lblMK"></asp:Labelx/td>
</tr>
<tr>

179
Aptech _________________________________________________________________________________________________________________________________________________________________________________
<td class="CotTrai">Quyền hạn</td>

<tdxasp:Label runat="server'' ID="lblQH"></asp:Label></td>
</tr>
<tr>
<td class="CotTrai">Trạng thái</td>
<tdxasp:Label runat="server" ID="lblTT"></asp:Label></td>
</tr>
<tr>
<td colspan="2"> <asp:lmage runat="server" ID="imgPhoto"/></td>
</tr>
</table>
<hr/>
<a href="#" onclick="history.go(-1);"> < Trở về</a>
</form>
</body>
</html>
Trang Code UserDetaiI.aspx.es

using System;
using System.Data.SqlClient;
using System.Web;
using System.Web.Ul.WebControls;
public partial class Lession_18_UserDetail: System.Web.UI.Page

{
{
SqlConnection Cn = new SqlConnection 0;
Cn.ConnectionString=
System. Configuration.ConfigurationManagcr. Connections trings
["QLCBConnectionString"].ToSữing ();
Cn.Open ();
SqlCommand Cmd = new SqICommand ("Select * from tblUser where

TenDangNhap= + Request.QueryString ["TenDangNhap"] + '"",Cn);
SqlDataReader Dr = Cmd.ExecuteReader 0;
//H iể n thị thông tin chi tiết ra các nhãn và thẻ Image
if (Dr.ReadO)
{
lblHVT.Text = Dr ["HoVaTen"].ToStringO;

180
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
lblMK.Text = Dr ["MatKhau"].ToString ();

lblTenDN.Text = Dr ["TenDangNhap"].ToString ();
lblTT.Text = Dr ["TrangThai"].ToString 0;
lblQH.Text = Dr ["QuyenHan"].ToString 0;
imgPhoto.ImageUrl = Dr ["HinhAnh"].ToString ();
}
Cmd.Dispose ();
Cn.Close 0;
}
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
CodeFile="UserList_ColumnImage.aspx.cs" Inherits="Lession_18_AllUserwithPaging"
%>
<html xmlns=''http://www.w3.org/1999/xhtml''>
img {width:50px; height:50px}
</style>
</head>
<body>
<form id="forml" nmat="server">
SelectCommand="SELECTTenDangNhap, HoVaTen, HinhAnh FROM tblUser">
<asp:GridView DataSourceID="SqlDataSourcel"
runat="server" ID="dgrDSND"
DataKeyNames="TenDangNhap"
AllowPaging="True "
PageSize-"5"
Allows orting="True"
<Columns>

181
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
<asp:ImageField DataImageUrIField="HinhAnh" HeaderText="Hình ảnh" >

</asp:ImageF ield>
</Columns>
</asp:GridView>
</form>
</body>
</html> admin Admin 54355433
R
anhlt Lưu Tuấn Anh 123456
chiennd Nguyễn Đình Chiến 123456
chuanpm Phạm táinh Chuẩn 123456
dungvt Vũ Thị Dung 123456
12 3 4 5 6

182
Aptech_______________________________________________________________________________________________________________________________________________________________________________________________
Bài 4: Tạo một trang CapNhatCanBo, trong đó cho phép người dùng sửa đổi Họ tên và
Địa chỉ trực tiếp. (Trên GridView.) và xóa một cán bộ bất kỳ.
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 Hoa:
Trang giao diện (Không có Code Ở trang CS)
CodeFile="EditUpdateDeleteCB.aspx.cs" Inherits="Lession_18_AllUserwithPaging" %>
<head runat="server" >
<title>Danh sách cán bộ</title>
</head>
<body>
SelectCommand-SELECT * FROM tblCanBo"
UpdateCommand="Update tblCanBo set HoVaTen=@HoVaTen, DiaChi=@DiaChi
where MaCanBo=@MaCanBo"
DeleteCommand="Delete tblCanBo where MaCanBo = @MaCanBo">
<asp:GridView DataSourceID="SqlDataSourcel" runat="server" ID="dgrDSCB"

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="Trae" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
Họ và tên Ngày sinh Ngày sinh Sổ điện thoại Sửa chữa Xóa
Nguyễn Minh Quý Hưng Yên 0321-713319 Edit Delete
Lê Quang Lợi Hưng Yên City Edit Delete
|phạm Ngọc Hưng |Quảng Ninh Update Cancel
Nguyễn Đình Hân Hưng Yên Edit Delete
Đặng Bá Hùng Hải Dương Edit Delete
12

183
Aptech _____________________________________________________________________________________________________________________________________________________________________________
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à TEM PLATE !.
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 the
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 (Dataltem) và phần chân trang (Footer). Ý nghĩa cụ thể của từng
phần này như sau:
V 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.
V 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.
♦♦♦ Foot «"Template: 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à EvaI("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ị

184
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
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>
19.3 Repeater control, DataList control, CridView control

19.3.1 Tạo template với GridView.
V í dụ 1i 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
CodeFile="DisplaytblUser.aspx.cs" lnherits="Lession_19_DisplaytblUser" %>
chead id="Head1" runat="server">
<title>Danh sách người dùng - sử dụng Templates</title>
</head>
<body>
</asp :Sq IDataSou rce>
<asp:GridView ID="GridView1" runat="server"

DataSourcelD="SqlDataSource1"
AutoGenerateColumns="false" AlỉowPaaing="true">
Đặt nội dung
« Columns> bắt kỳ’(Có thể là
text, html, server
<asp:TemplateField HeaderText="Họ và tên"> Controls ...)
<ltemTemplate>
<%# Eval("HoVaTen") %>
</ltemTemplate>
^/asg¿Temg|ateFie|d>
</Columns>
</asp:GridView>
</form>
</body>__________________

185
Aptech _____________________________________________________________________________________________________________________________________________________________________________
</html>________________________________________________________________________________
V í du 2: Như ví dụ 1 nhưng đặt họ tên vào các TextBox

Trang giao diện____________________________________________________

AutoGenerateColumns="false" AllowPaging="true">
<Columns>
<asp:TemplateField HeaderText="Họ và tên">
<ltemTemplate>
<asp:TextBox runat="server"
Text='<%# Eval("HoVaTen") % > ’>
</asp:TextBox>
</ltemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
V í dụ 3; Hiền thị họ tên và TrangThai. Trong đó TrangThai được đặt trong ngoặc ngay
sau họ và tên.
Trang giao
diện

<Columns>
<ltemTemplate>
( <%# EvalCTrangThai") %> )
</ltemTemplate>
</Columns>

186
Aptech_____________________________________________________________________________________________________________________________________________________________________________
</asp:GridView>
Ví du 4: Hiền thị họ tên và ảnh

Trang giao
diện________________________________________________________________________
CodeFile="DisplaytblUserOnTextBox.aspx.cs" lnherits="Lession_19_DisplaytblUser" %>
<head id="Head1" runat="server">
</head>
<body>

<Columns>
<asp:TemplateField HeaderText="Họ và tên & ảnh ">
<ItemT emplate>
<%#Eval( "HoVaTen") %> <br/>
<asp:Image runat="server" ImageUrl='<%# EvaI("HinhAnh")%>'/>
</ItemT emplate>
</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ường
hiển thị trên một cột và Họ tên chữ đậm.

187
Aptech ______________________________________________________________________________________________________________________________________________________________________________________
Trang giao diện

CodeFile="DisplaỵtblUserMultiCols.aspx.cs" lnherits="Lession_19_DisplaytblUser" %>
<head id="Head1" runat="server">
</head>
<body>

<Columns>
:asp:Tem plateField HeaderText="Họ và tên">

<ítemTemplate>
<b><%# Eval("HoVaTen") %></b> <br />
</ltemTemplate>_________________________________
:asp:Tem plateField HeaderText="Trạng tháỉ">

<ltemTemplate>
<!><%# Eval("TrangThai") %></i> <br />
</ltemTemplate>__________________________________
<asp:TemplateField HeaderText="Hình ảnh">

<ỉtemTemplate>
<asp:image runat="server"
lmageUrl='<%# Eval("HinhAnh") %>'
Width="1 OOpx" Height=”1OOpx"
Vl.o - http://www.upteifi.uiefiy.vn, upteLfi@uKfiy.edu.vii, Tet. 032Ỉ-713.319

188
Aptech _____________________________________________________________________________________________________________________________________________________________________________
/>
</ltemTemplate>
</Columns>
</asp:GridView>
</form>
</body>
</html>___________________________________
Ví du 6: Hiển thj dữ liệu trong môt cột

............ Như ví dụ 5
<asp:GridView ID="GridView1" runat="server" Width="100%"

DataSourcelD="SqlDataSource1" ShowHeader="false"
<Columns>
<asp:TemplateField HeaderText="THÔNG TIN NGƯÒI DÙNG">
<ltemTemplate>
<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/xasp:lm age runat="server"
lmagel)rl='<%#Eval( HinhAnh") %>' />
</ltemTemplate>
</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ường, ta cắn đặt thuộc tính text của trường đó vào
trong phương thức Bind, dạng như sau:
<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_______________________________________________________________________

189
Aptech _____________________________________________________________________________________________________________________________________________________________________________
<asp:GridView ID="GridView1" runat="server" Width="100%"

DataSourcelD="SqlDataSource1" DataKeyNames="MaCanBo"
<Columns>
<asp:TemplateField HeaderText='THÔNG TIN CÁN BỘ">
<ltemTemplate>
<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") %>
</ltemTemplate>
<EditltemTemplate>
<b> Họ và tên: <%# Eval("HoVaTen") %></t» <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>
</EditltemTemplate>
<asp:CommandField ButtonType="Button" EditText="Sửa" ShowEditButton="true" />
</Columns>
</asp:GridVỉew>
............... 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;_______________________________________________________
<bodỵ>

190
Aptech_____________________________________________________________________________________________________________________________________________________________________________
<asp:DataList runat="server" ID="DataList1"

RepeatDirection="Horizontal"
RepeatColumns="3"
RepeatLayout="T able">
«cltemTemplate >
Họ và tên: <b> <%# Eval ("HoVaTen") %></b> <br />
Quyền hạn : <%# Eval("QuyenHan") %> <br />
<asp:lmage ID="lmage1" Width="100px" Height="100px"
runat=”server" lmagellrl= '<%# Eval("HinhAnh") %>’ />
<hr/>
</ltemTemplate>
</asp:DataList>
</form>
</body>

191
Aptech _____________________________________________________________________________________________________________________________________________________________________________
Address 1^1 http: //localhost/ASP. NET%20Cciurse/Lession%2019/DataListControl. aspx j[] Q <ão
Họ và tên: Nguyễn Đỉnh

Họ và tên: Admỉn Họ và tên: Lưu Tuấn Anh
Chiến
Quyền hạn:5
Quyền h ạn : 1
Họ và tên: Phạm Minh

Họ và tên: Vũ Tlụ D ung Họ và tên: cuonghv
Chuẩn
Quyền hạn: 1 hạn: 2
Họ và tên: Nguyễn Thị Họ và tên: Nguyễn Đình Họ và tên: Nguyễn vàn

Hải Hân
Quyền hạn: 3 Quyền hạn: 1
íấÍứMKÊk.
P ! JÊL
Kêt quả sau khi chạy ữang ả 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 ơong những trường hợp mà ở đó tài nguyên đóng vai
ưò quan trọng.
Repeater cho phép chúng ta tùy biến các mục tương tự như GridView và DataList, đó là
sử dụng Template.
Ví dụ 9; Hiển thị họ tên và ảnh minh họa người dùng trong bảng tblUser sử dụng điều
khiển Repeater.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Repeater.aspx.cs"

lnherits="Lession_19_Repeater" %>

192
Aptech _______________________________________________________________________________________________________________________________________________________________________________________________
<title>Hiển thị danh sách người dùng</title>
</head>
<body>
ConnectionString="<%$ ConnectionStrings:QLCBConnectionSỉring %>”
<asp:Repeater runat="server" ID="rptDSND"

DataSourcelD="SqlDataSource1">
<ltemTemplate>
Họ và tên: <%# Eval("HoVaTen") %> <br />
<asp:lmage runat="server"
lmageUrl=<%# Eval("HinhAnh") %>'
Width="100px" Height="100px" />
<hr />
</ltemTemplate>
</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) úhg
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.
Vl.o - hllp://www.uplech.ulehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

193
Aptech_____________________________________________________________________________________________________________________________________________________________________________
V I.0 —hllp://www.uplech.utehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

194
Aptech _____________________________________________________________________________________________________________________________________________________________________________

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 ư ớ n g 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 ttong cặp thẻ <asp:DataItemTemplate> </>
' 3 Thông tin v ề cá n bộ - M icrosoft In t e r n e t E x p lo re r
File Edit View Favorites Tools Help
Q back * O ¿1 4) I P Search Favorites
Address http://localhost/A5P.NET%20Course/Lession%2020/Thonị I Q Go
Họ và tên Địa chỉ Điện thoại

Ngirpễn Minh Quý Hưng Y8n 0321-713319
Lê Quang Lợi Hưng Yên City 0913-713777
Phạm Ngọc Hưng Quảng Ninh 0912-713777
Nguyễn Đình Hân Hưng Yên-hải dưong 0912-713777
Đặng Bá Hùng Hải Dương 0912-713777
Nguyễn Thị Hiền Hưng yên 012344567
Done * \ Local intranet
Danh sách cán bộ

M inh hoa:
CodeFile="ThongTinCanBo.aspx.cs" lnherits="Lession_20_ThongTinCanBo" %>
chead runat="server"> <title>Thông tin về cán bộ</title> </head>
<body>
SelectCommand="SELECT * FROM tblCanBo">
<asp:GridView runat="server" ID="DSCB"

195
Aptech ________________________________________________________________________________________________________________________________________________________________________________________________
DataSourcelD="SqlDataSource1 " AutoGenerateColumns="false">

<Columns>
<ltemTemplate>
<b><%# Eval("HoVaTen") %></b>
</ltemTemplate>
<asp:TemplateField HeaderText="Địa chỉ">

<ltemTemplate>
<%# Eval("DiaChi") %>
</ltemTemplate>
<asp:TemplateField HeaderText="Điện thoại">

<ltemTemplate>
<%# Eval("SoDienThoai") %>
</ltemTemplate>
</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 úhg).
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á ửị của trường Photo tương ứng. cụ thể là :
<asp:Image ID="Imagel" 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.

196
Aptech _____________________________________________________________________________________________________________________________________________________________________________
' 3 D an h s á c h cá n bộ M icrosoft In t e r n e t E x p lo re r JO Jü
Họ và tên Địa cỉủ
NguyIn Minh Quý Hưng Yên
Lê Quang Lợi Hưng Yên City
Sjoone * J Local intranet ¿ỉ

Yêu cầu về giao diện
Minh hoa:
<asp:Gr¡dV¡ew runat="server" ID="DSCB" w¡dth="100% " GridL¡nes="Both"
<Columns>
<ltemTemplate>
</ltemTemplate>
<asp:TemplateField HeaderText="Địa chỉ">

<ltemTemplate>
<%# Eval("DiaChi") %>
</ltemTemplate>
<asp:TemplateField HeaderText="Ảnh">
<ltemTemplate>
<asp:lmage runat="server" Width="100px" Height="100px”
lmageUrl='<%# Eval("Photo") %>’ />
</ltemTemplate>
</Columns>
</asp:GridView>
Bài 3: Hiển ứiị danh sách cán bộ dạng chi tiết. Thông tin được dàn trang theo chiều dọc (Flow).

197
Aptech_____________________________________________________________________________________________________________________________________________________________________________
H ư ớng dẫn: Tạo một cột duy nhất, nhuhg 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ó ĩ. 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.
' 3 Thông tin vê cán bộ - Microsoft Internet ÍT
File Edit View Favorites Tools Help ỈỈ
Trích ngang danh sách cán bộ

Nguyễn Minh Quý
Hưng Yên
0321-713319
Giảng viên khoa Công nghệ
thông tin. Thuộc bộ môn Công
nghệ phần mềm
Lê Quang Lọi
Hưng Yên City
0913-713777
Giảng viên khoa công nghệ
thông tin. Tham gia giảng dạy
lớp Aptech
t u : 'DI____ ____
ệ j Done ỉ í S ĩ Local intranet Á
Kết quả
Minh họa:
<asp:GridView runat="server" ID="DSCB" Width="100%" GridL¡nes="None"

DataSourcelD="SqlDataSource1" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Trích ngang danh sách cán bộ">
<ltemTemplate>
<table border="0px" width="300px">
<tr>
< d style="width:200px;border-top:solid 1px">

<b>
Cột 1
< /bxbr />
<%# Eval("DiaChi") %> <br />
<%# Eval("SoDienThoai") %> <br />
tvan Dari I riari ; 7o>
< ia>
Vl.o - http://www.apte :h.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

198
Aptech_____________________________________________________________________________________________________________________________________________________________________________
<td stvle="width :1OQpx">

<asp:lmage runat="server"
■2 Width= 10Opx"
Height="100px"
lmageUrl='<%#Eval("PhoTo") %>'
/>
</td>
</tr>
</table>
</ltemTemplate>
</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 tín 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 ư ớ n g 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ường muốn sửa chữa sẽ đặt vào các Textbox và dùng hàm <%#
Bind( Tên_Trường")%>.
Minh hoa:

199
Aptech_____________________________________________________________________________________________________________________________________________________________________________
'3j D an h s á c h c á n bộ M icrosoft: In t e r n e t E x p lo re r U n i xl
Họ và tên Sửa chữa Xóa

Nguyễn Minh Quý
Địa chỉ: Hưng Yên. Việt nam Sửa Xóa
Điện thoại: 0321-713319
Họ tên:
ỊỉHSPEEĩllISi
Địa chỉ:
Hưng Yên City
Lưu Hủy bỏ
Điện thoại:
|0913-713777
Trần Tỉụ Phương
Địa chỉ: Yên Bái Sửa Xóa
Điện thoại: 0912-713777
Plú Đức Long
Địa chỉ: Hưng Yên Sửa Xóa
Điện thoại: 0912-713777
zl
1Ĩ * J Local intranet
Kết quả.

CodeFile="DSCB_lmageField.aspx.cs" lnherits="Lession_20_DSCB_lmageField" %>
<title>Cập nhật danh sách cán bộ</title>
</head>
<body>
SelectCommand="SELECT * FROM tblCanBo"
UpdateCommand="Update tblCanBo SET

HoVaTen=@HoVaTen. DiaChỉ=@DỉaChi. SoDienThoai=@SoDienThoaỉ
Where MaCanBo=@MaCanBo"

200
Aptech_____________________________________________________________________________________________________________________________________________________________________________
DeleteCommand="Delete tblCanBo where MaCanBo=@MaCanBo">

<asp:GridView runat="server" ID="DSCB" Width="100%" GndLines="both"

DataKevNames="MaCanBo"
<Columns>
<asp:TemplateFíeld HeaderText="Họ và tên">
Phần template <ltemTemplate>
cho chê độ <b><%# Eval(''HoVaTen") %></b> <br/>
thường Địa chỉ: <%# Eval("DiaChi") %> <br />
(chưa sửa) Điện thoại: <%# Eval("SoDienThoai") %>
</ltemTemplate>
ÊditltemTemplate>
<b>Họ tên: </bxbr />
<asp:TextBox runat="server" ID="txtHVT" Width="98%"
Text= '<%# Bind("HoVaTen") %>' >
</asp:TextBox>
<br/>
Phần template ị
<b>Địa chỉ: </bxbr />
cho chế độ soạìy <asp:TextBox runat="server" ID="txtDC" Width="98%"
thảo TextMode="MultiLine" Rows="5"
(edit mode)
Text='<%# Bind("DiaChi") %>'>
</asp:TextBox>
<br/>
<b>Điện thoại: </b> <br />

V
<asp:TextBox runat="server" ID="txtDT" Width="98%"
Text= '<%# Bind("SoDienThoai") %>■>
</asp:TextBox>
</EditltemTemplate>
<asp:CommandField
HeaderText="Sửa chữa"
EditText=" Sửa"
UpdateText="l_ưu"
ButtonType="Link"
CancelText=" Hủy bò"

201
Aptech_____________________________________________________________________________________________________________________________________________________________________________
ShowEditButton="true" />
<asp:CommandField
HeaderText="Xóa"
DeleteText=" Xóa"
ButtonType="Link"
ShowDeleteButton="true" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Teỉ: 0321-713.319 202

Aptech_____________________________________________________________________________________________________________________________________________________________________________
Bải 4: Hiển thị thông tin trích ngang về người dùng trong bảng tblưser, 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 útig. 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 hoa;________________________________________________________________
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataListControl.aspx.cs"
lnherits="Lession_19_RepeaterControl" %>
<title>Danh sách cán bộ</title>
</head>
<body>
<asp:DataList runat="server" ID="DataList1"

RepeatDirection="Horizontal"
RepeatColumns="3"
RepeatLayout="T able">
<ltemTemplate >
<b> <%# Eval ("HoVaTen") %></b> <br />
Quyền hạn : <%# Eval("QuyenHan") %> <br />
<asp:lmage Width="100px" Height="100px"

runat="server" lmageUrl= '<%# Eval("HinhAnh") %>’ /><br />
<a href ='UserDetail.aspx?TenDangNhap=<%#Eval("TenDangNhap") >'>

Xem chi tiết
</a>

203
Aptech_____________________________________________________________________________________________________________________________________________________________________________
<hr />
</ltemTemplate>
</asp:DataList>
</form>
</body>
</html>
3 Danh sách cán bộ - Microsoft Internet Explorer r j n j X]

File Edit View Favorites Tools Help if
Nguyên Đình Chiên

Adinỉn Lưu Tuấn Anh
Quyền hạn : 5
Quyền hạn : 4
Xem chi
Phạm Minh Chuẳii Vũ Thị Dung

h ạn: 1 Quyền hạn: 1
Xem chi tiết Xem chi tiết
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 conữols.
Các bước thưc hiên:
B l. 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 smarttag), sau đó click chọn "Coníig ListView..."

204
Aptech _____________________________________________________________________________________________________________________________________________________________________________
ListV ieiu T ask «
Choose Data Source: SqlDataSourcel
Configure Data Source. ••

Refresh Schema
Confiaure LilTtyiew...
Current ViewConfigure the ListView's layout, style, and
B4: Chọn các thông sô như hình bên dưới.

B5: MỞ trang web.
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 PagedControllD="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.
Configure Listview J]xị
Select a Layout: Preview:
[Grid
Bulleted List TenDangNhap: TenDangNhap:

Flaw Databound Databound Databound
Single Row
HoVaTen: HoVaTen: HoVaTen:
Databound Databound Databound
Select a style: MatKhau: MatKhau: MatKhau:
(No Formatting) Databound Databound Databound
Colorful QuyenHan: QuyenHan: QuyenHan:
Professional Daf abound Daf abound Dafahnt inrl
Options:
3 Danh sách người dùng - Microsoft In tern et Explorer ^laixj
r* Enable Ed: File Edit View Favorites Tools Help
r Enable In;
I- Enable De Nguyễn Vẫn
Nguyễn Minh Quý
R? Enable Pa> Bùi Tôn Quyẽn Quyẽt
Numeric I MatKhau: 123456 MatKhau:
MatKhau: 123456
iNexựPre QuyenHan: 1 123456
QuyenHan: 1
TrangThai: 1 QuyenHan: 2
TrangThai: 1 u
NgayT ao : TrangThai: 1
NgayT ao: á
GhiChu: NgayT ao:
GhiChu:
GhiChu:___
¿I ^ * À
-s
Nguyễn Vãn
Nguyễn Văn
Super m oderator Thắng
Tuãn
MatKhau: 123456 MatKhau:
MatKhau: 123456
QuyenHan: 1 123456 QuyenHan: 1
TrangThai: 1 QuyenHan: 1
TrangThai: 1 TrangThai: 1
NgayTao: NgayTao:
GhiChu: NgayTao: GhiChu:
GhiChu:___
l í
Vl.o

Bai Giang Khoa ASP Net Print Version 8894

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bai Giang Khoa ASP Net Print Version 8894

Uploaded by

Copyright:

Available Formats

Tài liệu khóa học lập trình web với ASP.

NET - Biên soạn: Trung tâm Hưng Yên

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

5.3 Ajax Control Toolkit...................................................................................................... 69

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

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

BẢI 19: s ử dụng Templates...................................................................................... 184

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

- Nguyễn Minh Quý

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

BÀI SỐ 1: MỞ ĐẨU VỂ ASP.NET

1.1. Giói thiệu tổng quan công nghệ .NET

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

1.1.2 .NET Framework là g ì .

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

Kiên trúc của .NET Framework

Managed Assembly - Assembly - A ssenrty

Operating System Services

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

Managed Assembly (.exe or .dll)

IL metadata & references

1.1.3 Một s ô ưu điểm chính c ủ a .NET framework

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

1.2. Giới thiệu ASP.NET

1.3. Cài đặt Visual Studio.NET 2008

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

1.3.2 Cài đặt Visual Studio.NET 2008

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

<%@ Page Language ='VB" Mas terPage File="^/Master Page ~

[] <asp:Panel ID="PanelLuaChon" runat= "server" Width="1000/

client Objects & Events (No Events)

ộl aũgn= "right" valign="middlel7>~

ffl g jB s iT h ik ^ ,^ MỞ cửa sô soạn Code

M ỏ cửa s ổ soạn Code (C#, VB.NET

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

T e st Online (2 ) - M icrosoft v isu a l stu dio Jn JxJ

ề> u& i l s ü I *) ► u a o *1, g !ấ Sã %

^ Pointer Menu bar Vùng duyệt các, BaiThi.aspx

Giao diện của hệ thống IDE.

1.5. Tạo/lưu/mở/chạy ứng dụng ASP.NET

New Web site -Ll-Xj

Templates: j.NET Framework 3.5 I s i:::

Visual Studio installed templates

Ngôn ngữ lập trình được sử dụng.

Tạo dịch vụ Web Nơi chứa ứng dụng web

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

1.5.2 Lưu ứng dụng Web

1.5.3 Mở (Chạy) ứng dụng

MỚ ứng dụng web từ nhiều nguồn.

Vl.o - http://www.aptech.utehy.vn; aptech@utehy.edu.vn; Tel: 0321-713.319

Người dùng có thể chạy (Browse) trang

Browser (Hoặc nhấn tổ hỢp phím Ctrl-

trình duyệt mặc định khi View In View Designer

Set As start Page'£

Chọn trình duyệt mặc định

1.6. C ơ bản v ề css và DHTML.

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

1.7. Định dạng các thẻ s ử dụng css

1.7.2 Định dạng bởi bộ chọn ID

<style Type = “text/css”>

1.7.3 Định dạng bởi bộ chọn thẻ (tag)

VI.0 —hllp://www.uplech.utehy.vn; uplech@ulehy.edu.vn; Tel: 0321-713.319

1client Objects & Events 3 bộ chọn ID - Microsoft Internet Explorer 1

color : Red; Đ ây là chữ đỏ, cữ 20pt và đậm vi có id = "Chuông"

ề> u& i l s ü I ) ► u a o 1, g !ấ Sã %