Bài giảng Lập trình Web ASP.Net C#: Chương 5 - Th.S Phạm Đào Minh Vũ (Mới nhất)

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

Chương 5 Các Điều Khiển Liên Kết CSDL

5.2 Điều khiển liên kết cơ sở dữ liệu

161

Khoa CNTT Trường CĐ CNTT TP.HCM

5.1 Điều khiển kết nối cơ sở dữ liệu

5.1. Điều khiển kết nối CSDL–Data-Source Control

162 162

Khoa CNTT Trường CĐ CNTT TP.HCM

 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, . . .

CSDL MẪU

163 163

Khoa CNTT Trường CĐ CNTT TP.HCM

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 . . .

Chọn Configure Data Source 

164 164

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

Tạo kết nối CSDL mới

165 165

Khoa CNTT Trường CĐ CNTT TP.HCM

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

 Chọn QTCSDL (Microsoft SQLServer)  Chọn Continue để tiếp tục

166 166

Khoa CNTT Trường CĐ CNTT TP.HCM

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 167

Khoa CNTT Trường CĐ CNTT TP.HCM

Khai báo các thông số cho kết nối

Tên kết nối

168 168

Khoa CNTT Trường CĐ CNTT TP.HCM

Đặt tên cho kết nối

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 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

170 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

Đ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ể tượng được gán 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: http://localhost:49222/ . . ./SachNXB.aspx?MaNXB=3

171 171

Khoa CNTT Trường CĐ CNTT TP.HCM

thông qua đối trực tiếp

172 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 173

Khoa CNTT Trường CĐ CNTT TP.HCM

Với các thuộc tính:

 HeaderText: Nhãn tiêu đề cột

 DataTextField: Giá trị từ 1 field chỉ định trong nguồn DL

 Text: Nhãn hiện thị trong tất cả các ô

 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}

174 174

Khoa CNTT Trường CĐ CNTT TP.HCM

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 ,

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).

175 175

Khoa CNTT Trường CĐ CNTT TP.HCM

Xác định nguồn dữ liệu, sau đó chọn Where để chỉ định điều kiện

176 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 177

Khoa CNTT Trường CĐ CNTT TP.HCM

178 178

Khoa CNTT Trường CĐ CNTT TP.HCM

Thi hành xem kết quả

Đ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:

Tạo SqlDataSource với nguồn dữ liệu:

179 179

Khoa CNTT Trường CĐ CNTT TP.HCM

~/Lietkesach.aspx (Chính trang thiết kế)

180 180

Khoa CNTT Trường CĐ CNTT TP.HCM

Tạo SqlDataSource với nguồn dữ liệu như sau:

181 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ố

Điều khiển SQL DataSource và tham số là các Controls

thể khai báo

182 182

Khoa CNTT Trường CĐ CNTT TP.HCM

Có trong điều khiển tham số 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

Thực hiện

Thiết kế Dropdownlist (ddlChude) từ Table Chude

Đặt thuộc tính

183 183

Khoa CNTT Trường CĐ CNTT TP.HCM

ID: ddlChude DataSourceID: SqlDataSource1 DataTextField: TenCD (Field hiện thị) AutoPostBack: True DataValuefield: MaCD (Field để truyền tham số)

GridView (GridView1) Với nguồn dữ liệu từ Table Sach

184 184

Khoa CNTT Trường CĐ CNTT TP.HCM

Và tham số điều kiện (Where)

 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ố

185 185

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

186 186

Khoa CNTT Trường CĐ CNTT TP.HCM

Select * From sach Where Dongia Between @Giatu and @Giaden

Khi cấu hình cho điều khiển SQLDataSource

187 187

Khoa CNTT Trường CĐ CNTT TP.HCM

Chọn loại nguồn dữ liệu là từ Procedure

188 188

Khoa CNTT Trường CĐ CNTT TP.HCM

Chọn tên Procedure

189 189

Khoa CNTT Trường CĐ CNTT TP.HCM

Xác định giá trị cho các tham số của Procedure

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.

190 190

Khoa CNTT Trường CĐ CNTT TP.HCM

Chọn Configure Data Source . . .: Để thực hiện kết nối

191 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

5.1.3 Điều khiển XMLDataSource

192 192

Khoa CNTT Trường CĐ CNTT TP.HCM

 Đ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).

Tạo XMLDataSource từ Toolbox.

193 193

Khoa CNTT Trường CĐ CNTT TP.HCM

Chọn Configure Data Source . . .: Để thực hiện kết nối

194 194

Khoa CNTT Trường CĐ CNTT TP.HCM

Chọn tập tin XML.  Chọn OK để hoàn tất

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 195

Khoa CNTT Trường CĐ CNTT TP.HCM

5.2.1 Gridview

196 196

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 197

Khoa CNTT Trường CĐ CNTT TP.HCM

 Tạo GridView vào trang Kéo Control GridView vào trang

Chọn những mẫu định dạng có sẳn Gridview

198 198

Khoa CNTT Trường CĐ CNTT TP.HCM

 Định dạng tự động bằng cách Chọn Auto Format từ khung Gridview Task

Thực hiện kết nối nguồn dữ liệu với cơ sở dữ liệu

Tại mục Choose Data Source: New Data Source

 Kết nối nguồn dữ liệu SQLServer, Access, XML. . (Hoặc chọn Datasource đã được tạo trước đó)

199 199

Khoa CNTT Trường CĐ CNTT TP.HCM

Ghi chú: Tạo Datasource như được trình bày trước

200 200

Khoa CNTT Trường CĐ CNTT TP.HCM

Thi hành xem kết quả:

Thêm cột Trong cửa sổ Gridview Task chọn : Add New Column

201 201

Khoa CNTT Trường CĐ CNTT TP.HCM

 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 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

BoundField: Cột dạng Textbox.

AvailableFields: Chọn lọai Field liên kết dữ liệu

Checkbox Field: Cột dạng Checkbox.

Button Field: Cột dạng nút lệnh

Hyperlink Field: Cột dạng liên kết.

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

203 203

Khoa CNTT Trường CĐ CNTT TP.HCM

TemplateField: Cột do người dùng tự thiết kế.

BoundColumn properties: Thông tin chi tiết cho các cột

Header Image: Hình hiển thị trên tiêu đề cột.

HeaderText, Footer Text: Tiêu đề trên/dưới của 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.##}

204 204

Khoa CNTT Trường CĐ CNTT TP.HCM

{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.

 Thiết lập các thuộc tính định dạng lưới Chọn GridView  Properties

205 205

Khoa CNTT Trường CĐ CNTT TP.HCM

- ShowHeader/ShowFooter: Hiện / Ẩn Phần đầu và chân của GridView

206 206

Khoa CNTT Trường CĐ CNTT TP.HCM

- HeaderStyle/FooterStyle: Định dạng dòng Header/Footer

207 207

Khoa CNTT Trường CĐ CNTT TP.HCM

- RowStyleAlternatingRowStyle: Định dạng dòng dữ liệu lẽ/chẵn:

- 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 208

Khoa CNTT Trường CĐ CNTT TP.HCM

- AlowPaging : Phân trang

209 209

Khoa CNTT Trường CĐ CNTT TP.HCM

- AllowSorting: Sắp xếp (theo thuộc tính DataKeyNames

5.2.2 Điều khiển DataList

210 210

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)

Một số thuộc tính cần chú ý

oHorizontal: Hiển thị dữ liệu theo chiều ngang

RepeatDirection: Qui định hướng hiển thị dữ liệu

oVertical: Hiển thị dữ liệu theo chiều đứng

211 211

Khoa CNTT Trường CĐ CNTT TP.HCM

RepeatColumns: Qui định số cột hiển thị

- 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

212 212

Khoa CNTT Trường CĐ CNTT TP.HCM

- 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 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.

Phân Trang Datalist với CollectionPager

trang bằng tạo phân

214 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 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.

Thực hiện

1. Download file CollectionPager.dll, chép vào thư mục BIN của website

215 215

Khoa CNTT Trường CĐ CNTT TP.HCM

2. Đưa control này vào toolbox RightClick vào công cụ Standard của toolbox--->chọn Choose Item

Thực hiện

Chọn Browse đên thư mục chon control này--->bấm ok nhé

216 216

Khoa CNTT Trường CĐ CNTT TP.HCM

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

Thực hiện

4. Kéo thả CollectionPager vào trang và tùy chỉnh thông số

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 217

Khoa CNTT Trường CĐ CNTT TP.HCM

5. Viết code trong sự kiện Page_Load của 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 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.

5.2.3 Điều khiển Repeater

219 219

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.

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 220

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

221 221

Khoa CNTT Trường CĐ CNTT TP.HCM

Bước 3:. Chuyển trang Web qua dạng code HTM bổ sung các tag sau:

Mã CĐ	Tên CĐ
<%# Eval("MaCd")%>	<%# Eval("Tenchude")%>
<%# Eval("MaCD")%>	<%# Eval("TenChude")%>

222 222

Khoa CNTT Trường CĐ CNTT TP.HCM

5.2.4 Detailview & FormView

223 223

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.

Detailview

DetailView được đưa ra hiển

224 224

Khoa CNTT Trường CĐ CNTT TP.HCM

Hiển thị dữ liệu với DetailView thị như 1 bảng(

)trong HTML để hiển thị dữ liệu 1 bản ghi. Ví dụ: Trang XemthongtinKH.aspx

225 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

Để trang chỉ định tạo phân thuộc

226 226

Khoa CNTT Trường CĐ CNTT TP.HCM

Xử lý phân trang với điều khiển DetailView 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 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.

Formview

228 228

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 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 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

Để trang chỉ định tạo phân thuộc

231 231

Khoa CNTT Trường CĐ CNTT TP.HCM

Xử lý phân trang với điều khiển FormView 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

liên kết dữ Trong ví dụ

232 232

Khoa CNTT Trường CĐ CNTT TP.HCM

Minh họa: 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