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,
73 trang |
Chia sẻ: thuychi16 | Lượt xem: 1165 | Lượt tải: 2
Bạn đang xem trước 20 trang tài liệu 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, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
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