Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bài 6:
Điều khiển DetailsView, FormView, ListView, DataPager
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 DetailsV...
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, Li...
Làm quen với lập trình CSDL ASP.NET 4
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 (đã ...
Đ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 ListVie...
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 ...
Làm quen với lập trình CSDL ASP.NET 8
Đ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...
Mã aspx của điều khiển GridView
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="Cate...
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 Se...
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ả
Col...
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
AlternatingRowStyl...
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...
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, ...
Ứ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
...
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 Gri...
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 da...
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 ...
Đị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,...
Mã aspx của điều khiển GridView
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="Cate...
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ôn...
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...
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...
Demo
Thêm một hàng dữ liệu
protected void btnAdd_Click(object sender, EventArgs e)
{
SqlDataSource1.InsertParameters["Cate...
Demo
Cập nhật một hàng dữ liệu
protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e)
{
if (e.Exce...
Demo
Xóa một hàng dữ liệu
protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e)
{
if (e.Exception...
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ườn...
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 để
c...
Làm quen với lập trình CSDL ASP.NET 30
Đ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
...
Đ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ể t...
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 ...
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...
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
...
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 Sel...
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 ...
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ở...
Đị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ụn...
Mã Aspx tự sinh của DetailsView
<asp:DetailsView ID="DetailsView2" runat="server" DataSourceID="SqlDataSource2"
Height="50...
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...
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...
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 ng...
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...
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...
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 ...
Nội dung demo. Định nghĩa TemplateField cho ứng dụng
ProductMaintDetailsView
Định nghĩa EditItemTemplate
Định nghĩa Insert...
Đ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
...
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 đã đư...
Đ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ụn...
Upcoming SlideShare
Loading in …5
×

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

13,691 views

Published on

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

  • DỊCH VỤ THIẾT KẾ THUYẾT TRÌNH (Thiết kế profile cho doanh nghiệp--- Thiết kế Brochure--- Thiết kế Catalogue--- slide bài giảng--- slide bài phát biểu---slide bài tốt nghiệp--- dạy học viên thiết kế thuyết trình…)-----(Giá từ 8.000 đ - 10.000 đ/1trang slide)------ Mọi chi tiết vui lòng liên hệ với chúng tôi: điện thoại 0973.764.894 hoặc zalo 0973.764.894 (Miss. Huyền) ----- • Thời gian hoàn thành: 1-2 ngày sau khi nhận đủ nội dung ----- Qui trình thực hiện: ----- 1. Bạn gửi nội dung cần thiết kế về địa chỉ email dvluanvan@gmail.com ----- 2. DỊCH VỤ THIẾT KẾ THUYẾT TRÌNH báo giá chi phí và thời gian thực hiện cho bạn ----- 3. Bạn chuyển tiền tạm ứng 50% chi phí để tiến hành thiết kế ----- 4. Gửi file slide demo cho bạn xem để thống nhất chỉnh sửa hoàn thành. ----- 5. Bạn chuyển tiền 50% còn lại. ----- 6. Bàn giao file gốc cho bạn.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. Bài 6: Điều khiển DetailsView, FormView, ListView, DataPager
  2. 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. 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. 4. Làm quen với lập trình CSDL ASP.NET 4
  5. 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. 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. 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. 8. Làm quen với lập trình CSDL ASP.NET 8
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Làm quen với lập trình CSDL ASP.NET 30
  31. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×