Lập trình web Asp.net với C# - Chương 5: Các điều khiển liên kết cơ sở dữ liệu

Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1 LẬP TRÌNH WEB ASP.NET VỚI C# 161 Chương 5 Các Điều Khiển Liên Kết CSDL Khoa CNTT Trường CĐ CNTT TP.HCM 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 162 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, . . . Khoa CNTT Trường CĐ CNTT TP.HCM 163 CSDL MẪU Khoa CNTT Trường CĐ CNTT TP.HCM 164 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 . . . Khoa CNTT Trường CĐ CNTT TP.HCM Tạo kết nối Kéo điều khiển SQLDataSource từ Toolbox vào trang Chọn Configure Data Source  165 Khoa CNTT Trường CĐ CNTT TP.HCM © Dương Thành Phết-www.thayphet.net 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 166 Khoa CNTT Trường CĐ CNTT TP.HCM  Chọn QTCSDL (Microsoft SQLServer)  Chọn Continue để tiếp tục 167 Khoa CNTT Trường CĐ CNTT TP.HCM 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 168 Khoa CNTT Trường CĐ CNTT TP.HCM Đặt tên cho kết nối Tên kết nối 169 Khoa CNTT Trường CĐ CNTT TP.HCM 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 170 Khoa CNTT Trường CĐ CNTT TP.HCM  Chọn Test Query để kiểm tra kết quả nguồn dữ liệu.  Chọn Finish để hòan thành 171 Khoa CNTT Trường CĐ CNTT TP.HCM Đ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 172 Khoa CNTT Trường CĐ CNTT TP.HCM 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 173 Khoa CNTT Trường CĐ CNTT TP.HCM 174 Khoa CNTT Trường CĐ CNTT TP.HCM 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 , 175 Khoa CNTT Trường CĐ CNTT TP.HCM 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 176 Khoa CNTT Trường CĐ CNTT TP.HCM 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ố 177 Khoa CNTT Trường CĐ CNTT TP.HCM 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ố 178 Khoa CNTT Trường CĐ CNTT TP.HCM Thi hành xem kết quả 179 Khoa CNTT Trường CĐ CNTT TP.HCM Đ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: 180 Khoa CNTT Trường CĐ CNTT TP.HCM Tạo SqlDataSource với nguồn dữ liệu như sau: 181 Khoa CNTT Trường CĐ CNTT TP.HCM  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ố 182 Khoa CNTT Trường CĐ CNTT TP.HCM Đ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 183 Khoa CNTT Trường CĐ CNTT TP.HCM 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ố) 184 Khoa CNTT Trường CĐ CNTT TP.HCM GridView (GridView1) Với nguồn dữ liệu từ Table Sach Và tham số điều kiện (Where) 185 Khoa CNTT Trường CĐ CNTT TP.HCM  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ố 186 Khoa CNTT Trường CĐ CNTT TP.HCM Đ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 187 Khoa CNTT Trường CĐ CNTT TP.HCM Khi cấu hình cho điều khiển SQLDataSource Chọn loại nguồn dữ liệu là từ Procedure 188 Khoa CNTT Trường CĐ CNTT TP.HCM Chọn tên Procedure 189 Khoa CNTT Trường CĐ CNTT TP.HCM Xác định giá trị cho các tham số của Procedure 190 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. Khoa CNTT Trường CĐ CNTT TP.HCM Chọn Configure Data Source . . .: Để thực hiện kết nối 191 Khoa CNTT Trường CĐ CNTT TP.HCM Xác định nguồn dữ liệu và điều kiện tham số như SQLData Source 192 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). Khoa CNTT Trường CĐ CNTT TP.HCM <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"/> 193 Tạo XMLDataSource từ Toolbox. Khoa CNTT Trường CĐ CNTT TP.HCM Chọn Configure Data Source . . .: Để thực hiện kết nối 194 Chọn tập tin XML.  Chọn OK để hoàn tất Khoa CNTT Trường CĐ CNTT TP.HCM 195 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 Khoa CNTT Trường CĐ CNTT TP.HCM 196 5.2.1 Gridview Khoa CNTT Trường CĐ CNTT TP.HCM  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ế. 197 Khoa CNTT Trường CĐ CNTT TP.HCM  Tạo GridView vào trang Kéo Control GridView vào trang 198 Khoa CNTT Trường CĐ CNTT TP.HCM  Đị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 199 Khoa CNTT Trường CĐ CNTT TP.HCM  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 200 Khoa CNTT Trường CĐ CNTT TP.HCM Thi hành xem kết quả: 201 Khoa CNTT Trường CĐ CNTT TP.HCM 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 202 Khoa CNTT Trường CĐ CNTT TP.HCM  Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column 203 Khoa CNTT Trường CĐ CNTT TP.HCM 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ế. 204 Khoa CNTT Trường CĐ CNTT TP.HCM 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} 205 Khoa CNTT Trường CĐ CNTT TP.HCM  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 206 Khoa CNTT Trường CĐ CNTT TP.HCM - HeaderStyle/FooterStyle: Định dạng dòng Header/Footer 207 Khoa CNTT Trường CĐ CNTT TP.HCM - RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn: 208 Khoa CNTT Trường CĐ CNTT TP.HCM - 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). 209 Khoa CNTT Trường CĐ CNTT TP.HCM - AllowSorting: Sắp xếp (theo thuộc tính DataKeyNames 210 5.2.2 Điều khiển DataList Khoa CNTT Trường CĐ CNTT TP.HCM  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) 211 Khoa CNTT Trường CĐ CNTT TP.HCM 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ị 212 Khoa CNTT Trường CĐ CNTT TP.HCM - 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. 213 Khoa CNTT Trường CĐ CNTT TP.HCM 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. 214 Khoa CNTT Trường CĐ CNTT TP.HCM 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. Phân Trang Datalist với CollectionPager 215 Khoa CNTT Trường CĐ CNTT TP.HCM 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 216 Khoa CNTT Trường CĐ CNTT TP.HCM 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é 217 Khoa CNTT Trường CĐ CNTT TP.HCM 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; } 218 Khoa CNTT Trường CĐ CNTT TP.HCM  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 ) 219 5.2.3 Điều khiển Repeater Khoa CNTT Trường CĐ CNTT TP.HCM 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. 220 Khoa CNTT Trường CĐ CNTT TP.HCM 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. : 221 Khoa CNTT Trường CĐ CNTT TP.HCM 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: 222 Khoa CNTT Trường CĐ CNTT TP.HCM Mã CĐ Tên CĐ 223 5.2.4 Detailview & FormView Khoa CNTT Trường CĐ CNTT TP.HCM 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. 224 Detailview Khoa CNTT Trường CĐ CNTT TP.HCM 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 225 Khoa CNTT Trường CĐ CNTT TP.HCM 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 226 Khoa CNTT Trường CĐ CNTT TP.HCM 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 227 Khoa CNTT Trường CĐ CNTT TP.HCM 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. 228 Formview Khoa CNTT Trường CĐ CNTT TP.HCM 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 229 Khoa CNTT Trường CĐ CNTT TP.HCM 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 230 Khoa CNTT Trường CĐ CNTT TP.HCM 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 231 Khoa CNTT Trường CĐ CNTT TP.HCM 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 232 Khoa CNTT Trường CĐ CNTT TP.HCM 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