Bài giảng ASP.Net - Chương 5: Các điều khiển liên kết cơ sở dữ liệu

1Chương 5 Các ðiều Khiển Liên Kết CSDL 1. ðiều khiển kết nối cơ sở dữ liệu 2. ðiều khiển liên kết dữ liệu by: Dương Thành Phết 21. ð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, . . . by: Dương Thành Phết 31.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 . . . by: Dương Thành Phết Tạo kết nối Kéo ñiều khiển SQLDataSource từ Tollbox vào trang Chọn Conigure Data Source  4 by: Dương Thành Phết 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 5 by: Dương Thành Phết
Chọn QTCSDL (Microsoft SQLServer)
Chọn Continue ñể tiếp tục 6 by: Dương Thành Phết Chọn Hệ QT CSDL Khai báo các thông số cho kết nối Chọn Tên Server Chọn thông tin ñăng nhập Chọn tên CSDL Kiểm tra kết nối ðồng ý kết nối 7 by: Dương Thành Phết ðặt tên cho kết nối Tên kết nối 8 by: Dương Thành Phết 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 9 by: Dương Thành Phết
Chọn Test Query ñể kiểm tra kết quả nguồn dữ liệu.
Chọn Finish ñể hòan thành 10 by: Dương Thành Phết ð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: . . ./SachNXB.aspx?MaNXB=3 11 by: Dương Thành Phết 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 12 by: Dương Thành Phết 13 by: Dương Thành Phết 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 ô
DatTextField: 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 , 14 by: Dương Thành Phết 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 15 by: Dương Thành Phết
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
Chọn Add ñể chấp nhận thêm tham số 16 by: Dương Thành Phết
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
Chọn Add ñể chấp nhận thêm tham số 17 by: Dương Thành Phết Thi hành xem kết quả 18 by: Dương Thành Phết ð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: 19 by: Dương Thành Phết Tạo SqlDataSource với nguồn dữ liệu như sau: 20 by: Dương Thành Phết
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)
Chọn Add ñể chấp nhận thêm tham số 21 by: Dương Thành Phết ð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 22 by: Dương Thành Phết 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ố 23 by: Dương Thành Phết GridView (GridView1) Với nguồn dữ liệu từ Table Sach Và tham số ñiều kiện (Where) 24 by: Dương Thành Phết
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
Chọn Add ñể chấp nhận thêm tham số 25 by: Dương Thành Phết ð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 26 by: Dương Thành Phết Khi cấu hình cho ñiều khiển SQLDataSource Chọn loại nguồn dữ liệu là từ Procedure 27 by: Dương Thành Phết Chọn tên Procedure 28 by: Dương Thành Phết Xác ñịnh giá trị cho các tham số của Procedure 29 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. by: Dương Thành Phết Chọn Configure Data Source . . .: ðể thực hiện kết nối 30 by: Dương Thành Phết Xác ñịnh nguồn dữ liệu và ñiều kiện tham số như SQLData Source 31 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). by: Dương Thành Phết <Sinhvien MaSV="SV01" HotenSV="Trần Văn Nam" Diachi="123 Trần Hưng ðạo, Q5" Email="nam@gmail.com" /> <Sinhvien MaSV="SV02" HotenSV="Nguyễn Thị Lý" Diachi="45 Hai Bà Trưng, Q1" Email="lythi@yahoo.com" /> <Sinhvien MaSV="SV03" HotenSV="Nguyễn Thị Bình" Diachi="31 Lý Thường Kiệt,TB" Email="kiet@gmail.com"/> 32 Tạo XMLDataSource từ Toolbox. by: Dương Thành Phết Chọn Configure Data Source . . .: ðể thực hiện kết nối 33
Chọn tập tin XML.
Chọn OK ñể hoàn tất by: Dương Thành Phết 34 2. ðiều khiển liên kết cơ sở dữ liệu 1. Gridview 2. DataList 3. Repeater 4. Detailview & FormView by: Dương Thành Phết 35 2.1 Gridview by: Dương Thành Phết
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ế. 36 by: Dương Thành Phết
Tạo GridView vào trang Kéo Control GridView vào trang 37 by: Dương Thành Phết
ðị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 38 by: Dương Thành Phết
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 39 by: Dương Thành Phết Thi hành xem kết quả: 40 by: Dương Thành Phết
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 41 by: Dương Thành Phết
Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column 42 by: Dương Thành Phết 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ế. 43 by: Dương Thành Phết Convert this Field into a Template Column: Chuyển cột hiện hành thành cột dạng Template Column. 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} 44 by: Dương Thành Phết
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 45 by: Dương Thành Phết - HeaderStyle/FooterStyle: ðịnh dạng dòng Header/Footer 46 by: Dương Thành Phết - RowStyleAlternatingRowStyle: ðịnh dạng dòng dữ liệu lẽ/chẵn: 47 by: Dương Thành Phết - 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. Mode: Qui ñịnh hình thức hiển thị của bộ nút di chuyển. 48 by: Dương Thành Phết - AllowSorting: Sắp xếp 49 2.2 ðiều khiển DataList by: Dương Thành Phết
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) 50 by: Dương Thành Phết 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ị 51 by: Dương Thành Phết - 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. 52 by: Dương Thành Phết 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. 53 2.3 ðiều khiển Repeater by: Dương Thành Phết 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. 54 by: Dương Thành Phết HeaderTemplate> 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. : 55 by: Dương Thành Phết 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: 56 by: Dương Thành Phết Mã Cð Tên Cð 57 2.4 Detailview & FormView by: Dương Thành Phết 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. 58 2.4.1 Detailview by: Dương Thành Phết 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 59 by: Dương Thành Phết 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 60 by: Dương Thành Phết 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 61 by: Dương Thành Phết 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. 62 2.4.1 Formview by: Dương Thành Phết 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 63 by: Dương Thành Phết 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 64 by: Dương Thành Phết 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 65 by: Dương Thành Phết 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 66 by: Dương Thành Phết 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