Bài giảng Lập trình Web - Bài 4: Các điều khiển dữ liệu

Nội dung text: Bài giảng Lập trình Web - Bài 4: Các điều khiển dữ liệu

1. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC a - Tek Ngành lập trình - CSDL 1
2. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Mục tiêu • Sử dụng thành thạo các điều khiển thuộc nhóm Data • Tạo trang web có dạng Master-Details a - Tek Ngành lập trình - CSDL 2
3. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Tổng quan 2. Các điều khiển Danh sách 3. Điều khiển GridView 4. Các điều khiển DataSource 5. Điều khiển DataList 6. DetailsView và FormView a - Tek Ngành lập trình - CSDL 3
4. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Tổng quan • Phân loại - Điều khiển Danh sách - List Controls - Điều khiển liên kết dữ liệu – Data-Bound controls - Điều khiển nguồn dữ liệu – Data-Source controls a - Tek Ngành lập trình - CSDL 4
5. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Tổng quan • Các điều khiển này có khả năng liên kết với một nguồn dữ liệu • Nguồn dữ liệu dùng để liên kết: ArrayList, SortedList, HashTable, DataSet, DataTable, DataView, DataReader, a - Tek Ngành lập trình - CSDL 5
6. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Tổng quan • Thao tác liên kết dữ liệu của điều khiển List và Data-Bound: 2 cách - Lúc thực thi: thường sử dụng thuộc tính DataSource của điều khiển - Lúc thiết kế: sử dụng các điều khiển Data source (AccessDataSource, SqlDataSource, ) kết hợp với thuộc tính DataSourceID a - Tek Ngành lập trình - CSDL 6
7. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Tổng quan 2. Các điều khiển Danh sách 3. Điều khiển GridView 4. Các điều khiển DataSource 5. Điều khiển DataList 6. DetailsView và FormView a - Tek Ngành lập trình - CSDL 7
8. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Điều khiển Danh sách – List Controls • ListBox và DropdownList • CheckBoxList và RadioButtonList • BulletedList a - Tek Ngành lập trình - CSDL 8
9. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • ListBox và DropDownList - Dùng để hiển thị danh sách - Items: chứa tập hợp các mục chọn, có thể thêm vào lúc thiết kế (Design) hoặc lúc thực thi (Run-time) - Rows: số dòng hiển thị của ListBox - SelectionMode: cách thức chọn các mục trong ListBox (Single/Multi) a - Tek Ngành lập trình - CSDL 9
10. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • ListBox và DropDownList - DataTextField: tên field có giá trị thể hiện trên điều khiển - DataValueField: tên field có gía trị lưu trữ - AutoPostBack: có tự động PostBack về Server khi mục chọn của điều khiển bị thay đổi (True/False) a - Tek Ngành lập trình - CSDL 10
11. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • ListBox và DropDownList - Một số thuộc tính lúc thực thi: § SelectedIndex: chỉ số của mục được chọn § SelectedItem: mục được chọn (kiểu ListItem) § SelectedValue: giá trị của mục được chọn - Sự kiện SelectedIndexChanged: xảy ra khi thay đổi dòng được chọn Minh họa a - Tek Ngành lập trình - CSDL 11
12. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • ListBox và DropDownList - Một số thao tác: § Thêm mới một mục vào cuối danh sách Items.Add( ) hoặc Items.Add( ) § Thêm mới một mục tại một vị trí xác định Items.Insert( , ) hoặc Items.Insert( , ) Minh họa a - Tek Ngành lập trình - CSDL 12
13. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • ListBox và DropDownList - Một số thao tác: § Xóa một mục ra khỏi danh sách Items.Remove( ) hoặc Items.Remove( ) § Xóa tất cả các mục trong danh sách Items.clear Minh họa a - Tek Ngành lập trình - CSDL 13
14. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • ListBox và DropDownList - Một số thao tác: § Kiểm tra một mục đã có trong danh sách chưa Items.Contains( ) As Boolean hoặc Items.IndexOf( ) As Integer § Lấy giá trị tổng số mục có trong danh sách Items.Count Minh họa a - Tek Ngành lập trình - CSDL 14
15. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • CheckBoxList và RadioButtonList - RepeatColumns: qui định số cột hiển thị - RepeatDirection: qui định hình thức hiển thị (Vertical/Horizontal) - Các thao tác thêm, xóa các mục chọn: giống ListBox Minh họa a - Tek Ngành lập trình - CSDL 15
16. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • BulletedList - BulletStyle: style dùng làm Bullet - BulletImageUrl: URL của tập tin hình ảnh, phải có BulletStyle=CustomImage - DisplayMode: hình thức thể hiện (Text, HyperLink, LinkButton) - Các thao tác thêm, xóa các mục chọn: giống ListBox Minh họa a - Tek Ngành lập trình - CSDL 16
17. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển danh sách – List controls • Thao tác liên kết dữ liệu 1- ArrayList = new ArrayList(); //Khởi tạo nguồn .Add(Object); //Thêm dữ liệu 2- .DataSource= ; //Khai báo nguồn dữ liệu 3- .DataTextField=“Field”; //Khai báo field thể hiện 4- .DataValueField=“Field”; //Khai báo filed lưu trữ 5- .DataBind(); //Liên kết - Dòng 3, 4 có thể bỏ qua tùy vào nguồn dữ liệu Minh họa a - Tek Ngành lập trình - CSDL 17
18. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Tổng quan 2. Các điều khiển Danh sách 3. Điều khiển GridView 4. Các điều khiển DataSource 5. Điều khiển DataList 6. DetailsView và FormView a - Tek Ngành lập trình - CSDL 18
19. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC GridView • Giới thiệu • Liên kết dữ liệu và định dạng • Các xử lý trên GridView a - Tek Ngành lập trình - CSDL 19
20. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Giới thiệu a - Tek Ngành lập trình - CSDL 20
21. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Giới thiệu - Dùng hiển thị dữ liệu dạng dòng-cột (Tabular) - Thể hiện trên trình duyệt dưới dạng HTML Table - Đặc điểm: § Hỗ trợ cơ chế sắp xếp dữ liệu § Hỗ trợ cơ chế phân trang dữ liệu § Có thể cập nhật dữ liệu trực tiếp trên lưới a - Tek Ngành lập trình - CSDL 21
22. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Liên kết dữ liệu và định dạng - Thao tác liên kết dữ liệu lúc thực thi: .DataSource = ; .DataBiding(); - Thuộc tính định dạng: • HtmlEncoded(True/False): cho phép mã hóa dưới dạng HTML không • DataFormatString: định dạng cho giá trị của field liên kết Minh họa a - Tek Ngành lập trình - CSDL 22
23. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Sắp xếp dữ liệu: § Khai báo t.t AllowSorting = True § Khai báo tên cột cần sắp xếp trong ô Sort expression § Sử dụng sự kiện Sorting để xử lý: ü Liên kết dữ liệu và sắp xếp theo cột cần sắp xếp ü Giá trị e.SortExpression cho biết thông tin của cột được chọn Minh họa a - Tek Ngành lập trình - CSDL 23
24. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Phân trang: a - Tek Ngành lập trình - CSDL 24
25. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Phân trang: § Khai báo t.t AllowPaging = True § Khai báo t.t PageSize = § Sử dụng sự kiện PageIndexChanging để xử lý: .PageIndex = e.NewpageIndex ; //Liên kết dữ liệu ü Giá trị e.NewPageIndex cho biết chỉ số trang được chọn ü Thuộc tính PageIndex: chỉ số trang hiện hành trên lưới Minh họa a - Tek Ngành lập trình - CSDL 25
26. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Tùy biến các cột: a - Tek Ngành lập trình - CSDL 26
27. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Tùy biến các cột: § Bước 1: khi thiết kế, cột thể hiện có loại là TemplateField § Bước 2: dành cho xử lý đơn giản ü Chèn một điều khiển vào cột TemplateField, liên kết DL với điều khiển này ü Khai báo biểu thức trong ô Custom binding Code Expression Ví dụ: hiển thị cột Gioi_tinh là “Nam” hay “Nữ” ( (bool) Eval( "Gioi_tinh")==false?"Nữ":"Nam") Minh họa a - Tek Ngành lập trình - CSDL 27
28. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Tùy biến các cột: § Bước 2: dành cho xử lý phức tạp, viết code trong sự kiện RowDataBound − RowDataBound: xảy ra khi lưới được liên kết dữ liệu (DataBinding). Ứng với mỗi dòng, xảy ra sự kiện này − e.Row.RowIndex: chỉ số của dòng hiện hành (Header /Footer= -1) − e.Row.RowType: lọai của mỗi dòng (Dòng chẵn, lẽ, ) a - Tek Ngành lập trình - CSDL 28
29. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Tùy biến các cột: § Bước 2: dành cho xử lý phức tạp, viết code trong sự kiện RowDataBound − e.Row.FindControl(“Tên điều khiển”): tìm kiếm điều khiển trên dòng hiện hành − DataBinder.Eval(e.Row.DataItem,“Tên cột”): truy xuất dữ liệu của cột trên dòng hiện hành Minh họa a - Tek Ngành lập trình - CSDL 29
30. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Giới thiệu 3 loại cột trong GridView: Minh họa a - Tek Ngành lập trình - CSDL 30
31. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Giới thiệu 3 loại cột trong GridView: • ImageField Ø DataImageUrlField: chứa Image URL liên kết với field Ø DataImageUrlFormatString: định dạng cho giá trị liên kết với thuộc tính DataImageUrlField Ví dụ: DataImageUrlField: Hinh_minh_hoa DataImageUrlFormatString: ~/Hinh_du_lieu/{0}.jpg Minh họa a - Tek Ngành lập trình - CSDL 31
32. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Giới thiệu 3 loại cột trong GridView: • HyperLinkField Ø DataNavigateUrlFields: tên field liên kết với thuộc tính NavigateUrl của hyperlink Ø DataNavigateUrlFormatString: định dạng cho giá trị liên kết với thuộc tính DataNavigateUrlFields Ø DataTexField: field có nội dung được hiển thị Ví dụ: DataNavigateUrlFields: href DataNavigateUrlFormatString: {0} DataTextField: Tencty Minh họa a - Tek Ngành lập trình - CSDL 32
33. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Giới thiệu 3 loại cột trong GridView: • ButtonField Ø ButtonType: kiểu nút lệnh (Button/Link/Image) Ø CommandName: tên kết hợp với nút lệnh Ø DataTexField: field có nội dung được hiển thị Ø DataTextFormatString: định dạng chuỗi thể hiện trên nút Ví dụ: CommandName: Chon DataTextField: stt DataTextFormatString: chọn: {0} Minh họa a - Tek Ngành lập trình - CSDL 33
34. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Giới thiệu 3 loại cột trong GridView: • ButtonField Ø Sự kiện RowCommand: xảy ra khi nhấn nút lệnh Minh họa a - Tek Ngành lập trình - CSDL 34
35. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Cập nhật dữ liệu: Minh họa a - Tek Ngành lập trình - CSDL 35
36. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Cập nhật dữ liệu: § Yêu cầu đầu tiên: khai báo các field dùng làm khóa cho lưới .DataKeyNames = new string[ ] {“tên field1”, }; (có thể khai báo trên cửa sổ Properties) Minh họa a - Tek Ngành lập trình - CSDL 36
37. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Cập nhật dữ liệu: § Giai đọan 1: thiết kế, chọn loại cột thể hiện là CommandField Thuộc tính CommandName của các nút sau có giá trị mặc định theo chức năng tương ứng: Nút Delete CommandName = “Delete” Nút Edit CommandName = “Edit” Nút Update CommandName = “Update” Nút Cancel, Select Minh họa a - Tek Ngành lập trình - CSDL 37
38. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Cập nhật dữ liệu: § Giai đọan 2: xử lý. Sử dụng các sự kiện sau: ü RowDeleting: xảy ra khi nhấn nút Delete, trước khi GridView xóa dòng ü RowEditing: xảy ra khi nhấn nút Edit, trước khi GridView chuyển sang chế độ edit ü RowUpadating: xảy ra khi nhấn nút Update, trước khi GridView cập nhật ü RowCanceling: xảy ra khi nhấn nút Cancel, trước khi GridView thoát khỏi chế độ edit ü SelectedIndexChanging: khi nhấn nút Select Minh họa a - Tek Ngành lập trình - CSDL 38
39. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Cập nhật dữ liệu: § Giai đọan 2: xử lý. Sử dụng các thuộc tính thường dùng sau: ü .EditIndex: chỉ số dòng được sửa ở trạng thái edit ü e.NewEditIndex: chỉ số của dòng đang sửa (sự kiện RowEditing) ü e.RowIndex: chỉ số của dòng hiện hành ü e.Rows[n1].Cells[n2].Controls[n3]: nhận điều khiển ü .DataKeys[n]: truy xuất giá trị khóa tại dòng có chỉ số là n Minh họa a - Tek Ngành lập trình - CSDL 39
40. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Điều khiển GridView • Các xử lý - Cập nhật dữ liệu: § Giai đọan 2: xử lý. Có các chức năng sau: ü Chọn dòng ü Sửa: chuyển GridView sang trạng thái edit ü Không: khôi phục dữ liệu ban đầu và trả về trạng thái ReadOnly ü Ghi: cập nhật dữ liệu vào CSDL và trả về trạng thái ReadOnly Minh họa a - Tek Ngành lập trình - CSDL 40
41. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Tổng quan 2. Các điều khiển Danh sách 3. Điều khiển GridView 4. Các điều khiển DataSource 5. Điều khiển DataList 6. DetailsView và FormView a - Tek Ngành lập trình - CSDL 41
42. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Các điều khiển DataSource • Giới thiệu • Các thuộc tính cơ bản • Sử dụng DataSource với GridView a - Tek Ngành lập trình - CSDL 42
43. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Giới thiệu - Là các điều khiển dùng để chứa nguồn dữ liệu được rút trích từ các loại CSDL (Access, Sql Serever, ) - Dùng để liên kết với các điều khiển Data-Bound và khi liên kết thì chúng sẽ hổ trợ các tính năng sau: • Hổ trợ phân trang • Hổ trợ sắp xếp tăng/giảm tự động • Cập nhật dữ liệu Tất cả các xử lý trên gần như không cần viết code a - Tek Ngành lập trình - CSDL 43
44. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Các điều khiển - AccessDataSource: kết nối đến tập tin CSDL Access - SqlDataSource : kết nối đến CSDL SQL Server, Oracle, - XmlDataSource : kết nối đến tập tin XML - ObjectDataSource : kết nối đến một object (class, ) hoặc Typed-DataSet đặt trong thư mục Bin | App_Code - SitemapDataSource : liên kết đến tập tin .sitemap Minh họa a - Tek Ngành lập trình - CSDL 44
45. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Các thuộc tính cơ bản - DataFile: tập tin CSDL Access (đường dẫn đầy đủ) - ConnectionString: chuỗi liên kết với các CSDL(SQL Server, Oracle, ) - SelectQuery: truy vấn chọn lựa - InsertQuery: truy vấn thêm mẫu tin - UpdateQuery: truy vấn cập nhật - DeleteQuery: truy vấn xóa Minh họa a - Tek Ngành lập trình - CSDL 45
46. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Điều khiển SqlDataSource - Thao tác cấu hình: • Chọn điều khiển, nhấn phím phải configure Data Source • Khai báo Connection • Chọn Data Source • Chọn Microsoft SQL Server • Khai báo Server name và CSDL • Cấu hình câu lệnh Select và phát sinh các câu lệnh cập nhật Kiểm tra và kết thúc • Minh họa a - Tek Ngành lập trình - CSDL 46
47. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Sử dụng SqlDataSource với GridView - Liên kết dữ liệu • Khai báo thuộc tính DataSourceID của GridView Minh họa a - Tek Ngành lập trình - CSDL 47
48. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Sử dụng SqlDataSource với GridView - Lọc dữ liệu • FilterExpression: biểu thức lọc, chỉ áp dụng khi thuộc tính DataSourceMode là DataSet • FilterParameters: các tham số tham gia trong thuộc tính FilterExpression • SelectCommandType (Text/StoredProcedure): kiểu tạo truy vấn chọn lựa (dùng câu lệnh SQL hay thủ tục nội) Minh họa a - Tek Ngành lập trình - CSDL 48
49. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Sử dụng SqlDataSource với GridView - Cập nhật dữ liệu • Hủy: viết câu lệnh truy vấn xóa có tham số tại thuộc tính DeleteQuery Ø Có thể bổ sung phần kiểm tra trước khi hủy trong sự kiện RowDeleting Minh họa a - Tek Ngành lập trình - CSDL 49
50. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Các điều khiển dữ liệu Các điều khiển DataSource • Sử dụng SqlDataSource với GridView - Cập nhật dữ liệu • Cập nhật: viết câu lệnh truy vấn cập nhật có tham số tại thuộc tính UpdateQuery Ø Có thể bổ sung phần kiểm tra dữ liệu trước khi cập nhật trong sự kiện RowUpdating Ø Sử dụng thuộc tính e.NewValues[“tên field”] để kiểm tra Minh họa a - Tek Ngành lập trình - CSDL 50
51. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Tổng quan 2. Các điều khiển Danh sách 3. Điều khiển GridView 4. Các điều khiển DataSource 5. Điều khiển DataList 6. DetailsView và FormView a - Tek Ngành lập trình - CSDL 51
52. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC DataList • Giới thiệu • Liên kết dữ liệu và định dạng • Cập nhật dữ liệu a - Tek Ngành lập trình - CSDL 52
53. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DataList • Giới thiệu Minh họa a - Tek Ngành lập trình - CSDL 53
54. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DataList • Giới thiệu - Dùng để hiển thị dữ liệu theo nhiều dạng - Thể hiện trên trình duyệt dưới dạng HTML Table - Đặc điểm: § Không hỗ trợ cơ chế sắp xếp dữ liệu, phân trang § Có thể cập nhật dữ liệu trực tiếp trên danh sách § Phải tự thiết kế hình thức a - Tek Ngành lập trình - CSDL 54
55. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DataList • Liên kết và định dạng - Thao tác liên kết dữ liệu: giống GridView - Thao tác thiết kế: giống như cột TemplateField của GridView - Định dạng: giống GridView • RepeatDirection(Horizontal/Vertical): hướng hiển thị dữ liệu • RepeatColumns: số cột hiển thị Minh họa a - Tek Ngành lập trình - CSDL 55
56. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DataList • Cập nhật dữ liệu § Yêu cầu đầu tiên: khai báo field dùng làm khóa cho danh sách .DataKeyField = “tên field”; § Bước 1: thiết kế, bổ sung các điều khiển trong thành phần EditItemTemplate Nên khai báo thuộc tính CommandName của các nút chức năng: Nút Edit CommandName = “Edit” Nút Update CommandName = “Update” Nút Cancel CommandName = “Cancel” Minh họa a - Tek Ngành lập trình - CSDL 56
57. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DataList • Cập nhật dữ liệu § Bước 2: xử lý, có các sự kiện ü EditCommand # RowEditing (GridView) ü UpdateComand # RowDeleting (GridView) ü ItemComand #RowCommand (GridView) Minh họa a - Tek Ngành lập trình - CSDL 57
58. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DataList • Cập nhật dữ liệu § Bước 2: xử lý, có các thuộc tính thường dùng ü .EditItemIndex: chỉ số dòng được sửa ở trạng thái edit ü e.Item.ItemIndex: chỉ số của dòng hiện hành ü e.Item.FindControl(“tên điều khiển”): tìm kiếm điều khiển trên dòng hiện hành ü .DataKeys[n]: truy xuất giá trị khóa tại dòng có chỉ số là n Minh họa a - Tek Ngành lập trình - CSDL 58
59. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Tổng quan 2. Các điều khiển Danh sách 3. Điều khiển GridView 4. Các điều khiển DataSource 5. Điều khiển DataList 6. DetailsView và FormView a - Tek Ngành lập trình - CSDL 59
60. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC DetailsView • Giới thiệu • Liên kết dữ liệu và định dạng • Các xử lý • Tạo dạng Master/Detail a - Tek Ngành lập trình - CSDL 60
61. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Giới thiệu a - Tek Ngành lập trình - CSDL 61
62. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Giới thiệu - Dùng hiển thị dữ liệu dạng cột (Columnar) - Thể hiện trên trình duyệt dưới dạng HTML Table - Đặc điểm: § Hỗ trợ cơ chế phân trang dữ liệu § Cho phép cập nhật dữ liệu trực tiếp § Cho phép kết hợp với GridView để tạo ra dạng Master-Detail a - Tek Ngành lập trình - CSDL 62
63. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Liên kết dữ liệu và định dạng - Thao tác liên kết dữ liệu: giống GridView - Thao tác định dạng Minh họa a - Tek Ngành lập trình - CSDL 63
64. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Các xử lý - Phân trang: giống GridView Minh họa a - Tek Ngành lập trình - CSDL 64
65. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Các xử lý - Cập nhật dữ liệu: • Khai báo các thuộc tính phát sinh các nút cập nhật: Ø AutoGenerateDeleteButton Ø AutoGenerateEditButton Ø AutoGenerateInsertButton a - Tek Ngành lập trình - CSDL 65
66. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Các xử lý - Cập nhật dữ liệu: • Phần xử lý thì giống GridView, chỉ khác nhau về tên sự kiện và một số thuộc tính Sự kiện trên GridView Sự kiện trên DetailView RowCommand ItemCommand RowInserting ItemInserting RowUpdating ItemUpdating RowDeleting ItemDeleting ModeChanging: khi chuyển sang một trạng thái khác(edit, insert, read-only) Minh họa a - Tek Ngành lập trình - CSDL 66
67. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Tạo dạng Master-Detail Minh họa a - Tek Ngành lập trình - CSDL 67
68. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls DetailsView • Tạo dạng Master-Detail - Bước 1: tạo SqlDataSource1 dùng làm nguồn cho GridView - Bước 2: tạo GridView dùng làm Master và kết nguồn vào (Nên tạo một nút lệnh xử lý chọn dòng) - Bước 3: tạo SqlDataSource2 dùng làm nguồn cho DetailsView + FilterParameters: giá trị của tham số là .SelectedValue + FilterExpression: biểu thức lọc tương ứng với tham số - Bước 4: tạo DetailsView dùng làm Detail và kết nguồn vào Minh họa a - Tek Ngành lập trình - CSDL 68
69. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC FormView • Giới thiệu • Liên kết dữ liệu và định dạng • Các xử lý a - Tek Ngành lập trình - CSDL 69
70. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls FormView • Giới thiệu - Tương tự DetailsView nhưng phải tự thiết kế dạng hiển thị - Thể hiện trên trình duyệt dưới dạng HTML Table - Đặc điểm: § Hỗ trợ cơ chế phân trang dữ liệu § Cho phép cập nhật dữ liệu trực tiếp • Liên kết, định dạng và các xử lý: - Giống DetailsView a - Tek Ngành lập trình - CSDL 70
71. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 4: Data-Bound Web Server Controls HẾT a - Tek Ngành lập trình - CSDL 71