Ngôn ngữ ASP.NET - Điều khiển GridView
Điều khiển GridView
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 VS .Net trong quá trình thiết kế.
1. Tạo GridView vào trang
Kéo Control GridView vào trang
2. Định dạng tự động
Thực hiện chọn những mẫu định dạng có sẳn quy định về khung viền màu nên bằng cách Chọn Auto Format từ khung DataGrid Task
3 Kết nối nguồn dữ liệu
Thực hiện kết nối nguồn dữ liệu với cơ sở dữ liệu Access, SQLServer, . .
Trong cửa sổ DataGrid Task tại mục Choose Data Source chọn : New Data Source
Nếu trước đó đã có tạo kết nối CSDL thì chọn vào Combobox để chọn CSDL đã kết nối. Để tạo mới kết nối CSDL thì chọn New Connection
Khai báo các thông số cho SQLServer và chọn CSDL cần kết nối
Chọn Ok, Xác định nguồn dữ liệu từ Table, Query hay câu lệnh truy vấn có thể chỉ định điều kiện lọc dữ liệu và sắp xếp.
Click Next -> Test Query
4. Thêm cột
- Trong cửa sổ DataGrid Task chọn : Add New Column
- Chọn Loại field cần tạo : BoundField
- Khai báo tiêu đề côt : Header Text
- Chỉ định tên field dữ liệu: DataField
- Ok hòan thành
5. Hiệu chỉnh, Tạo mới các cột
- Trong cửa sổ DataGrid Task chọn : Edit Column
- AvailableFields: Chọn lọai Field liên kết dữ liệu
- BoundField: Cột có liên kết với nguồn dữ liệu dạng Textbox.
- Checkbox Field: Cột có liên kết với nguồn dữ liệu dạng Checkbox.
- Hyperlink Field: Cột có liên kết dữ liệu dạng liên kết.
- Button Field: Cột dạng nút lệnh
- CommandField: Cột dạng nút lệnh đã được thiết kế sẵn. Điều khiển GridView cung cấp cho chúng ta 3 loại cột dạng này:
- Select: Nút lệnh chọn dòng dữ liệu
- Edit, Cancel, Update: Các nút lệnh hỗ trợ chức năng cập nhật dữ liệu trực tiếp trên lưới.
- Delete: Nút lệnh xóa dòng dữ liệu
- Chúng ta sẽ có dịp tìm hiểu kỹ hơn về các nút lệnh này trong phần Cập nhật dữ liệu trực tiếp trên lưới.
- TemplateField: Cột do người dùng tự thiết kế. Đây là loại cột có khả năng làm việc khá linh họat.
Ví dụ bạn cần hiển thị danh sách khách hàng. Tại cột Phái, bạn muốn hiển thị dạng Nam/Nữ. Chúng ta sẽ tìm hiểu sâu hơn về Template Column ở phần sau. - BoundColumn properties: Qui định thông tin chi tiết cho các cột
- HeaderText, Footer Text: Thông tin tiêu đề trên/dưới của cột
- Header Image: Hình hiển thị trên tiêu đề cột (thay thế thông tin tiêu đề cột - Header Text).
- 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 hay tên thuộc tính của đối tượng dữ liệu cần hiển thị.
- Data formatting expression: Biểu thức định dạng dữ liệu.
- Mẫu định dạng: {0:<chuỗi định dạng>}. Ví dụ:
- + Định dạng số: {0:000.00}, {0:0.##}
- + Định dạng ngày giờ: {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.
6. Thiết lập các thuộc tính định dạng lưới
Để thực hiện các thao tác thiết lập các thuộc tính, chúng ta chọn GridView -> Properties.
- Hiện / Ẩn : Header / Footer - Phần đầu và chân của GridView
Show header: Qui định dòng tiêu đề trên có được phép hiển thị hay không. (mặc định là có hiển thị dòng tiêu đề)
Show footer: Qui định dòng tiêu đề dưới có được phép hiển thị hay không. (mặc định là không hiển thị dòng tiêu đề dưới)
- Định dạng dòng Header/Footer: HeaderStyle / FooterStyle
- Định dạng dòng dữ liệu lẽ/chẵn: RowStyleAlternatingRowStyle
7. Phân trang
Để thực hiện phân trang, cần đặt thuộc tính AllowPaging = True. Khi phân trang, có thể tùy biến hiển thị các trang (hiển thị dạng các số 1 2 3 hay mũi tên << >>) bằng cách đặt các thuộc tính con trong PagerSettings. Page size: Qui định số dòng của mỗi trang. Possition: Qui định vị trí hiển thị của bộ nút di chuyển. Ở phía trên thanh tiêu đề, ở phía dưới hay cả hai. Mode: Qui định hình thức hiển thị của bộ nút di chuyển. Hiển thị dạng số trang hay là các chuỗi ký tự đại diện (Next page/Previous page button text). Trong trường hợp hiển thị dạng số, Numeric buttons qui định số nút lệnh được hiển thị tối đa.
Đáp ứng với thao tác click nút chuyển trang gây ra sự kiện PageIndexChanging trên
GridView. Bắt buộc trong phương thức ủy thác phải có dòng lệnh GridView1.PageIndex= e.NewPageIndex;
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex= e.NewPageIndex;
}
8. Tính năng tự động sắp xếp
Tính năng này cho phép dữ liệu trong GridView sẽ tự động được sắp xếp theo giá trị của cột mà người dùng click. Ở đây ta có thể sắp xếp theo chiều tăng (Asscending) hoặc giảm (Descending).
Để bật tính năng này, cần đặt thuộc tính AllowSorting = true trong GridView. Khi người dùng click chuột vào một cột tiêu đề nào đó của GridView thì sự kiện Sorting sẽ được kích hoạt, tại đây ta cần phải chỉ rõ cho GridView biết là sắp theo cột nào (SortExpression ) và theo chiều tăng hay giảm (SortDirection).
Phương thức đáp ứng sự kiện Sorting:
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
bool sortAscending = (ViewState["SortAscending"]==null)?true:(bool)ViewState["SortAscending"];
if (sortAscending)
{
e.SortDirection = SortDirection.Ascending;
sortAscending = false;
}
else
{
e.SortDirection = SortDirection.Descending;
sortAscending = true;
}
// do something
ViewState["SortAscending"]= sortAscending;
}
9. Tạo và xử lý các cột Select, Edit, Delete, Update…
Để thực hiện việc thêm các nút [Select] [Edit] [Delete] trong GridView, khi tạo điều khiển dữ liệu SqlDataSource phải chọn mục Advanced…
và click chọn mục [X] Generate INSERT, UPDATE and DELETE statements. Click OK để xác nhận.
9.1. Thêm cột Select.
GridView không chỉ hiển thị được các bảng dữ liệu mà còn hỗ trợ rất tốt trong việc chỉnh sửa và xóa dữ liệu. Đặc biệt khi nguồn dữ liệu là SqlDataSource thì việc sửa và xóa hoàn toàn tự động, không cần phải viết bất kỳ dòng code nào. Để bật tính năng này, cần bổ sung thêm thuộc tính vào GridView với giá trị là true cho AutoGenerateSelectColum, AutoGenerateEditColum, AutoGenerateDeleteColum
Từ Gridview chọn mục Enable Selection.
Kết quả thực hiện: Khi click nút [Select] tại một dòng trên GridView, dòng được chọn chuyển sang màu khác.
9.2. Cập nhật dữ liệu
Từ Gridview chọn mục Enable Editing.
Kết quả thực thi : Click nút [Edit] trên một dòng của GridView, sẽ cho phép bạn cập nhật thông tin cca1c vùng thuộc tính (ngoại trừ thuộc tính khóa). Click [Update] để cập nhật, [Cancel] để hủy thao tác.
9.3. Xóa dữ liệu
Quay lại thí dụ trên và thiết kế lại giao diện trang , click smart tag và click chọn mục [x] Enable Deleting. Xuất hiện thêm nút [Delete].
Kết quả thực thi : Click nút [Delete] tại một dòng trên GridView, mẫu tin tại dòng sẽ bị xóa.
10. Đổi nhãn các cột Select, Edit, Delete, Update…
Từ giao diện GridView chọn Edit Column
-> Chọn CommandField -> thay đổi các text như hình trên