Tài liệu trình bày các điều khiển hiển thị dữ liệu trong ASP.NET như GridView, DetailsView, FormView, ListView và DataPager. Nó giải thích cách sử dụng, tính năng của từng loại điều khiển, bao gồm khả năng cập nhật và phân trang dữ liệu. Hướng dẫn cũng bao gồm mã ví dụ và cấu hình để giúp người học làm quen với lập trình CSDL ASP.NET.

1. Bài 6:
Điều khiển DetailsView, FormView, ListView, DataPager

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ũ
Điều khiển DetailsView, FormView, ListView, DataPager 2

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
Điều khiển DetailsView, FormView, ListView, DataPager 3
2. Điều khiển GridView
3. Điều khiển DetailsView

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

5. Các điều khiển hiển thị dữ liệu dưới dạng danh sách các
mẫu tin
Điều khiển hiển thị dữ liệu
Điều khiển Mô tả
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.
Điều khiển DetailsView, FormView, ListView, DataPager 5
- 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ị

6. Điều khiển hiển thị dữ liệu
Điều khiển GridView
Điều khiển DetailsView, FormView, ListView, DataPager 6
Đ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

7. Các điều khiển hiển thị một hàng dữ liệu đơn từ
datasoure
Điều khiển hiển thị dữ liệu
Đ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.
Điều khiển DetailsView, FormView, ListView, DataPager 7
- 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ử
dụng Template và biểu thức buộc để hiển thị dữ liệu

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

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
Làm quen với lập trình CSDL ASP.NET 9
Một ví dụ về điều khiển GridView

10. Mã aspx của điều khiển GridView
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ForeColor="Black"
onrowdeleted="GridView1_RowDeleted"
onrowupdated="GridView1_RowUpdated">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="ID"
ReadOnly="True" >
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle Width="100px" />
</asp:BoundField>
<%-- Đoạn mã của các trường khác được viết ở đây--%>
<asp:CommandField ButtonType="Button" CausesValidation="False"
ShowDeleteButton="True" />
</Columns>
<HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" />
<AlternatingRowStyle BackColor="LightGray" ForeColor="Black" />
<EditRowStyle BackColor="#F46D11" ForeColor="White" />
</asp:GridView>
Các thuộc tính
của GridView
Làm quen với lập trình CSDL ASP.NET 10
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ForeColor="Black"
onrowdeleted="GridView1_RowDeleted"
onrowupdated="GridView1_RowUpdated">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="ID"
ReadOnly="True" >
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle Width="100px" />
</asp:BoundField>
<%-- Đoạn mã của các trường khác được viết ở đây--%>
<asp:CommandField ButtonType="Button" CausesValidation="False"
ShowDeleteButton="True" />
</Columns>
<HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" />
<AlternatingRowStyle BackColor="LightGray" ForeColor="Black" />
<EditRowStyle BackColor="#F46D11" ForeColor="White" />
</asp:GridView>
Các phần tử
định nghĩa các
trường dữ liệu
Các phần tử
định nghĩa style
cho GridView

11. Các thuộc tính cơ bản của điều khiển GridView
Thuộc tính
Thuộc tính Mô tả
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
Điều khiển DetailsView, FormView, ListView, DataPager 11
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

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
Phần tử Mô tả
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
Điều khiển DetailsView, FormView, ListView, DataPager 12
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

13. Các phần tử định nghĩa style
Phần tử định nghĩa style
Phần tử Mô tả
RowStyle Style của các hàng dữ liệu
AlternatingRowStyle Style của các hàng dữ liệu chẵn
Điều khiển DetailsView, FormView, ListView, DataPager 13
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

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
các trường
Add New Column: Thêm một cột
mới
Menu thông minh
(Smart tag menu )
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
các trường
Add New Column: Thêm một cột
mới
Điều khiển DetailsView, FormView, ListView, DataPager 14

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
Điều khiển DetailsView, FormView, ListView, DataPager 15

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
phân loại sản phẩm
Các text box và button Add New
Category
Làm quen với lập trình CSDL ASP.NET 16

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.
Điều khiển DetailsView, FormView, ListView, DataPager 17

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.
Demo
Hiển thị dữ liệu trên GridView
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.
Làm quen với lập trình CSDL ASP.NET 18

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
Demo
Hiển thị dữ liệu trên 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
Làm quen với lập trình CSDL ASP.NET 19
- 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 thêm
vào GridView
Thuộc tính Mô tả
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ữ
liệu
Các thuộc tính thường dùng của trường
dữ liệu.
Sinh viên tham khảo thêm các thuộc tính
khác trong SGK

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…
Demo
Hiển thị dữ liệu trên GridView
Điều khiển DetailsView, FormView, ListView, DataPager 20

21. Mã aspx của điều khiển GridView
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ForeColor="Black"
onrowdeleted="GridView1_RowDeleted"
onrowupdated="GridView1_RowUpdated">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="ID"
ReadOnly="True" >
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle Width="100px" />
</asp:BoundField>
<%-- Đoạn mã của các trường khác được viết ở đây--%>
<asp:CommandField ButtonType="Button" CausesValidation="False"
ShowDeleteButton="True" />
</Columns>
<HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" />
<AlternatingRowStyle BackColor="LightGray" ForeColor="Black" />
<EditRowStyle BackColor="#F46D11" ForeColor="White" />
</asp:GridView>
Các thuộc tính
của GridView
Làm quen với lập trình CSDL ASP.NET 21
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="CategoryID"
DataSourceID="SqlDataSource1" ForeColor="Black"
onrowdeleted="GridView1_RowDeleted"
onrowupdated="GridView1_RowUpdated">
<Columns>
<asp:BoundField DataField="CategoryID" HeaderText="ID"
ReadOnly="True" >
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle Width="100px" />
</asp:BoundField>
<%-- Đoạn mã của các trường khác được viết ở đây--%>
<asp:CommandField ButtonType="Button" CausesValidation="False"
ShowDeleteButton="True" />
</Columns>
<HeaderStyle BackColor="Gray" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="White" ForeColor="Black" />
<AlternatingRowStyle BackColor="LightGray" ForeColor="Black" />
<EditRowStyle BackColor="#F46D11" ForeColor="White" />
</asp:GridView>
Các phần tử
định nghĩa các
trường dữ liệu
Các phần tử
định nghĩa style
cho GridView

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ự
kiện RowUpdated, RowDeleted
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ự
kiện RowUpdated, RowDeleted
Làm quen với lập trình CSDL ASP.NET 22

23. Chọn Configure DataSource trong smart tag menu
Cấu hình câu lệnh Update,
Insert, Delete cho DataSource
Làm quen với lập trình CSDL ASP.NET 23
- Chọn check box này
- Câu lệnh Update, Insert,
Delete được tự sinh

24. Vì điều khiển GridView
không hỗ trợ thao tác thêm
dữ liệu vào CSDL
Để cung cấp tính năng này,
lập trình viên phải
Thêm các điều khiển cho
phép người dùng nhập dữ
liệu
Sử dụng phương thức
Insert của điều khiển
sqlDataSource để chèn
một hàng vào CSDL
Demo
thêm một hàng dữ liệu
Vì điều khiển GridView
không hỗ trợ thao tác thêm
dữ liệu vào CSDL
Để cung cấp tính năng này,
lập trình viên phải
Thêm các điều khiển cho
phép người dùng nhập dữ
liệu
Sử dụng phương thức
Insert của điều khiển
sqlDataSource để chèn
một hàng vào CSDL
Làm quen với lập trình CSDL ASP.NET 24
- Các điều khiển cho phép người dùng nhập dữ liệu

25. Demo
Thêm một hàng dữ liệu
protected void btnAdd_Click(object sender, EventArgs e)
{
SqlDataSource1.InsertParameters["CategoryID"].DefaultValue
= txtID.Text;
SqlDataSource1.InsertParameters["ShortName"].DefaultValue
= txtShortName.Text;
SqlDataSource1.InsertParameters["LongName"].DefaultValue
= txtLongName.Text;
try
{
SqlDataSource1.Insert();
txtID.Text = "";
txtShortName.Text = "";
txtLongName.Text = "";
}
catch (Exception ex)
{
lblError.Text = "A database error has occurred.<br /><br />" +
"Message: " + ex.Message;
}
}
Phương thức xử lý sự kiện btnAdd_Click thực hiện thao tác
chèn dữ liệu vào CSDL
Làm quen với lập trình CSDL ASP.NET 25
protected void btnAdd_Click(object sender, EventArgs e)
{
SqlDataSource1.InsertParameters["CategoryID"].DefaultValue
= txtID.Text;
SqlDataSource1.InsertParameters["ShortName"].DefaultValue
= txtShortName.Text;
SqlDataSource1.InsertParameters["LongName"].DefaultValue
= txtLongName.Text;
try
{
SqlDataSource1.Insert();
txtID.Text = "";
txtShortName.Text = "";
txtLongName.Text = "";
}
catch (Exception ex)
{
lblError.Text = "A database error has occurred.<br /><br />" +
"Message: " + ex.Message;
}
}
Thiết lập giá trị các tham số của điều khiển
SqlDataSource
Thực thi câu lệnh chèn dữ liệu vào CSDL

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.";
}
}
Làm quen với lập trình CSDL ASP.NET 26
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.";
}
}

27. Demo
Xóa một hàng dữ liệu
protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e)
{
if (e.Exception != null)
{
lblError.Text = "A database error has occurred.<br /><br />" +
"Message: " + e.Exception.Message;
e.ExceptionHandled = true;
}
else if (e.AffectedRows == 0)
{
lblError.Text = "Another user may have updated that category." +
"<br />Please try again.";
}
}
Làm quen với lập trình CSDL ASP.NET 27
protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e)
{
if (e.Exception != null)
{
lblError.Text = "A database error has occurred.<br /><br />" +
"Message: " + e.Exception.Message;
e.ExceptionHandled = true;
}
else if (e.AffectedRows == 0)
{
lblError.Text = "Another user may have updated that category." +
"<br />Please try again.";
}
}

28. TemplateField cung cấp nhiều tính năng kiểm soát hiển
thị 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)
Sử dụng Template, lập trình viên có thể
Cấu hình cho các trường là các điều khiển web server khác
như: drop-down list, list box….
Thêm các điều khiển ràng buộc cho các trường.
Sử dụng Template
TemplateField cung cấp nhiều tính năng kiểm soát hiển
thị 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)
Sử dụng Template, lập trình viên có thể
Cấu hình cho các trường là các điều khiển web server khác
như: drop-down list, list box….
Thêm các điều khiển ràng buộc cho các trường.
Điều khiển DetailsView, FormView, ListView, DataPager 28
Label
Textbox

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
Demo
Sử dụng Template Field
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
Điều khiển DetailsView, FormView, ListView, DataPager 29

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

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, FormView, ListView, DataPager 31
Điều khiển DetailsView hiển thị
thông tin chi tiết của một sản
phẩm

32. Điều khiển DetailsView
cung cấp ba chế độ
hiển thị
ReadOnly: Người dùng
chỉ có thể xem dữ liệu
Insert: Người dùng có
thể thao tác thêm mới
dữ liệu
Update: Người dùng có
thể thao tác cập nhật
dữ liệu
Lập trình viên có thể lập
trình cấu hình hiển thị
cho các chế độ này
Ba chế độ của DetailsView
Chế độ ReadOnly
Click vào Edit sẽ
chuyển sang chế
độ Update
Click vào New sẽ
chuyển sang chế
độ Insert
Điều khiển DetailsView
cung cấp ba chế độ
hiển thị
ReadOnly: Người dùng
chỉ có thể xem dữ liệu
Insert: Người dùng có
thể thao tác thêm mới
dữ liệu
Update: Người dùng có
thể thao tác cập nhật
dữ liệu
Lập trình viên có thể lập
trình cấu hình hiển thị
cho các chế độ này
Điều khiển DetailsView, FormView, ListView, DataPager 32
Chế độ Update Chế độ Insert

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
Điều khiển DetailsView, FormView, ListView, DataPager 33
Smart tag menu hỗ trợ cấu hình
DetailsView dễ dàng

34. Trang Maser/Details thường
dùng để trình bày thông tin
của hai bảng có quan hệ 1-
n
Điều khiển GridView thường
sử dụng kết hợp với điều
khiển danh sách & GridView
tạo thành trang
Master/Details
Trang Master/Details
Điều khiển GridView Điều khiển DetailsViewTrang Maser/Details thường
dùng để trình bày thông tin
của hai bảng có quan hệ 1-
n
Điều khiển GridView thường
sử dụng kết hợp với điều
khiển danh sách & GridView
tạo thành trang
Master/Details
Điều khiển DetailsView, FormView, ListView, DataPager 34
Điều khiển DetailsView hiển thị một hàng dữ liệu
đơn của một dataSource

35. Thuộc kiểu trang Master/Detail
Ứng dụng gồm
Một GridView hiển thị danh sách
các sản phẩm.
GridView chứa button Select cho
phép chọn từng sản phẩm trong
danh sách
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
Ứng dụng gồm
Một GridView hiển thị danh sách
các sản phẩm.
GridView chứa button Select cho
phép chọn từng sản phẩm trong
danh sách
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
Điều khiển DetailsView, FormView, ListView, DataPager 35
Ứng dụng ProductMaintDetailsView

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
Điều khiển DetailsView, FormView, ListView, DataPager 36

37. Nội dung demo
Hiển thị dữ liệu trên DetailsView
Tạo DetailsView. Cấu hình DataSource
Định nghĩa các trường
Kích hoạt tính năng phân trang
Định nghĩa các Style
Demo
tạo trang Master/Detail
Nội dung demo
Hiển thị dữ liệu trên DetailsView
Tạo DetailsView. Cấu hình DataSource
Định nghĩa các trường
Kích hoạt tính năng phân trang
Định nghĩa các Style
Điều khiển DetailsView, FormView, ListView, DataPager 37

38. Tạo DetailsView và cấu hình datasource
Kéo DetailsView từ Toolbox lên màn hình thiết kế. Gán giá
trị ID cho DetailsView
Mở smart tag menu. Tại mục Chose Data Source chọn
New Data Source để mở cửa sổ Data Configuration
Winzard
Cấu hình DataSource như các bước đã học
Demo
tạo trang Master/Detail
Tạo DetailsView và cấu hình datasource
Kéo DetailsView từ Toolbox lên màn hình thiết kế. Gán giá
trị ID cho DetailsView
Mở smart tag menu. Tại mục Chose Data Source chọn
New Data Source để mở cửa sổ Data Configuration
Winzard
Cấu hình DataSource như các bước đã học
Điều khiển DetailsView, FormView, ListView, DataPager 38
<asp:DetailsView ID="DetailsView2" runat="server"
DataSourceID="SqlDataSource2"
Height="50px" Width="125px">
</asp:DetailsView>

39. Định nghĩa các trường cho DetailsView
Tương tự như điều khiển GridView, để định nghĩa các
trường của DetailsView ta sử dụng cửa sổ Fields
Mở smart tag menu, chọn Edit Fields
Thêm các trường BoundField
Demo
tạo trang Master/Detail
Định nghĩa các trường cho DetailsView
Tương tự như điều khiển GridView, để định nghĩa các
trường của DetailsView ta sử dụng cửa sổ Fields
Mở smart tag menu, chọn Edit Fields
Thêm các trường BoundField
Điều khiển DetailsView, FormView, ListView, DataPager 39

40. Mã Aspx tự sinh của DetailsView
<asp:DetailsView ID="DetailsView2" runat="server" DataSourceID="SqlDataSource2"
Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="ProductID" HeaderText="ProductID"
ReadOnly="True"
SortExpression="ProductID" />
<asp:BoundField DataField="Name" HeaderText="Name"
SortExpression="Name" />
.
.
.
</Fields>
</asp:DetailsView>
Điều khiển DetailsView, FormView, ListView, DataPager 40
<asp:DetailsView ID="DetailsView2" runat="server" DataSourceID="SqlDataSource2"
Height="50px" Width="125px">
<Fields>
<asp:BoundField DataField="ProductID" HeaderText="ProductID"
ReadOnly="True"
SortExpression="ProductID" />
<asp:BoundField DataField="Name" HeaderText="Name"
SortExpression="Name" />
.
.
.
</Fields>
</asp:DetailsView>
Mỗi trường của DetailsView là phần tử con của phần tử
Fields
Sinh viên có thể tham khảo SGK để tìm hiểu các phần tử
con của phần tử Fields như
BoundField, ButtonField, CheckBoxField…

41. Ngoài mục đích hiển thị dữ liệu,
DetailsView còn sử dụng để sửa,
thêm mới và xóa dữ liệu từ
CSDL.
Các bước tạo DetailsView có thể
cập nhật CSDL
Thêm trường CommandField
Cấu hình câu lệnh Insert, Update,
Delete cho DataSource
Viết hàm xử lý sự kiện
Chèn và cập nhật
dữ liệu trên DetailsView
Ngoài mục đích hiển thị dữ liệu,
DetailsView còn sử dụng để sửa,
thêm mới và xóa dữ liệu từ
CSDL.
Các bước tạo DetailsView có thể
cập nhật CSDL
Thêm trường CommandField
Cấu hình câu lệnh Insert, Update,
Delete cho DataSource
Viết hàm xử lý sự kiện
Điều khiển DetailsView, FormView, ListView, DataPager 41

42. Thêm CommandField & cấu hình
Datasource
Để thêm trường CommandField cho
DetailsView
Mở smart tag menu chọn Add Field
Cấu hình câu lệnh Insert, Delete,
Update cho Datasource
Tương tự như điều khiển GridView
Demo
Chèn/cập nhật dữ liệu trên DetailsView
Thêm CommandField & cấu hình
Datasource
Để thêm trường CommandField cho
DetailsView
Mở smart tag menu chọn Add Field
Cấu hình câu lệnh Insert, Delete,
Update cho Datasource
Tương tự như điều khiển GridView
Điều khiển DetailsView, FormView, ListView, DataPager 42
-Chọn CommandField trong mục
Chose a field type
- Chọn kiểu button trong mục
Button type
-Chọn các button cần hiển thị
bằng cách tắt hoặc bật các
checkbox
<asp:CommandField ButtonType="Button"
ShowDeleteButton="True"
ShowEditButton="True"
ShowInsertButton="True" />

43. Viết hàm xử lý sự kiện
Tương tự điều khiển GridView, DetailViews cũng cung
cấp các sự kiện giúp lập trình viên kiểm tra ngoại lệ
và lỗi truy cập đồng thời cho CSDL.
Demo
Chèn/cập nhật dữ liệu trên DetailsView
protected void DetailsView1_ItemUpdated(
object sender, DetailsViewUpdatedEventArgs e)
{
if (e.Exception != null)
{
lblError.Text = "A database error has occurred. " +
"Message: " + e.Exception.Message;
e.ExceptionHandled = true;
e.KeepInEditMode = true;
}
else if (e.AffectedRows == 0)
lblError.Text = "Another user may have updated that product. " +
"Please try again.";
else
GridView1.DataBind();
}
Viết hàm xử lý sự kiện
Tương tự điều khiển GridView, DetailViews cũng cung
cấp các sự kiện giúp lập trình viên kiểm tra ngoại lệ
và lỗi truy cập đồng thời cho CSDL.
Điều khiển DetailsView, FormView, ListView, DataPager 43
protected void DetailsView1_ItemUpdated(
object sender, DetailsViewUpdatedEventArgs e)
{
if (e.Exception != null)
{
lblError.Text = "A database error has occurred. " +
"Message: " + e.Exception.Message;
e.ExceptionHandled = true;
e.KeepInEditMode = true;
}
else if (e.AffectedRows == 0)
lblError.Text = "Another user may have updated that product. " +
"Please try again.";
else
GridView1.DataBind();
}
Kiểm tra ngoại lệ
Kiểm tra lỗi truy cập đồng
thời
Gọi phương thức
DataBind để cập nhật dữ
liệu vừa sửa lên GridView
Phương thức xử lý sự kiện ItemUpdated của DetailsView

44. Mặc định các trường trong chế
độ Insert, Update hiển thị dưới
dạng textbox hoặc label (trường
khóa chính)
Lập trình viên có thể kiểm soát
hiển thị, thêm các điều khiển
vào các trường cho các chế độ này
sử dụng TemplateField
Để tạo TemplateField, sử dụng
hộp thoại Fields để chuyển các
trường BoundField thành
TemplateField
Sử dụng TemplateField
Giao diện Details ở chế độ Update với
các điều khiển Web Server
Mặc định các trường trong chế
độ Insert, Update hiển thị dưới
dạng textbox hoặc label (trường
khóa chính)
Lập trình viên có thể kiểm soát
hiển thị, thêm các điều khiển
vào các trường cho các chế độ này
sử dụng TemplateField
Để tạo TemplateField, sử dụng
hộp thoại Fields để chuyển các
trường BoundField thành
TemplateField
Điều khiển DetailsView, FormView, ListView, DataPager 44
Giao diện Details ở chế độ Update với
các điều khiển Web Server
Giao diện Details ở chế độ Insert với
các điều khiển Web Server

45. Chuyển trường BoundField
thành TemplateField
Mở smart tag menu, chọn
Edit Fields
Định nghĩa các trường
TemplateField
Tương tự DataList
Định nghĩa
TemplateField cho DetailsView
-Click vào tên trường
trong mục Selected
Fields
- Click vào Convert this
field into a
TemplateField
Chuyển trường BoundField
thành TemplateField
Mở smart tag menu, chọn
Edit Fields
Định nghĩa các trường
TemplateField
Tương tự DataList
Điều khiển DetailsView, FormView, ListView, DataPager 45
-Click vào tên trường
trong mục Selected
Fields
- Click vào Convert this
field into a
TemplateField

46. Các phần tử template của
DetailsView
Định nghĩa
TemplateField cho DetailsView
Phần tử Mô tả
ItemTemplate Template sử dụng cho một trường riêng lẻ
EditItemTemplate Template sử dụng cho các trường trong chế
độ Edit
Điều khiển DetailsView, FormView, ListView, DataPager 46
EditItemTemplate Template sử dụng cho các trường trong chế
độ Edit
InsertItemTemplate Template sử dụng cho các trường trong chế
độ Insert
HeaderTemplate Template sử dụng cho tiêu đề của các
trường

47. Nội dung demo. Định nghĩa TemplateField cho ứng dụng
ProductMaintDetailsView
Định nghĩa EditItemTemplate
Định nghĩa InsertItemTemplate
Demo
Định nghĩa TemplateField cho DetailsView
Nội dung demo. Định nghĩa TemplateField cho ứng dụng
ProductMaintDetailsView
Định nghĩa EditItemTemplate
Định nghĩa InsertItemTemplate
Điều khiển DetailsView, FormView, ListView, DataPager 47

48. Điều khiển ListView
Điều khiển FormView
Điều khiển DataPage
Các điều khiển tự học
Điều khiển ListView
Điều khiển FormView
Điều khiển DataPage
Điều khiển DetailsView, FormView, ListView, DataPager 48

49. Các điều khiển hiển thị dữ liệu
Điều khiển hiển thị dữ liệu dưới dạng danh sách
DataList: 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
dùng để thêm, sửa, xóa dữ liệu
GridView: Hiển thị dưới dạng bảng gồm dòng và cột, hỗ trợ
phân trang, sắp xếp, cập nhật dữ liệu, không hỗ trợ chèn dữ
liệu
ListView: Cơ bản giống GridView, nhưn 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ị
Tổng kết
Các điều khiển hiển thị dữ liệu
Điều khiển hiển thị dữ liệu dưới dạng danh sách
DataList: 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
dùng để thêm, sửa, xóa dữ liệu
GridView: Hiển thị dưới dạng bảng gồm dòng và cột, hỗ trợ
phân trang, sắp xếp, cập nhật dữ liệu, không hỗ trợ chèn dữ
liệu
ListView: Cơ bản giống GridView, nhưn 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ị
Điều khiển DetailsView, FormView, ListView, DataPager 49

50. Điều khiển hiển thị một hàng dữ liệu đơn từ datasource
DetailsView
FormView: 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.
Tổng kết
Điều khiển hiển thị một hàng dữ liệu đơn từ datasource
DetailsView
FormView: 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, FormView, ListView, DataPager 50