bài 6 điều khiển detailsview, formview, listview, datapager

Các điều khiển hiển thị dữ liệu dưới dạng danh sách cácmẫu tinĐiều khiển hiển thị dữ liệu DataList đã học - Trình bày dữ liệu dưới dạng danh sách - Hiển thị theo các Template được định n

Trang 1

Bài 6:

Điều khiển DetailsView, FormView, ListView, DataPager

Trang 2

Các nội dung đã học trong bài trước

ADO.NET

Điều khiển Data Source

Điều khiển DataList

Hệ thống bài cũ

Trang 3

Mục tiêu bài học

1 Giới thiệu các điều khiển hiển thị dữ liệu

2 Điều khiển GridView

3 Điều khiển DetailsView

Trang 4

Làm quen với lập trình CSDL ASP.NET 4

Trang 5

Các điều khiển hiển thị dữ liệu dưới dạng danh sách cácmẫu tin

Điều khiển hiển thị dữ liệu

DataList (đã học) - Trình bày dữ liệu dưới dạng danh sách

- Hiển thị theo các Template được định nghĩa

- Không hỗ trợ phân trang, thường dùng để hiển thị dữ liệu,

ít khi dùng để cập nhật dữ liệu.

- Trình bày dữ liệu dưới dạng danh sách

- Hiển thị theo các Template được định nghĩa

- Không hỗ trợ phân trang, thường dùng để hiển thị dữ liệu,

ít khi dùng để cập nhật dữ liệu.

GridView -Trình bày dữ liệu dưới dạng bảng theo cột và hàng giống

bảng trong CSDL

- Hỗ trợ tính năng: Chọn, sắp xếp, cập nhật CSDL, phân trang.

- Không hỗ trợ thêm dữ liệu vào CSDL ListView - Chức năng cơ bản giống điều khiển GridView

- Khác: Cung cấp thêm tính năng chèn dữ liệu, hiển thị các phần tử của datasource theo nhóm, có thể tùy chỉnh định dạng hiển thị

Trang 6

Điều khiển GridView

Điều khiển ListView

Hỗ trợ tính năng chèn dữ liệu Không hỗ trợ tính năng chèn dữ liệu

Trang 7

Các điều khiển hiển thị một hàng dữ liệu đơn từ

datasoure

Điều khiển Mô tả

DetailsView - Hiển thị một hàng dữ liệu đơn từ datasource

- Hỗ trợ các tính năng thêm mới, cập nhật, phân trang FormView - Chức năng cơ bản giống DetailsView

- Khác: Hỗ trợ sử dụng CSS để định dạng hiển thị dữ liệu, chỉ sử dụng Template và biểu thức buộc để hiển thị dữ liệu.

- Chức năng cơ bản giống DetailsView

- Khác: Hỗ trợ sử dụng CSS để định dạng hiển thị dữ liệu, chỉ sử dụng Template và biểu thức buộc để hiển thị dữ liệu.

- Điều khiển DetailsView (trái) & FormView (phải)

- Khác nhau cơ bản: FormView hỗ trợ sử dụng CSS để định dạng hiển thị dữ liệu, chỉ sử

Trang 8

Trang 9

Điều khiển GridView hiển thị dữ liệu từ một nguồn dữ liệu (datasource) dưới dạng bảng.

Cung cấp nhiều tính năng mở rộng:

Tự động phân trang

Tự động sắp xếp dữ liệu

Cho phép cập nhật, xóa dữ liệu

Điều khiển GridView

Điều khiển GridView hiển thị dữ liệu từ một nguồn dữ liệu (datasource) dưới dạng bảng.

Cung cấp nhiều tính năng mở rộng:

Tự động phân trang

Tự động sắp xếp dữ liệu

Cho phép cập nhật, xóa dữ liệu

Một ví dụ về điều khiển GridView

Trang 10

Mã aspx của điều khiển GridView

<asp:GridView ID="GridView1" runat="server"

<% Đoạn mã của các trường khác được viết ở đây %>

<asp:CommandField ButtonType="Button" CausesValidation="False" ShowDeleteButton="True" />

</Columns>

</asp:GridView>

Các thuộc tính của GridView

</Columns>

Trang 11

Các thuộc tính cơ bản của điều khiển GridView

Thuộc tính

ID ID của điều khiển

RunAt Luôn được gán bằng Server

DataSourceID ID của DataSource liên kết với điều khiển

DataKeyNames Tên của trường khóa chính Nếu có nhiều cột,

các cột được phân tách bởi dấu phảy AutoGenerateColumns Nếu bằng True, các cột được tự động sinh

SelectedIndex Truy xuất hoặc gán giá trị chỉ số của dòng dữ

liệu được chọn trên GridView

Trang 12

ASP.NET sử dụng phần tử trường để định nghĩa các cột

của GridView

Các loại phần tử trường

Trường dữ liệu

Columns Các cột được hiển thị trên điều khiển GridView

Asp:BoundField Trường liên kết tới một cột của nguồn dữ liệu

Asp:ButtonField Trường hiển thị một button

ID, Short Name, Long Name

và hai button Edit, Delete là các trường dữ liệu

Asp:ButtonField Trường hiển thị một button

Asp:CheckBoxField Trường hiển thị một CheckBox

Asp:CommandField Trường chứa các button Select, Update, Delete hoặc Cancel

Asp:HyperlinkField Trường hiển thị một hyperlink

Asp:ImageField Trường hiển thị ảnh

Asp:TemplateField Cho phép tạo cột với nội dung tùy biến

Trang 13

Các phần tử định nghĩa style

Phần tử định nghĩa style

RowStyle Style của các hàng dữ liệu

AlternatingRowStyle Style của các hàng dữ liệu chẵn

SelectedRowStyle Style của hàng được chọn

EditRowStyle Style được dùng khi hàng trong chế độ sửa

EmptyDataRowStyle Style khi datasource rỗng

ItemStyle Style sử dụng cho các trường riêng lẻ

HeaderStyle Style sử dụng để định dạng header

FooterStyle Style định dạng Footer

PageStyle Style định dạng phân trang

Trang 14

Chose Data Source, Configure Data

Source, Refresh: Giống chức năng

của điều khiển DataList

Edit Columns: Thêm/bớt, chỉnh sửa

Chose Data Source, Configure Data

Source, Refresh: Giống chức năng

của điều khiển DataList

Edit Columns: Thêm/bớt, chỉnh sửa

Trang 15

Enable Paging: Kích hoạt tính năng

phân trang

Enable Sorting: Kích hoạt tính

năng tự động sắp xếp dữ liệu

Enable Editing, Enable Deleting,

Enable Selection: Thêm các button

edit, Delete, Select thuộc kiểu

trường command field

Edit Templates: Định nghĩa các

Template cho GridView

Smart tag menu

Enable Paging: Kích hoạt tính năng

phân trang

Enable Sorting: Kích hoạt tính

năng tự động sắp xếp dữ liệu

Enable Editing, Enable Deleting,

Enable Selection: Thêm các button

edit, Delete, Select thuộc kiểu

trường command field

Edit Templates: Định nghĩa các

Template cho GridView

Trang 16

Ứng dụng một trang đơn giản, hiển

thị danh sách phân loại sản phẩm

trong bảng Categories

Cho phép thêm, sửa, xóa một phân

loại sản phẩm trong CSDL

Ứng dụng gồm:

Một điều khiển GridView gồm

Ba cột hiển thị thông tin phân loại sản phẩm

Hai cột chứa button Edit và Delete

Các điều khiển nhập mới thông tin

phân loại sản phẩm

Các text box và button Add New Category

Giới thiệu ứng dụng CategoryMaint

Ứng dụng một trang đơn giản, hiển

thị danh sách phân loại sản phẩm

trong bảng Categories

Cho phép thêm, sửa, xóa một phân

loại sản phẩm trong CSDL

Ứng dụng gồm:

Một điều khiển GridView gồm

Ba cột hiển thị thông tin phân loại sản phẩm

Hai cột chứa button Edit và Delete

Các điều khiển nhập mới thông tin

Trang 17

Nội dung demo:

Liên kết GridView và DataSource

Thêm một điều khiển GridView Thêm và cấu hình DataSource cho điều khiển GridView

Thêm/bớt, tùy chỉnh định nghĩa các trường

Thêm hai button Edit & Delete cho ứng dụng

Định nghĩa Style

Định dạng hiển thị cho HeaderStyle, AlternatingRowStyle, ItemRowStyle, SelectedRowStyle.

Demo Hiển thị dữ liệu trên GridView

Nội dung demo:

Liên kết GridView và DataSource

Thêm một điều khiển GridView Thêm và cấu hình DataSource cho điều khiển GridView

Thêm/bớt, tùy chỉnh định nghĩa các trường

Thêm hai button Edit & Delete cho ứng dụng

Định nghĩa Style

Định dạng hiển thị cho HeaderStyle, AlternatingRowStyle, ItemRowStyle, SelectedRowStyle.

Trang 18

Liên kết GridView và DataSource

Kéo điều khiển GridView từ Toolbox vào màn hình thiết kế

Mở smart tag menu, Ở mục Chose data source chọn New

data Source và tiến hành các bước cấu hình DataSource như

đã học.

Mặc định sau khi cấu hình data source, GridView được tạo ra chứa tất cả các cột của datasource.

Liên kết GridView và DataSource

Kéo điều khiển GridView từ Toolbox vào màn hình thiết kế

Mở smart tag menu, Ở mục Chose data source chọn New

data Source và tiến hành các bước cấu hình DataSource như

Trang 19

Thêm bớt, tùy chỉnh định nghĩa các trường

Sử dụng hộp thoại Fields để định nghĩa các trường

Mở hộp thoại Fields

Vào smart tag menu Chọn Edit Columns Thêm trường CommandField Edit, Update, Cancel và Delete cho GridView

- Các trường có sẵn để thêm vào GridView

- Danh sách thuộc tính của trường được chọn ở mục Selected Field

- Các trường có sẵn để thêm vào GridView

- Danh sách thuộc tính của trường được chọn ở mục Selected Field

HeaderText Dòng tiêu đề của bảng

DataField Tên cột của nguồn dữ liệu bị

buộc vào trường này DataFormatString Chuỗi định dạng hiển thị dữ

Trang 20

Định nghĩa Style

Mở cửa sổ Properties của GridView

Mở rộng các mục style và chỉ định giá trị cho các thuộc tính BackColor, ForeColor…

Trang 21

Mã aspx của điều khiển GridView

</Columns>

Các thuộc tính của GridView

</Columns>

Trang 22

Một tính năng ấn tượng của điều khiển GridView là

cập nhật, xóa dữ liệu từ CSDL mà chỉ cần thêm rất

ít mã C#

GridView không hỗ trợ thao tác chèn

Các bước tạo GridView có thể cập nhật CSDL

Tạo các trường command field chứa các button Update,

Delete, Edit…

Cấu hình các câu lệnh Update, Delete, Insert cho

datasource

Kiểm soát lỗi thao tác CSDL bằng cách viết mã xử lý sự

Thêm/cập nhật/xóa dữ liệu

Một tính năng ấn tượng của điều khiển GridView là

cập nhật, xóa dữ liệu từ CSDL mà chỉ cần thêm rất

ít mã C#

GridView không hỗ trợ thao tác chèn

Các bước tạo GridView có thể cập nhật CSDL

Tạo các trường command field chứa các button Update,

Delete, Edit…

Cấu hình các câu lệnh Update, Delete, Insert cho

datasource

Kiểm soát lỗi thao tác CSDL bằng cách viết mã xử lý sự

Trang 23

Chọn Configure DataSource trong smart tag menu

Cấu hình câu lệnh Update, Insert, Delete cho DataSource

- Chọn check box này

- Câu lệnh Update, Insert, Delete được tự sinh

Trang 24

Vì điều khiển GridView

không hỗ trợ thao tác thêm

Vì điều khiển GridView

không hỗ trợ thao tác thêm

- Các điều khiển cho phép người dùng nhập dữ liệu

Trang 25

Demo Thêm một hàng dữ liệu

protected void btnAdd_Click(object sender, EventArgs e)

Trang 26

Demo Cập nhật một hàng dữ liệu

protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e) {

if (e.Exception != null) {

lblError.Text = "A database error has occurred.<br /><br />" +

"Message: " + e.Exception.Message;

e.ExceptionHandled = true;

e.KeepInEditMode = true;

} else if (e.AffectedRows == 0) {

lblError.Text = "Another user may have updated that category." +

"<br />Please try again.";

} }

protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e) {

e.KeepInEditMode = true;

} }

Trang 27

Demo Xóa một hàng dữ liệu

protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e) {

} }

protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e) {

} }

Trang 28

TemplateField cung cấp nhiều tính năng kiểm soát hiểnthị của các trường của GridView

Mặc định, ở chế độ Update, các trường của GridView hiển thị là text box hoặc Label (trường khóa chính CSDL)

Thêm các điều khiển ràng buộc cho các trường.

Label Textbox

Trang 29

Chuyển BoundField thành TemplateField

Sử dụng hộp thoại Fields

Nhấn chuột vào Convert this field into a templateField để chuyển trường Bound Field thành Template Field.

Định nghĩa, thêm các điều khiển cho các Template

Mở smart tag menu Chọn Edit Template.

Thao tác giống như Data List

Định nghĩa, thêm các điều khiển cho các Template

Mở smart tag menu Chọn Edit Template.

Thao tác giống như Data List

Trang 30

Trang 31

Điều khiển DetailsView được thiết kế để hiển thị một

hàng dữ liệu đơn của một datasource

Hỗ trợ các tính năng:

Phân trang

Cập nhật, thêm mới, xóa một hàng trong CSDL

Điều khiển DetailsView

Điều khiển DetailsView được thiết kế để hiển thị một

hàng dữ liệu đơn của một datasource

Hỗ trợ các tính năng:

Phân trang

Cập nhật, thêm mới, xóa một hàng trong CSDL

Điều khiển DetailsView hiển thị

Trang 32

Điều khiển DetailsView

Trang 33

Các mục thường dùng trong

smart tag menu

Chức năng tương tự như chức

năng tương ứng của

GridViews

Smart tag menu của điều khiển DetailsView

Các mục thường dùng trong

smart tag menu

Chức năng tương tự như chức

năng tương ứng của

GridViews

Smart tag menu hỗ trợ cấu hình DetailsView dễ dàng

Trang 34

Trang Maser/Details thường

dùng để trình bày thông tin

của hai bảng có quan hệ

Điều khiển GridView Điều khiển DetailsView

Trang Maser/Details thường

dùng để trình bày thông tin

của hai bảng có quan hệ

Điều khiểnDetailsViewhiển thịmột hàng dữ liệu đơncủa một dataSource

Trang 35

Thuộc kiểu trang Master/Detail

Một DetailsView hiển thị thông tin

chi tiết của sản phẩm được chọn

DetailsView cho phép thêm mới, cập nhật, xóa thông tin một sản phẩm

Giới thiệu ứng dụng ProductMaintDetailsView

Thuộc kiểu trang Master/Detail

Một DetailsView hiển thị thông tin

chi tiết của sản phẩm được chọn

DetailsView cho phép thêm mới, cập nhật, xóa thông tin một sản phẩm

Ứng dụng ProductMaintDetailsView

Trang 36

Nội dung demo:

Hiển thị dữ liệu trên GridView

Tạo GridView.

Cấu hình DataSource cho GridView.

Thêm trường CommandField Select cho GridView Chỉ định thuộc tính SelectedIndex = 0

Thực hiện tương tự như các bước đã học

Demo tạo trang Master/Detail

Nội dung demo:

Hiển thị dữ liệu trên GridView

Tạo GridView.

Cấu hình DataSource cho GridView.

Thêm trường CommandField Select cho GridView Chỉ định thuộc tính SelectedIndex = 0

Thực hiện tương tự như các bước đã học

Định dạng
Số trang	50
Dung lượng	2,91 MB