Bài giảng Thiết kế & lập trình Website - Chương 5: Các điều khiển trong ASP.NET - Dương Thành Phết

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: 101 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Tạo SqlDataSource với nguồn dữ liệu như sau: 102 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  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) 103  Chọn Add để chấp nhận thêm tham số © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Đ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 104 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE 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ố) 105 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE GridView (GridView1) Với nguồn dữ liệu từ Table Sach Và tham số điều kiện (Where) 106 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE  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 107  Chọn Add để chấp nhận thêm tham số © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Đ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 108 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Khi cấu hình cho điều khiển SQLDataSource Chọn loại nguồn dữ liệu là từ Procedure 109 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Chọn tên Procedure 110 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.1 ĐIỀU KHIỂN SQLDATASOURCE Xác định giá trị cho các tham số của Procedure 111 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.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 112 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.2 ĐIỀU KHIỂN ACCESS DATASOURCE Xác định nguồn dữ liệu và điều kiện tham số như SQLData Source 113 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.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). <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"/> 114 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE Tạo XMLDataSource từ Toolbox. Chọn Configure Data Source . . .: Để thực hiện kết nối 115 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.1.3 ĐIỀU KHIỂN XMLDATASOURCE Chọn tập tin XML.  Chọn OK để hoàn tất 116 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2. ĐIỀU KHIỂN LIÊN KẾT CƠ SỞ DỮ LIỆU 7.2.1 Gridview 7.2.2 DataList 7.2.3 Repeater 7.2.4 Detailview & FormView 117 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.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. - Cho phép thực hiện sắp xếp dữ liệu, phân trang với sự hỗ trợ khá tốt của Visual .Net trong quá trình thiết kế. 118 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW  Tạo GridView vào trang Kéo Control GridView vào trang 119 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW  Đị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 120 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW  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 121 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW Thi hành xem kết quả: 122 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW 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 123 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW  Hiệu chỉnh các cột Trong cửa sổ Gridview Task chọn : Edit Column 124 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW 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ế. 125 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW 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. 126 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW  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 127 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW - HeaderStyle/FooterStyle: Định dạng dòng Header/Footer 128 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW - RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn: 129 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW - 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. 130 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.1 GRIDVIEW - AllowSorting: Sắp xếp 131 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.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) 132 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.2 ĐIỀU KHIỂN DATALIST 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ị 133 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.2 ĐIỀU KHIỂN DATALIST - 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. 134 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.2 ĐIỀU KHIỂN DATALIST 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. 135 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.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. 136 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.3 ĐIỀU KHIỂN REPEATER 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. : 137 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.3 ĐIỀU KHIỂN REPEATER 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: 138 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com Mã CĐ Tên CĐ 139 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.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. 140 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW  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 141 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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 142 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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 143 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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. 144 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW  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 145 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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 146 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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 147 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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 148 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 7.2.4 DETAILVIEW & FORMVIEW 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 149 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com KHOA CAO ĐẲNG THỰC HÀNH Chương 5: CÁC ĐIỀU KHIỂN TRONG ASP.NET THE END. 150 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com