›
›

Bài giảng Lập trình web ASP.Net với C# - Chương 5: Các điều khiển liên kết CSDL - Phạm Đào Minh Vũ

pdf 73 trang ngocly 3090
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web ASP.Net với C# - Chương 5: Các điều khiển liên kết CSDL - Phạm Đào Minh Vũ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_asp_net_voi_c_chuong_5_cac_dieu_khie.pdf

Nội dung text: Bài giảng Lập trình web ASP.Net với C# - Chương 5: Các điều khiển liên kết CSDL - Phạm Đào Minh Vũ

  1. LẬP TRÌNH WEB ASP.NET VỚI C# Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1
  2. Chương 5 Các Điều Khiển Liên Kết CSDL 5.1 Điều khiển kết nối cơ sở dữ liệu 5.2 Điều khiển liên kết cơ sở dữ liệu 161 Khoa CNTT Trường CĐ CNTT TP.HCM
  3. 5.1. Điều khiển kết nối CSDL–Data-Source Control  Là các điều khiển dùng để chứa nguồn dữ liệu được rút trích từ các hệ QT CSDL như: Access, SQLServer, XML, Ocracle . . .  Có các điều khiển Data-Source sau: SQLDataSource, Access Data Source, XML Data Source, . . . 162 Khoa CNTT Trường CĐ CNTT TP.HCM
  4. CSDL MẪU 163 Khoa CNTT Trường CĐ CNTT TP.HCM
  5. 5.1.1 Điều khiển SQLDataSource  Dùng để kết nối CSDL trong các hệ quản trị CSDL SQLServer, Ocracle Server, . . .  Chọn đối tượng CSDL như Table, View, Procedure hay câu lệnh SQL và khai báo điều kiện lọc (Where) với nhiều cách như: Giá trị định sẳn, đối tượng Session, Request.Form, Request.QueryString . . . Tạo kết nối Kéo điều khiển SQLDataSource từ Toolbox vào trang Chọn Configure Data Source 164 Khoa CNTT Trường CĐ CNTT TP.HCM
  6. Nếu trước đó đã tạo kết nối thì chọn kết nối đã có. Ngược lại để tạo mới kết nối thì chọn New Connection Tạo kết nối CSDL mới 165 © Dương Thành Phết-www.thayphet.net Khoa CNTT Trường CĐ CNTT TP.HCM
  7.  Chọn QTCSDL (Microsoft SQLServer)  Chọn Continue để tiếp tục 166 Khoa CNTT Trường CĐ CNTT TP.HCM
  8. Khai báo các thông số cho kết nối Chọn Hệ QT CSDL Chọn Tên Server Chọn thông tin đăng nhập Chọn tên CSDL Đồng ý kết nối Kiểm tra kết nối 167 Khoa CNTT Trường CĐ CNTT TP.HCM
  9. Đặt tên cho kết nối Tên kết nối 168 Khoa CNTT Trường CĐ CNTT TP.HCM
  10. Xác định nguồn dữ liệu từ Table, View hay câu lệnh SQL có thể chỉ định điều kiện lọc dữ liệu, sắp xếp hay các chỉ định vcho xử lý thêm, xoá, sửa Xác định nguồn dữ liệu Từ câu lệnh SQL hay Từ Table, View Xác định điều kiện Chỉ định sắp xếp Các lệnh thê, xoá, sửa 169 Khoa CNTT Trường CĐ CNTT TP.HCM
  11.  Chọn Test Query để kiểm tra kết quả nguồn dữ liệu.  Chọn Finish để hòan thành 170 Khoa CNTT Trường CĐ CNTT TP.HCM
  12. Điều khiển SQL DataSource và tham số Request.QueryString Để lọc dữ liệu theo điều kiện thì giá trị tham số có thể được gán trực tiếp thông qua đối tượng Request.Querystring (Truyền tham số qua liên kết) Khi click vào liên kết trang có địa chỉ kèm theo tham số dạng: 171 . . ./SachNXB.aspx?MaNXB=3 Khoa CNTT Trường CĐ CNTT TP.HCM
  13. Thực hiện: Tạo trang NhaXB.aspx là danh mục nhà xuất bản Chọn Edit Column từ GiridView Task 172 Khoa CNTT Trường CĐ CNTT TP.HCM
  14. 173 Khoa CNTT Trường CĐ CNTT TP.HCM
  15. Với các thuộc tính:  HeaderText: Nhãn tiêu đề cột  Text: Nhãn hiện thị trong tất cả các ô  DataTextField: Giá trị từ 1 field chỉ định trong nguồn DL  DataNavigateUrlFields: Danh mục tên các tham số ghi cách nhau bởi dấu “,”  DataNavigateUrlFormatting: Địa chỉ trang liên kết kèm tham số dạng: ~/SachNXB.aspx?MaNXB={0} Giá trị tham số ghi dưới dạng chỉ số các tham số được khai báo trong DataNavigateUrlFields bắt đầu là 0 và cách nhau dấu , 174 Khoa CNTT Trường CĐ CNTT TP.HCM
  16. Tạo trang hiện thị dữ liệu với nguồn dữ liệu có tham số qua liên kết (Request.QueryString). Xác định nguồn dữ liệu, sau đó chọn Where để chỉ định điều kiện 175 Khoa CNTT Trường CĐ CNTT TP.HCM
  17. Columns: Tên cột làm điều kiện Operator: Toán tử so sánh Source: Loại tham số (QueryString) QueryString field: Tên tham số đã truyền 176 Chọn Add để chấp nhận thêm tham số Khoa CNTT Trường CĐ CNTT TP.HCM
  18. Columns: Tên cột làm điều kiện Operator: Toán tử so sánh Source: Loại tham số (QueryString) QueryString field: Tên tham số đã truyền 177 Chọn Add để chấp nhận thêm tham số Khoa CNTT Trường CĐ CNTT TP.HCM
  19. Thi hành xem kết quả 178 Khoa CNTT Trường CĐ CNTT TP.HCM
  20. Điều khiển SQL DataSource và tham số Request.Form Để lọc dữ liệu trong nguồn dữ liệu theo điều kiện với giá trị tham số là giá trị trên form. Thực hiện: Tạo trang Lietkesach.aspx gồm: 1 Textbox thuộc tính ID: MaNXB 1 Button thuộc tính PostbackURL: ~/Lietkesach.aspx (Chính trang thiết kế) Tạo SqlDataSource với nguồn dữ liệu: 179 Khoa CNTT Trường CĐ CNTT TP.HCM
  21. Tạo SqlDataSource với nguồn dữ liệu như sau: 180 Khoa CNTT Trường CĐ CNTT TP.HCM
  22.  Columns: Tên cột làm điều kiện  Operator: Toán tử so sánh  Source: Loại tham số (Form)  Form field: Tên tham số đã truyền (Tên Textbox) 181  Chọn Add để chấp nhận thêm tham số Khoa CNTT Trường CĐ CNTT TP.HCM
  23. Điều khiển SQL DataSource và tham số là các Controls Có thể khai báo tham số trong điều khiển SqlDataSource mà giá trị được lấy từ điều khiển trình chủ. Ví dụ thiết kế trang SachtheoCD.aspx thực hiện liệt kê danh mục sách có chủ đề được chọn từ điều khiển DropdownList 182 Khoa CNTT Trường CĐ CNTT TP.HCM
  24. Thực hiện Thiết kế Dropdownlist (ddlChude) từ Table Chude Đặt thuộc tính ID: ddlChude DataSourceID: SqlDataSource1 DataTextField: TenCD (Field hiện thị) AutoPostBack: True DataValuefield: MaCD (Field để truyền tham số) 183 Khoa CNTT Trường CĐ CNTT TP.HCM
  25. GridView (GridView1) Với nguồn dữ liệu từ Table Sach Và tham số điều kiện (Where) 184 Khoa CNTT Trường CĐ CNTT TP.HCM
  26.  Columns: Tên cột làm điều kiện  Operator: Toán tử so sánh  Source: Loại tham số (Control)  ControlID: Tên tham số đã truyền 185  Chọn Add để chấp nhận thêm tham số Khoa CNTT Trường CĐ CNTT TP.HCM
  27. Điều khiển SQL DataSource và Procedure Ta có thể sử dụng điều khiển kết nối CSDL SqlDatasource để truy cập gọi Stored Procedure trong CSDL SQL Server. Ví dụ: Ta có Procedure Sachtheogia liệt kê các quyển sách với điều kiện Giá từ 2 tham số là Giatu và Giaden Create Proc Sachtheogia @Giatu int, @Giaden int as Select * From sach Where Dongia Between @Giatu and @Giaden 186 Khoa CNTT Trường CĐ CNTT TP.HCM
  28. Khi cấu hình cho điều khiển SQLDataSource Chọn loại nguồn dữ liệu là từ Procedure 187 Khoa CNTT Trường CĐ CNTT TP.HCM
  29. Chọn tên Procedure 188 Khoa CNTT Trường CĐ CNTT TP.HCM
  30. Xác định giá trị cho các tham số của Procedure 189 Khoa CNTT Trường CĐ CNTT TP.HCM
  31. 5.1.2 Điều khiển Access DataSource  Dùng để kết nối với cơ sở dữ liệu Access MDB).  Thực hiện Tạo AccessDataSource từ thanh Toolbox. Chọn Configure Data Source . . .: Để thực hiện kết nối 190 Khoa CNTT Trường CĐ CNTT TP.HCM
  32. Xác định nguồn dữ liệu và điều kiện tham số như SQLData Source 191 Khoa CNTT Trường CĐ CNTT TP.HCM
  33. 5.1.3 Điều khiển XMLDataSource  Điều khiển XMLDataSource được sử dụng để kết nối CSDL định dạng XML.  Thực hiện: Tạo tập tin XML (DSSinhvien). 192 Khoa CNTT Trường CĐ CNTT TP.HCM
  34. Tạo XMLDataSource từ Toolbox. Chọn Configure Data Source . . .: Để thực hiện kết nối 193 Khoa CNTT Trường CĐ CNTT TP.HCM
  35. Chọn tập tin XML.  Chọn OK để hoàn tất 194 Khoa CNTT Trường CĐ CNTT TP.HCM
  36. 5.2. Điều khiển liên kết cơ sở dữ liệu 5.2.1 Gridview 5.2.2 DataList 5.2.3 Repeater 5.2.4 Detailview & FormView 195 Khoa CNTT Trường CĐ CNTT TP.HCM
  37. 5.2.1 Gridview  Giới thiệu: GridView là một điều khiển khá linh hoạt và hiệu quả trong việc hiển thị, định dạng và thao tác với dữ liệu. Bên cạnh đó, chúng ta có thể thực hiện sắp xếp dữ liệu, thực hiện phân trang với sự hỗ trợ khá tốt của Visual .Net trong quá trình thiết kế. 196 Khoa CNTT Trường CĐ CNTT TP.HCM
  38.  Tạo GridView vào trang Kéo Control GridView vào trang 197 Khoa CNTT Trường CĐ CNTT TP.HCM
  39.  Định dạng tự động Chọn những mẫu định dạng có sẳn Gridview bằng cách Chọn Auto Format từ khung Gridview Task 198 Khoa CNTT Trường CĐ CNTT TP.HCM
  40.  Kết nối nguồn dữ liệu Thực hiện kết nối nguồn dữ liệu với cơ sở dữ liệu SQLServer, Access, XML. . Tại mục Choose Data Source: New Data Source (Hoặc chọn Datasource đã được tạo trước đó) Ghi chú: Tạo Datasource như được trình bày trước 199 Khoa CNTT Trường CĐ CNTT TP.HCM
  41. Thi hành xem kết quả: 200 Khoa CNTT Trường CĐ CNTT TP.HCM
  42. Thêm cột Trong cửa sổ Gridview Task chọn : Add New Column  Chọn Loại field : BoundField  Tiêu đề côt : Header Text  Tên field dữ liệu: DataField  Ok hòan thành 201 Khoa CNTT Trường CĐ CNTT TP.HCM
  43.  Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column 202 Khoa CNTT Trường CĐ CNTT TP.HCM
  44. AvailableFields: Chọn lọai Field liên kết dữ liệu BoundField: Cột dạng Textbox. Checkbox Field: Cột dạng Checkbox. Hyperlink Field: Cột dạng liên kết. Button Field: Cột dạng nút lệnh CommandField: Cột dạng nút lệnh được thiết kế sẵn Select: Nút lệnh chọn dòng dữ liệu Edit, Cancel, Update: Các nút cập nhật d.liệu Delete: Nút lệnh xóa dòng dữ liệu TemplateField: Cột do người dùng tự thiết kế. 203 Khoa CNTT Trường CĐ CNTT TP.HCM
  45. BoundColumn properties: Thông tin chi tiết cho các cột HeaderText, Footer Text: Tiêu đề trên/dưới của cột Header Image: Hình hiển thị trên tiêu đề cột. Sort Expression: Biểu thức sắp xếp của cột. Visible: Qui định cột có được hiển thị hay không. DataField: Qui định tên field dữ liệu cần hiển thị. Data formatting expression: Biểu thức định dạng {0: }. Vd: {0:000.00}, {0:0.##} {0:dd/MM/yyyy}, {0:hh/mm/ss tt} Convert this Field into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column. 204 Khoa CNTT Trường CĐ CNTT TP.HCM
  46.  Thiết lập các thuộc tính định dạng lưới Chọn GridView Properties - ShowHeader/ShowFooter: Hiện / Ẩn Phần đầu và chân của GridView 205 Khoa CNTT Trường CĐ CNTT TP.HCM
  47. - HeaderStyle/FooterStyle: Định dạng dòng Header/Footer 206 Khoa CNTT Trường CĐ CNTT TP.HCM
  48. - RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn: 207 Khoa CNTT Trường CĐ CNTT TP.HCM
  49. - AlowPaging : Phân trang - Page size: Qui định số dòng/trang - Possition: Qui định vị trí hiển thị của bộ nút di chuyển (top, bottom, top&bottom). - Mode: Qui định hình thức hiển thị của bộ nút di chuyển (kiểu số, kiểu ký hiệu). 208 Khoa CNTT Trường CĐ CNTT TP.HCM
  50. - AllowSorting: Sắp xếp (theo thuộc tính DataKeyNames 209 Khoa CNTT Trường CĐ CNTT TP.HCM
  51. 5.2.2 Điều khiển DataList  Giới thiệu: Như điều khiển Gridview, điều khiển DataList được sử dụng để hiển thị dữ liệu. Tuy nhiên, đối với DataList, chúng ta phải tự thiết kế hình thức hiển thị dữ liệu (giống như Template Column của GridView) 210 Khoa CNTT Trường CĐ CNTT TP.HCM
  52. Một số thuộc tính cần chú ý RepeatDirection: Qui định hướng hiển thị dữ liệu oHorizontal: Hiển thị dữ liệu theo chiều ngang oVertical: Hiển thị dữ liệu theo chiều đứng RepeatColumns: Qui định số cột hiển thị 211 Khoa CNTT Trường CĐ CNTT TP.HCM
  53. - Thiết kế hình thức hiển thị cho DataList cũng tương tự như thiết kế cho cột Template Column của GridView - Chọn Edit Template từ thực đơn ngữ cảnh để thực hiện thiết kế hình thức hiển thị cho DataList. 212 Khoa CNTT Trường CĐ CNTT TP.HCM
  54. Ghi chú: Để công việc thiết kế được dễ dàng, thực hiện thiết kế ở bên ngoài điều khiển DataList. Sử dụng Table để định vị trí các điều khiển. Sau khi thiết kế hoàn tất, kéo kết quả vào vị trí hiển thị trong DataList. 213 Khoa CNTT Trường CĐ CNTT TP.HCM
  55. Phân Trang Datalist với CollectionPager Datalist không hỗ trợ phân trang như Gridview, vì vậy cần phải tạo phân trang bằng tay. Công cụ CollectionPager là 1 control cho phép tạo phân trang mà không cần viết nhiều code. 214 Khoa CNTT Trường CĐ CNTT TP.HCM
  56. Thực hiện 1. Download file CollectionPager.dll, chép vào thư mục BIN của website 2. Đưa control này vào toolbox RightClick vào công cụ Standard của toolbox >chọn Choose Item 215 Khoa CNTT Trường CĐ CNTT TP.HCM
  57. Thực hiện 3. Browse đến tập tin CollectionPager.dll trong thư mục BIN của website, công cụ CollectionPager sẽ xuất hiện như hình Chọn Browse đên thư mục chon control này >bấm ok nhé 216 Khoa CNTT Trường CĐ CNTT TP.HCM
  58. Thực hiện 4. Kéo thả CollectionPager vào trang và tùy chỉnh thông số 5. Viết code trong sự kiện Page_Load của trang protected void Page_Load(object sender, EventArgs e) { //lấy dữ liệu từ SQLDatasource DataView dv = (DataView)SqlDataSource1.Select(DataSourceSelectArguments.Empty); CollectionPager1.DataSource = dv;//chỉ định datasource cho CollectionPager //Chỉ định đối tượng Datalist mà CollectionPager sẽ phân trang CollectionPager1.BindToControl = DataList1; //gán dữ liệu đã phân trang cho Datalist DataList1.DataSource = CollectionPager1.DataSourcePaged; } 217 Khoa CNTT Trường CĐ CNTT TP.HCM
  59.  CollectionPager không chỉ hoạt động trên Datalist mà còn hoạt động với các Điều khiển hiển thị dữ liệu khác như Repeater, hoặc bất kỳ đối tượng nào cần phân trang.  Ngoài việc sử dụng CollectionPager, việc phân trang còn có thể thực hiện bằng việc viết mã (sinh viên tự tìm hiểu thêm ) 218 Khoa CNTT Trường CĐ CNTT TP.HCM
  60. 5.2.3 Điều khiển Repeater Giới thiệu: Như DataList & DataGrid, điều khiển Repeater dùng để hiển thị dữ liệu. Tuy nhiên phải tự thiết kế hình thức hiển thị thông qua các tag HTML. 219 Khoa CNTT Trường CĐ CNTT TP.HCM
  61. Nội dung hiển thị cho tiêu đề Nội dung hiển thị cho các mục dữ liệu dòng lẻ. Nội dung hiển thị cho các mục dữ liệu chẳn. Nội dung hiển thị giữa các dòng dữ liệu Nội dung hiển thị cho tiêu đề dưới. : 220 Khoa CNTT Trường CĐ CNTT TP.HCM
  62. Ví dụ: Bước 1: Tạo mới điều khiển Repeater: rptChudesach vào trang Web Bước 2: Kết nối và tạo nguồn dữ liệu cho điều khiển từ Table Chude với các cột: MaCD, Tenchude Bước 3:. Chuyển trang Web qua dạng code HTM bổ sung các tag sau: 221 Khoa CNTT Trường CĐ CNTT TP.HCM
  63. Mã CĐ Tên CĐ 222 Khoa CNTT Trường CĐ CNTT TP.HCM
  64. 5.2.4 Detailview & FormView Giới thiệu: Hai điều khiển này cho phép làm việc với một trường dữ liệu đơn tại mỗi thời điểm. Thực hiện được chức năng xem, thay đổi, thêm mới hay xoá, di chuyển sang trang tiếp theo hay quay lại trang trước. 223 Khoa CNTT Trường CĐ CNTT TP.HCM
  65. Detailview Hiển thị dữ liệu với DetailView DetailView được đưa ra hiển thị như 1 bảng( )trong HTML để hiển thị dữ liệu 1 bản ghi. Ví dụ: Trang XemthongtinKH.aspx 224 Khoa CNTT Trường CĐ CNTT TP.HCM
  66. Sử dụng Fields với điều khiển DetailView DetailView hỗ trợ tất cả các Field như GridView : BoundField,CheckBoxField,CommandField,ButtonField, HyperLinkField, ImageField, TemplateField 225 Khoa CNTT Trường CĐ CNTT TP.HCM
  67. Xử lý phân trang với điều khiển DetailView Để tạo phân trang chỉ định thuộc tính AllowPaging=”true” cho điều khiển DetailView. Với các thuộc tính định dạng thuộc nhóm: Pagersettings 226 Khoa CNTT Trường CĐ CNTT TP.HCM
  68. Minh họa: Trong ví dụ liên kết dữ liệu với Table Khachhang đưa vào 5 BoundField và một CheckBoxField, điền dữ liệu vào với thuộc tính DataField và thiết đặt tiêu dề (HeaderText). Tạo phân trang và trình bày tại góc trên bên phải. 227 Khoa CNTT Trường CĐ CNTT TP.HCM
  69. Formview Hiển thị dữ liệu với FormView FormView dùng để hiển thị dữ liệu với các điều khiển tùy biến cho dữ liệu một bản ghi. Ví dụ: Trang XemthongtinNXB.aspx 228 Khoa CNTT Trường CĐ CNTT TP.HCM
  70. Trình bày dữ liệu sử dụng Edit Template Tạo FormView vào trang và liên kết dữ liệu Tại cửa sổ thiết kế chọn Edit Tempalte từ cửa sổ FormView Task 229 Khoa CNTT Trường CĐ CNTT TP.HCM
  71. Thiết kế trình bày với các Control điều khiển tương tự như khi thiết kế DataList với các điều khiển tùy biến 230 Khoa CNTT Trường CĐ CNTT TP.HCM
  72. Xử lý phân trang với điều khiển FormView Để tạo phân trang chỉ định thuộc tính AllowPaging=”true” cho điều khiển Form. Với các thuộc tính định dạng thuộc nhóm: Pagersettings 231 Khoa CNTT Trường CĐ CNTT TP.HCM
  73. Minh họa: Trong ví dụ liên kết dữ liệu với Table NhaXuatBan đưa vào 4 Label, điền dữ liệu vào với thuộc tính Text cho các File tương tứng, thiết đặt tiêu đề(HeaderText). Tạo phân trang và trình bày tại phía dưới giữa trang 232 Khoa CNTT Trường CĐ CNTT TP.HCM