lab 2: sử dụng các asp.net web control cơ...
TRANSCRIPT
![Page 1: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/1.jpg)
1
Lab 2: Sử dụng các ASP.NET
Web control cơ bản
Mục tiêu
- Sử dụng các thành phần web server control cơ bản
- Sử dụng lớp StreamReader và StreamWriter để đọc ghi file dạng text
- Các thao tác xử lý trên chuỗi, chia chuỗi, thay thế chuỗi.
Yêu cầu
- Đã làm quen với các server control cơ bản,
- Đã học qua các lớp xử lý nhật xuất file của C#.
Kịch bản
- Các trang web thường có phần GuestBook, cho phép user có thể lưu lại các
comment cho chủ nhân của trang web. Trong bài này chúng ta sẽ tạo một form
minh họa dạng GuestBook, cho user nhập vào các thông tin:
o Tiêu đề
o Họ tên
o Địa chỉ email
o Nội dung comment
- Các thông tin này sẽ được lưu lại trên server (thông qua file text)
- Những entry của user trước đó post lên cũng được hiển thị trong trang này.
- Hình 1 minh họa form GuestBook
![Page 2: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/2.jpg)
2
Hình 1: Giao diện của form GuestBook khi thực hiện
Hướng dẫn
- Phần thiết kế form Guestbook.aspx như sau:
![Page 3: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/3.jpg)
3
Hình 2: Phần thiết kế form
- Chi tiết các control trên form được trình bày trong bảng 1
Tên control Kiểu Thuộc tính Ý nghĩa
txtTieuDe TextBox TextMode = SingleLine Nhập tiêu đề comment
txtHoTen TextBox TextMode = SingleLine Nhập họ tên
txtEmail TextBox TextMode = SingleLine Địa chỉ email
txtNoiDung TextBox TextMode = MultiLine
Rows = 6
Nhập nội dung comment
Btn_GoiND Button Thực thi hành động post
comment mới lên server. Trình
xử lý sự kiện này sẽ thêm một
![Page 4: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/4.jpg)
4
entry mới vào file
EntryComment Span
(HTML
server
control)
Runat = server Chứa toàn bộ các entry
comment được lấy từ trong
file trên server
Bảng 1: Mô tả chi tiết các control trên web form
- Phần xử lý trong code behind bao gồm có 2 phần chính
o Phần 1: Xử lý thêm entry mới vào file lưu trên server, phần xử lý này được đặt
trong trình xử lý sự kiện click của button Btn_GoiND. Toàn bộ phần xử lý của
button này được liệt kê bên code 1 dưới.
Code 1: Trình xử lý sự kiện click của button Btn_GoiND
Lưu ý: trong đoạn code trên khi lưu một entry và file text trên server thì cuối mỗi
entry có ký tự nhận dạng kết thúc là “#END”, mục đích là để sau này ta có thể nhanh
chóng lọc ra từng entry khi hiển thị trong bước sau.
File chứa nội dung comment là “data.txt” ở cùng đường dẫn với page chứa thông tin
dạng text như sau:
![Page 5: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/5.jpg)
5
Hình 3: Minh họa file chứa nội dung comment
o Phần 2: Phần hiển thị toàn bộ các entry comment lên form. Phần xử lý này là
phương thức ReadComment(), được gọi trong sự kiện Page_Load của Web form
Code 2: Gọi hàm hiển thị các comment trong sự kiện Page_Load
![Page 6: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/6.jpg)
6
Code 3: Đọc file “data.txt” chứa nội dung comment.
- Trong phần xử lý đọc ta làm theo các bước sau
o Đọc toàn bộ nội dung file comment
o Chia các entry vào từng chuỗi
o Với mỗi chuỗi chứa entry, tat hay thế ký tự xuống dòng bằng tab break để
hiển thị được trên trình duyệt.
o Cuối cùng định dạng nội dung comment vào trong tag <td> và đưa vào
thuộc tính InnerHTML của span có tên EntryComment
Tóm lại: có rất nhiều cách hiển thị nội dung của các comment ra form, sinh viên có thể
tùy ý chọn các thức thích hợp theo quan điểm cá nhân của mình. Code trên chỉ là tham
khảo, sinh viên nên dựa vào đó mà viết lại hoàn chỉnh hơn.
Phần mở rộng:
- Sinh viên bổ sung thêm các trường thông tin
o Ngày tháng năm viết comment và hiển thị thông tin này lên cùng với entry
comment.
![Page 7: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/7.jpg)
7
o Thử không sử dụng tag span EntryComment mà dùng Web control Table
để hiển thị các comment trên. Tìm hiểu các lớp Table, TableRow và
TableCell…
o Design lại form GuestBook này cho hợp lý hơn.
=oOo=
![Page 8: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/8.jpg)
1
Lab 3: Sử dụng Web control &
Validation Controls
Mục tiêu
- Sử dụng các web control trong trang ASP.NET
o TextBox, Button, DropDownList
- Sử dụng input validation controls trong trang ASP.NET
o RequiredFieldValidator
o CompareValidator
o RegularExpressionValidator
o ValidationSummary
- Hiển thị các thông báo lỗi khi nhập liệu không hợp lệ
Yêu cầu
- Đã làm quen với các server control cơ bản
- Biết xử lý các sự kiện của ASP.NET web control.
Kịch bản
- Xây dựng trang web đăng ký phòng cho một hội thảo khoa học. Các nhà khoa học
phải đăng ký online trước, tạo cho mình 1 account sau khi đăng ký xong thì, họ có
thể đăng nhập vào trang web của hội nghị để đăng ký phòng, và xem các tiện ích
khác, cũng như các dịch vụ mà trong suốt quá trình lưu trú user đã dùng. Trong
bài lab 3 này chúng ta chỉ xây dựng trang Register_room, yêu cầu user phải nhập
các thông tin sau
o Họ tên, đơn vị công tác, địa chỉ email (làm username đăng nhập), mật
khẩu để đăng nhập, ngày check in và số ngày ở, chọn loại phòng.
- Trang web phải có đầy đủ chức năng validate dữ liệu khi user nhập vào. Sau khi
tất cả dữ liệu hợp lệ thì việc đăng ký thành công!
Hướng dẫn
- Xây dựng trang web có dạng như sau:
![Page 9: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/9.jpg)
2
Hình 1: Mô tả các control trên web page
- Bảng mô tả các web control trên form
Bảng 1: Mô tả các control được thiết kế trên web page
Tên Kiểu Thuộc tính Giá trị
txtHoTen TextBox
txtCoQuan TextBox
txtEmail TextBox
txtMatKhau TextBox TextMode Password
txtNLMatKhau TextBox TextMode Password
txtCheckin TextBox
txtSoNgay TextBox
cbxLoaiPhong DropDownList Items {“Phòng đơn”,
“Phòng
đôi”,”Phòng
VIP đơn”,
![Page 10: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/10.jpg)
3
“Phòng VIP
đôi”}
btnDangKy Button
lblThongBao Label
rfvHoTen RequiredFieldValidator ControlToValidate
ErrorMessage
txtHoTen
“Nhập họ tên”
rfvCoQuan RequiredFieldValidator ControlToValidate
ErrorMessage
txtCoQuan
“Nhập cơ quan”
revEmail RegularExpressionValidato
r
ControlToValidate
ErrorMessage
ValidationExpressio
n
txtEmail
“Nhập địa chỉ
email”
Internet email
address
rfvMatKhau RequiredFieldValidator ControlToValidate
ErrorMessage
txtMatKhau
“Nhập mật
khẩu”
rfvNLMatKha
u
RequiredFieldValidator ControlToValidate
ErrorMessage
txtNLMatKhau
“Nhập mật
khẩu lần 2”
cmvMatKhau CompareValidator ControlToValidate
ErrorMessage
ControlToCompare
txtNLMatKhau
“Mật khẩu
không khớp”
txtMatKhau
cmvCheckin CompareValidator ControlToValidate
ErrorMessage
Type
Operator
txtCheckin
“Nhập ngày
checkin”
Date
DataTypeChec
k
cmvSoNgay CompareValidator ControlToValidate
ErrorMessage
txtSoNgay
“Nhập con số
![Page 11: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/11.jpg)
4
Type
Operator
ngày”
Integer
DataTypeChec
k
vsTomTatLoi ValidationSummary
Lưu ý: những control ko có khai báo thuộc tính trong bảng trên sẽ lấy giá trị mặc định.
- Khai báo trình xử lý sự kiện của button btnDangKy
o Kích đúp vào button “btnDangKy” trên form => trình xử lý sự kiện.
o Hàm này thực thi các yêu cầu sau:
§ Kiểm tra xem toàn bộ việc validation dữ liệu đã thành công chưa
§ Nếu thành công thì liệt kê các thông tin đăng ký của user trên
lblThongBao (xem như đã hoàn thành bước đăng ký)
§ Ngược lại hiển thị các lỗi cho user xem
- Chạy thử web page (F5 hoặc Ctrl + F5)
o Web page chờ user đăng ký
![Page 12: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/12.jpg)
5
Hình 2: Trang web khi hiển thị trên browser
o Trường hợp nhập liệu có lỗi sau khi user submit
Hình 3: Trang web sau khi submit và có lỗi nhập liệu
![Page 13: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/13.jpg)
6
o Trường hợp submit thành công
Hình 4: Trang web khi submit đăng ký thành công
Phần mở rộng:
- Sinh viên bổ sung thêm phần thông tin chi tiết sau khi user submit thành công, các
thông tin này hiển thị trên lblThongBao. (Bổ sung thêm phần xử lý của sự kiện
click btnDangKy).
=oOo=
![Page 14: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/14.jpg)
1
Lab 4: XỬ LÝ CSDL CƠ BẢN
Mục tiêu
- Sử dụng các control để kết nối CSDL Access như sau:
o AccessDataSource Control, và
o Grid View để hiển thị dữ liệu
o Cấu hình AccessDataSource để liên kết đến nguồn dữ liệu và các control
khác
Yêu cầu
- Tạo một ứng dụng web cơ bản cho phép quản lý danh sách nhân viên và phòng
ban. Gồm hai form cơ bản:
o Default.aspx: trang này cho phép gọi các trang quản lý nhân viên và
phòng ban
o qlnv.aspx cho phép hiển thị danh sách nhân viên, ngoài ra có chức năng
cập nhật thông tin của nhân viên. Danh sách nhân viên này có hỗ trợ chức
năng phân trang.
o qlpb.aspx: cho phép chọn một phòng ban nào đó và xem danh sách nhân
viên trong phòng ban đó, ngoài ra hiển thị thông tin của người phụ trách
phòng ban chính phòng ban đó.
Hướng dẫn
1. Bước 1: xây dựng trang default.aspx như hình 1:
![Page 15: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/15.jpg)
2
Hình 1: Trang default.aspx
- Mô tả trang default.aspx: chứa hai hyperlink liên kết đến các trang:
o Qlnv.aspx: quản lý nhân viên
o Qlpb.aspx: quản lý phòng ban.
2. Bước 2: Tạo database để quản lý nhân viên:
a. Sinh viên tạo file Access có tên qlnv.mdb, cơ sở dữ liệu này có mô tả như sau:
i. Gồm 2 bảng: nhanvien và phongban
1. Bảng nhanvien:
Table: Nhanvien
Tên cột Kiểu Ghi chú
MaNhanVien Number Mã nhân viên
TenNhanVien Text(50) Tên nhân viên
NgaySinh Date/time Ngày sinh
![Page 16: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/16.jpg)
3
DiaChi Text(50) Địa chỉ
DienThoai Number Điện thoại
GioiTinh Yes/no Giới tính
MaPhong number Mã phòng ban: khóa ngoại của bảng PhongBan
Hình 2: bảng nhân viên
2. Bảng phòng ban:
Table: PhongBan
Tên cột Kiểu Ghi chú
MaPhong Number Mã phòng ban
TenPhong Text(30) Tên phòng ban
ChucNang Text(255) Mô tả chức năng
TruongPhong Number Mã nhân viên là trưởng phòng, khóa ngoại liên kết với bảng NhanVien
![Page 17: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/17.jpg)
4
Hình 3: bảng phòng ban
b. Sau khi tạo xong database thì sinh viên nhập một số dữ liệu test.
c. Kế tiếp đưa file mdb vào project:
i. Kích chuột phải vào item App_data trong cửa sổ project, chọn add Existing items…cửa sổ Add existing item xuất hiện, sinh viên tìm file qlnv.mdb vừa tạo, cuối cùng chọn Add.
Hình 4: thêm file CSDL vào project
3. Bước 3: Tạo trang qlnv.aspx: trang này sử dụng các web control như sau:
o AccessDataSource: khai báo nguồn dữ liệu đến file qlnv.mdb
o GridView: hiển thị danh sách nhân viên từ datasource trên, cho phép sửa thông tin.
a. Bước 3.1:
i. Từ toolbook -> data: kéo AccessDataSource thả vào form
![Page 18: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/18.jpg)
5
Hình 5: kéo thả AccessDataSource từ Toolbox
ii. Đặt tên cho control này là DSNhanvien, bước tiếp theo cấu hình datasource để liên kết đến database: chọn chức năng Configure Data Source
Hình 6: chọn cấu hình datasource
iii. Trong màn hình Configure DataSource: chọn browser, chọn thư mục app_data chọn file access qlnv.mdb
![Page 19: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/19.jpg)
6
Hình 7: chọn database cho DSNhanVien
iv. Chọn Next để qua bước tiếp theo, trong bước này ta chọn dữ liệu để lấy từ database, gồm các bảng hoặc view. Ở đây ta chọn bảng NhanVien.
![Page 20: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/20.jpg)
7
Hình 8: chọn dữ liệu là bảng sinh viên
v. Tiếp theo chọn Advances… check vào Generate Insert, Update
and Delete statement, để hỗ trợ thêm xóa sửa.
![Page 21: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/21.jpg)
8
Hình 9: chọn hỗ trợ thêm xóa sửa
vi. Cuối cùng nhấn Finish để hoàn thành bước khai báo datasource
b. Bước 3.2: bổ sung GridView vào để hiển thị dữ liệu
i. Từ toolbox: sinh viên kéo GridView thả vào form
Hình 10: chọn GridView thả vào form
ii. Đặt tên là GVNhanVien cho control này
iii. Chọn datasource cho GVNhanVien là DSNhanVien vừa tạo ở bước trên
![Page 22: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/22.jpg)
9
Hình 11: chọn nguồn dữ lieu cho GridView GVNhanVien
iv. Chọn Auto Format -> Professional để chỉnh lại giao diện của GridView
v. Chọn chức năng Edit Columns…của GVNhanVien: trong phần này đã có sẵn 5 cột cho gridview
![Page 23: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/23.jpg)
10
Hình 12: Phần edit columns..
Ta sẽ bổ sung thêm chức năng sửa: bằng cách thêm CommandField: Edit,Update,Cancel.
![Page 24: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/24.jpg)
11
Hình 13: bổ sung thêm chức năng sửa
4. Chạy và test form qlnv.aspx
![Page 25: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/25.jpg)
12
Hình 14: Màn hình quản lý nhân viên: qlnv.aspx
![Page 26: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/26.jpg)
13
Hình 15: Màn hình cập nhật một nhân viên: qlnv.aspx
5. Bước 5: Tạo trang quản lý phòng ban, trang này đơn giản chỉ chứa 1
dropdownlist liệt kê các phòng ban, khi user chọn một phòng ban nào đó thì danh
sách các sinh viên thuộc phòng ban đó liệt kê trong một gridview
Trang qlpb.aspx gồm các control:
o Dropdownlist: có tên DLPhongBan, lấy dữ liệu từ datasource
DSPhongBan
o AccessDataSource: gồm 2 AccessDataSource có tên.
§ DSPhongBan: lấy danh sách các phòng ban
§ DSNhanVienPhongBan
o GridView: GVNhanVienPhongBan lấy danh sách nhân viên thuộc phòng
ban
a. Bước 5.1: Tạo AccessDataSource thứ 1 tên DSPhongBan
i. Kéo thả AccessDataSource từ toolbox:data vào form qlpb.aspx
ii. Cấu hình cho datasource này link đến bảng PhongBan
iii. Kích Finish để hoàn tất
![Page 27: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/27.jpg)
14
Hình 16: chọn bảng PhongBan
b. Bước 5.2: tạo dropdownlist chứa danh sách phòng ban
i. Kéo thả DropDownList từ toolbox vào form và đặt id là
DLPhongBan
ii. Chọn auto postback cho DLPhongBan: khi user chọn thì xử lý ở
server và hiển thị danh sách nhân viên thuộc phòng ban đó
![Page 28: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/28.jpg)
15
Hình 17: chọn thuộc tính AutoPostBack cho dropdownlist
Hình: chọn AutoPostBack cho DLPhongBan
iii. Chọn datasource cho DLPhongBan như sau: phần này ta sẽ liên
kết đến DSPhongBan đã khai báo trong bước trên
Hình 18: Khai báo điều kiện Where cho câu truy vấn của DSNhanVienPhongBan
c. Bước 5.3: Tạo một AccessDataSource có tên DSNhanVienPhongBan:
datasource này có chức năng sẽ truy vấn lấy các nhân viên thuộc phòng
ban mà user chọn trong dropdownlist ở bên trên
i. Kéo thả AccessDataSource vào form: đặt id là
DSNhanVienPhongBan
ii. Cấu hình đến file qlnv.mdb như bước trên, ở bước tiếp theo ta
vẫn chọn bảng NhanVien, chọn tất cả các trường.
![Page 29: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/29.jpg)
16
Hình 19: Chọn bảng nhân viên
iii. Chọn button Where, ở đây ta sẽ chỉ chọn những nhân viên thuộc
phòng ban đang chọn trên dropdownlist DLPhongBan
Trong màn hình Add Where clause
Ta chọn:
- column là MaPhong
- Source là control
- Control ID: DLPhongBan
Cuối cùng chọn Add để thêm điều kiện where này vào câu truy
vấn
![Page 30: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/30.jpg)
17
Hình 20: cấu hình datasource DSNhanVienPhongBan
d. Bước 5.4: thêm GridView GVNhanVien vào from: cấu hình cho
Datasource của GridView này đến DSNhanVienPhongBan trên là xong.
6. Bước 6: run và test trang qlpb.aspx
![Page 31: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/31.jpg)
18
Hình 21: Minh họa trang qlpb.aspx.
Khi user chọn phòng ban nào đó trong DropDownList thì danh sách nhân viên
tương ứng của phòng ban đó sẽ hiển thị bên dưới.
Nâng cao: - Sinh viên bổ sung thêm thông tin tên người trưởng phòng trong form qlpb.aspx,
(hiện form trên chỉ hiển thị danh sách nhân viên thuộc phòng đó, còn thiếu thông
tin trưởng phòng).
=oOo=
![Page 32: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/32.jpg)
1
Lab 5: QUẢN LÝ ALBUM BÀI
HÁT
Mục tiêu
- Sử dụng các câu lệnh insert, query trên CSDL SQL Server
o Sử dụng Parameter để truyền tham số cho câu lệnh SQL
- Binding dữ liệu từ CSDL vào các control như DropDownList, DataGrid
- Sử dụng Session để lưu các thông tin, và sử dụng trong các page khác nhau
- Sử dụng Response.Redirect để đưa người dùng sang web page khác.
Bài 5.1: Quản lý Album bài hát cơ bản
Yêu cầu
- Tạo một ứng dụng web cơ bản cho phép quản lý album bài hát:
o Cho phép user xem các bài hát theo các mục như: tên tác giả, thể loại,
album
o User có thể tạo mới một album từ các bài hát đã có trong danh sách bài hát
- Ứng dụng gồm 2 trang chính như sau
o SongManaging.aspx: trang này cho phép user chọn xem các bài hát theo
tên tác giả, thể loại và các album có sẵn. Giao diện của trang web đơn giản
như sau
![Page 33: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/33.jpg)
2
Hình 1: Minh họa giao diện trang SongManaging.aspx
Minh họa cách thao tác trên trang SongManaging.
Hình 2: Thao tác tìm kiếm và chọn bài hát để đưa vào album
Mô tả: phần tìm kiếm theo tiêu chuẩn, khởi tạo sẵn 3 mục chọn là: Artist, Genre và
Album.
Mỗi khi chọn một tiêu chuẩn nào đó thì mục “chọn” sẽ hiện giá trị có thể có (load trong
database) tương ứng với mục tìm kiếm. Ví dụ nếu mục tìm kiếm theo chuẩn chọn Artist
![Page 34: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/34.jpg)
3
thì trong mục chọn này sẽ truy vấn trong bảng Artist lấy ra tất cả các nghệ sỹ và đưa vào
DropDownList Chọn.
Sau khi chọn xong, thì kích vào button tìm kiếm, kết quả sẽ liệt kê ra tất cả bài hát theo
tiêu chuẩn tìm kiếm trên vào trong DataGrid. DataGrid này chi hiển thị tên bài hát và một
chức năng chọn. User có thể chọn các bài hát ưng ý để tạo ra một album khác. Mỗi lần
chọn một bài hát, thông tin bài hát này được lưu lại (sử dụng mã bài hát) trong session.
User có thể chọn tiêu chuẩn tìm kiếm khác để xem và chọn các bài khác. Khi hoàn tất quá
trình chọn bài hát user kích vào button “Tạo Album” để chuyển sang phần tạo album mới
từ các bài hát đã chọn (gọi trang Album.aspx).
o Album.aspx: Cho phép user tạo album mới với tên gọi và danh sách các
bài hát đã chọn trong trang SongManaging.aspx.
Hình 3: Trang thêm album
Mô tả: trang này lấy ds các bài hát đã chọn trong bước trước ở trang SongManaging.aspx,
tại trang này user có thể hiệu chỉnh lại danh sách bài hát bằng cách xóa các bài hát trước
khi thực hiện thao tác cuối cùng tạo album.
Hướng dẫn
1. Tạo CSDL SongAlbum có các bảng như sau:
a. Albums: chứa danh sách các album
![Page 35: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/35.jpg)
4
b. Songs: chứa danh sách các bài hát
c. AlbumSong: chứa danh sách các bài hát thuộc album
d. Artist: danh sách các nghệ sỹ
e. Genres: thể loại
Bảng Album
Bảng AlbumSong
Bảng Artist
Bảng Genres
![Page 36: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/36.jpg)
5
Bảng Song
Một số dữ liệu cho các bảng
Artis ArtisID ArtisName 1 ABBA 2 Boyzone 3 Backstreet Boys 4 Westlife 5 Metallica 6 Aerosmith 7 Taylor Swift 8 Louis Armstrong 9 Kenny G 10 50 cent
Genres
GenreID GenreName
1 Pop 2 Rock 3 Country 4 Jazz 5 Hiphop
Song
SongID SongName GenreID ArtisID 1 Happy New Year 1 1 2 Dancing Queen 1 1 3 No Matter What 1 2 4 I’ll Never Break your heart 1 3 5 As long as you love me 1 3 6 Soledad 1 4 7 Seasons in the sun 1 4 8 Too hard to say good bye 1 4
![Page 37: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/37.jpg)
6
9 All out of love 1 4 10 The unforgiven II 2 5 11 Nothing else matters 2 5 12 My Apocalypse 2 5 13 One 2 5 14 I Don’t want to miss a thing 2 6 15 Dream on 2 6 16 Lay it down 2 6 17 Kings and Queens 2 6 18 Back to December 3 7 19 White Horse 3 7 20 Tell me why 3 7 21 Beautiful Eyes 3 7 22 What a Wonderful World 4 8 23 La vie en rose 4 8 24 A Kiss to Build a Dream On 4 8 25 Fall Again 4 9 26 Forever in Love 4 9 27 Songbird 4 9 28 Silhouette 4 9 29 I get money 5 10 30 21 Questions 5 10 31 Come & go 5 10
2. Tạo trang web SongManaging.aspx có layout như sau:
Hình 4: Layout của trang SongManaging.aspx
Các control mô tả trên webform
![Page 38: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/38.jpg)
7
Tên Kiểu Thuộc tính Diễn giải
ddlSearchBy DropDownList Items = {Artist, Genre, Album}
Combobox cho phép chọn tiêu chuẩn tìm kiếm
ddlSearchOption DropDownList Chứa các giá trị có thể chọn, để tìm kiếm, giá trị này phụ thuộc vào giá trị của ddlSearchBy bên trên
btnSearch Button Kích vào để tìm bài hát
lblStatus Label Hiển thị thông tin số bài hát đã chọn
dgSongs DataGrid Hiển thị kết quả các bài hát tìm được
btnCreateAlbum Button Gọi trang Album để tạo album mới từ các bài hát đã chọn
3. Tạo chuỗi kết nối CSDL dữ liệu trong file cấu hình web.config
Lưu ý: Tùy thuộc vào server mà sinh viên chỉnh sửa lại cho thích hợp!
Bổ sung vào tag <configuration> một tag <appSettings> như sau
<appSettings> <add key="ConnectionString" value="sinh viên mô tả chuỗi kết nội ở đây"></add>
</appSettings>
Cách thức lấy chuỗi này trong code
String chuoiketnoi = ConfigurationManager.AppSettings["ConnectionString"].ToString();
4. Tạo hàm FillSearchOption trong code behind của trang SongManaging.aspx: hàm này sẽ
lấy thông tin user chọn trong combobox ddlSearchBy và truy xuất database để lấy dữ liệu
tương ứng.
1. private void FillSearchOption() 2. { 3. string scnn =
ConfigurationManager.AppSettings["ConnectionString"].ToString();
![Page 39: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/39.jpg)
8
4. SqlConnection conn = new SqlConnection(scnn); 5. SqlCommand cmd = new SqlCommand(); 6. cmd.Connection = conn; 7. SqlDataAdapter da = new SqlDataAdapter(cmd); 8. // tạo datatable để lấy dữ liệu từ database 9. DataTable dt = new DataTable(); 10. 11. //kiểm tra xem SearchBy được chọn 12. switch (ddlSearchBy.SelectedIndex) 13. { 14. case 0: // lấy thông tin nghệ sỹ 15. cmd.CommandText = "SELECT * FROM
artists"; 16. break; 17. 18. case 1:// lấy thông tin thể loại 19. cmd.CommandText = "SELECT * FROM
genres"; 20. break; 21. 22. case 2: // lấy danh sách album 23. cmd.CommandText = "SELECT * FROM
albums"; 24. break; 25. } 26. try 27. { 28. da.Fill(dt); // đưa dữ liệu vào datatable 29. } 30. catch (SqlException ex) 31. { 32. Response.Write(ex.Message); 33. } 34. // hiển thị kết quả từ datatable ra combobox
ddlSearchOption 35. ddlSearchOption.DataSource = dt.DefaultView; 36. ddlSearchOption.DataTextField =
dt.Columns[1].ColumnName; 37. ddlSearchOption.DataValueField =
dt.Columns[0].ColumnName; 38. ddlSearchOption.DataBind(); 39. }
5. Khởi tạo trong hàm Page_Load
1. protected void Page_Load(object sender, EventArgs e) 2. { 3. if (!IsPostBack)
![Page 40: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/40.jpg)
9
4. { // mặc định chọn item đầu tiên 5. ddlSearchBy.SelectedIndex = 0; 6. FillSearchOption(); // lấy thông tin 7. } 8. }
6. Tạo hàm FillDataGrid: hàm này được gọi khi user kích vào button “Tìm kiếm”, hàm có
chức năng lấy các thông tin từ phần chọn của user trong 2 combobox và truy vấn
database, kết quả hiển thị trong datagrid
1. private void FillDataGrid() 2. { 3. string scnn =
ConfigurationManager.AppSettings["ConnectionString"].ToString(); 4. SqlConnection cnn = new SqlConnection(scnn); 5. SqlCommand cmd = new SqlCommand(); 6. cmd.Connection = cnn; 7. 8. SqlDataAdapter da = new SqlDataAdapter(cmd); 9. // tạo datatable để lấy dữ liệu 10. DataTable dt = new DataTable(); 11. // lấy giá trị được chọn trong SearchOption 12. string value = ddlSearchOption.SelectedValue; 13. // kiểm tra xem search theo tiêu chuẩn nào 14. switch (ddlSearchBy.SelectedIndex) 15. { 16. case 0: // lấy bài hát theo id của nghệ sỹ 17. cmd.CommandText = "SELECT * FROM Songs
WHERE ArtistID = "+ value; 18. break; 19. case 1:// lấy bài hát theo id của thể loại 20. cmd.CommandText = "SELECT * FROM Songs
WHERE GenreID = "+value; 21. break; 22. case 2:// lấy các bài hát thuộc album id 23. cmd.CommandText = "SELECT * FROM Songs
WHERE SongID in (SELECT SongID FROM AlbumSong WHERE AlbumID = " + value+")";
24. break; 25. } 26. 27. try 28. { 29. da.Fill(dt); // lấy dữ liệu vào dt 30. } 31. catch (SqlException ex) 32. { 33. Response.Write(ex.Message);
![Page 41: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/41.jpg)
10
34. } 35. // hiển thị kết quả danh sách bài hát trong
datagrid 36. dgSongs.DataSource = dt.DefaultView; 37. dgSongs.DataBind(); 38. 39. }
7. Khai báo trình xử lý sự kiện click của button btnSearch
1. protected void btnSearch_Click(object sender, EventArgs e) 2. { 3. FillDataGrid(); // thực hiện tìm kiếm và hiển thị ds bài hát 4. }
5. Thiết kế lại DataGrid để hiển thị danh sách tên bài hát.
Trong datagrid này ta hiển thị 2 cột, một cột là tên bài hát, cột còn lại là chức năng
“chọn”,
Chọn chức năng Property Builder… cho datagrid, chọn tab Columns
Thêm một Bound Column kết buộc với field SongNam tên bài hát
![Page 42: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/42.jpg)
11
Thêm 1 button kểu Select cho chức năng chọn, khai báo thuộc tính “Command Name” là
SelectSong.
![Page 43: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/43.jpg)
12
6. Chức năng “chọn” bài hát vào danh sách để tạo mới album, chức năng chọn này user có
thể kích vào datagrid liệt kê danh sách bài hát trên giao diện.
Do mỗi bài hát chứa trên 1 dòng của datagrid nên khi kích chọn vào ta phải biết được id
của bài hát đó, để làm được điều này ta thiết lập thuộc tính DataKeyField cho datagrid
dgSong với id của bài hát. Trong màn hình thiết kế form ta chọn dgSong và thiết lập
thuộc tính DataKeyField là SongID như hình minh họa
![Page 44: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/44.jpg)
13
Hình: Khai báo thuộc tính DataKeyField là SongID.
Ta sẽ chứa danh sách ID các bài hát được chọn trong biến đối tượng
Session[“SelectedSongs”], là dạng ArrayList.
- Khai báo trình xử lý sự kiện ItemCommand cho DataGrid, sự kiện này được gọi khi một
cột dạng button được kích.
![Page 45: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/45.jpg)
14
Nội dung của hàm xử lý sự kiện ItemCommand của DataGrid
protected void dgSongs_ItemCommand(object source, DataGridCommandEventArgs e) { // lấy id bài hát của dòng đang chọn int SongID = Convert.ToInt32(dgSongs.DataKeys[e.Item.ItemIndex]); // xử lý khi button Select được chọn if (e.CommandName == "SelectSong") { // kiểm tra xem có id của bài hát nào được chọn hay không if (Session["SelectedSongs"] != null) { ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"];
![Page 46: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/46.jpg)
15
if (!SelectedSongs.Contains(SongID)) // chưa có -> thêm SelectedSongs.Add(SongID); } else // khởi tạo session nếu chưa có { ArrayList SelectedSongs = new ArrayList(); SelectedSongs.Add(SongID); Session["SelectedSongs"] = SelectedSongs; } } // hiển thị thông tin số bài hát đã chọn lblStatus.Text = "Số bài hát đã chọn: " +
((ArrayList)Session["SelectedSongs"]).Count; }
7. Khai báo xử lý khi user kích vào button “Tạo Album”, button này cho phép chuyển user
sang trang Album.aspx để thêm album
Để gọi chuyển ta dùng:
// chuyển hướng sang trang quản lý album Response.Redirect("album.aspx");
8. Tạo trang Album.aspx có layout như sau:
Các control trên page
![Page 47: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/47.jpg)
16
Tên Kiểu Thuộc tính Diễn giải
txtAlbumName TextBox Nhập tên của album mới
btnCreateAlbum Button Chức năng tạo album
rfvAlbumName RequiredFieldValidator ControlToValidate = txtAlbumName
ErrorMessage=”Phải nhập tên Album”
Xác nhận xem user có nhập tên album hay không, nếu không nhập thì không tạo mới
dgSongs DataGrid DataKeyField = SongID
Hiển thị các bài hát đã chọn trong trang SongManaging.aspx
lblStatus Label Hiển thi thông tin: lỗi hoặc hoàn tất…
9. Khai báo DataGrid dgSongs có 4 cột, 3 cột đầu là: tên bài hát, tên tác giả, thể loại là dạng
Bound Column, cột cuối cùng là dạng Button Column.
![Page 48: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/48.jpg)
17
Hình: khai báo cột tên bài hát, hiển thị field SongName
![Page 49: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/49.jpg)
18
Hình: khai báo tên tác giả, hiển thị trường ArtisName
![Page 50: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/50.jpg)
19
Hình: Khai báo cột thể loại hiển thị trường GenreName
![Page 51: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/51.jpg)
20
Hình: khai báo cột Xóa, có Command name là RemoveSong
10. Tạo hàm FillDataGrid: lấy các bài hát đã chọn và hiển thị lên datagrid
1. protected void Page_Load(object sender, EventArgs e) 2. { 3. if (!IsPostBack) 4. { 5. FillDataGrid(); 6. } 7. } 8. private void FillDataGrid() 9. { 10. // kiểm tra xem session có tạo chưa 11. if (Session["SelectedSongs"] == null) 12. { 13. lblStatus.Text = "<a
href=\"default.aspx\">Chưa chọn bài hát</a>";
![Page 52: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/52.jpg)
21
14. btnCreateAlbum.Enabled = false; 15. return; 16. } 17. 18. ArrayList SelectedSongs =
(ArrayList)Session["SelectedSongs"]; 19. // kiểm tra số item chọn 20. if (SelectedSongs.Count < 1) 21. { 22. lblStatus.Text = "<a
href=\"default.aspx\">Chưa chọn bài hát</a>"; 23. btnCreateAlbum.Enabled = false; 24. return; 25. } 26. 27. // có chọn bài hát 28. // tạo danh sách id bài hát 29. string SongIDs=""; 30. foreach (int id in SelectedSongs) 31. SongIDs += id + ", "; 32. // xóa dấu ', cuối cùng 33. SongIDs = SongIDs.Remove(SongIDs.Length - 2,
2); 34. // tạo các đối tượng comand, connection,
adapter 35. string scnn =
ConfigurationManager.AppSettings["ConnectionString"].ToString(); 36. SqlConnection cnn = new SqlConnection(scnn); 37. SqlCommand cmd = new SqlCommand(); 38. cmd.Connection = cnn; 39. cmd.CommandText = "SELECT songid,songname,
artistName, genrename FROM songs, artists, genres where songs.artistid = artists.artistid and songs.genreid = genres.genreid and songid in ("+SongIDs+")";
40. 41. SqlDataAdapter da = new SqlDataAdapter(cmd); 42. // tạo bảng lưu dữ liệu 43. DataTable dt = new DataTable(); 44. da.Fill(dt); 45. // fill vào datagrid 46. dgSongs.DataSource = dt.DefaultView; 47. dgSongs.DataBind(); 48. }
11. Khai báo trình xử lý sự kiện ItemCommand của datagrid, chức năng này cho phép user
xóa một bài hát trong danh sách chọn.
1. protected void dgSongs_ItemCommand(object source, DataGridCommandEventArgs e)
![Page 53: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/53.jpg)
22
2. { 3. // nếu chọn cột xóa 4. if (e.CommandName == "RemoveSong" &&
Session["SelectedSongs"] != null) 5. { 6. ArrayList SelectedSongs =
(ArrayList)Session["SelectedSongs"]; 7. //lấy id của bài hát 8. int SongID =
Convert.ToInt32(dgSongs.DataKeys[e.Item.ItemIndex]); 9. 10. if (SelectedSongs.Contains(SongID)) 11. { 12. SelectedSongs.Remove(SongID); 13. Session["SelectedSongs"] =
SelectedSongs; 14. FillDataGrid(); 15. } 16. } 17. }
12. Khai báo trình xử lý sự kiện click của button: “Tạo album”
Hàm xử lý như sau
protected void btnCreateAlbum_Click(object sender, EventArgs e) { if (!IsValid) return; // nế u chứa validation xong // lấy tên của album string AlbumName = txtAlbumName.Text.Trim(); // lưu AlbumID int AlbumID=0; // thực hiện thao tác thêm album mới string scnn = ConfigurationManager.AppSettings["ConnectionString"]; SqlConnection cnn = new SqlConnection(scnn); SqlCommand cmd = new SqlCommand(); cmd.Connection = cnn;
cmd.CommandText = "Insert into Albums values(@albumname,@createDate);
select MAX(AlbumID) from albums"; // tạo tên album cmd.Parameters.Add("@albumname", SqlDbType.VarChar); cmd.Parameters["@albumname"].Value = AlbumName; // ngày tạo album cmd.Parameters.Add("@createDate", SqlDbType.SmallDateTime);
![Page 54: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/54.jpg)
23
cmd.Parameters["@createDate"].Value = DateTime.Now.ToString(); try { cnn.Open(); AlbumID = Convert.ToInt32(cmd.ExecuteScalar());// thực thi if (AlbumID > 0) // thêm thành công lblStatus.Text = "Thêm album thành công!"; } catch (SqlException ex) { Response.Write(ex.Message); } finally { cnn.Close(); } // thêm thông tin vào bảng AlbumSong cmd.CommandText = "INSERT INTO AlbumSong values(@AlbumID,@SongID)"; cmd.Parameters.Add("@AlbumID", SqlDbType.Int); cmd.Parameters["@AlbumID"].Value = AlbumID; cmd.Parameters.Add("@SongID", SqlDbType.Int); ArrayList SelectedSongs = (ArrayList)Session["SelectedSongs"]; try { cnn.Open(); foreach (int id in SelectedSongs) { cmd.Parameters["@SongID"].Value = id; cmd.ExecuteNonQuery(); } } catch (SqlException ex) { Response.Write(ex.Message); } finally { cnn.Close(); } // xóa tất cả các bài đã chọn SelectedSongs.Clear(); Session["SelectedSongs"] = SelectedSongs;
![Page 55: Lab 2: Sử dụng các ASP.NET Web control cơ bảndulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... · - Sử dụng các thành phần web server control](https://reader030.vdocuments.pub/reader030/viewer/2022040706/5e04d2ae5967b94ff44daad3/html5/thumbnails/55.jpg)
24
// cập nhật lại giao diện dgSongs.DataSource = null; dgSongs.DataBind(); FillDataGrid() }
Bài 5.2: - Sinh viên bổ sung thêm các trang thêm bài hát, thêm nghệ sỹ, thêm thể loại và
thêm bài hát.
- Xây dựng một trang chính, chứa menu
o Quản lý bài hát – Album: gọi trang SongManaging.aspx
o Thêm bài hát
o Thêm nghệ sỹ
o Thêm thể loại
=oOo=