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

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

Các nội dung đã học trong bài trướcADO.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

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


2. Điều khiển GridView

3. Điều khiển DetailsView

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ácmẫ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.


- 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ốngbảng trong CSDL- Hỗ trợ tính năng: Chọn, sắp xếp, cập nhật CSDL, phântrang.- 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ácphần tử của datasource theo nhóm, có thể tùy chỉnh địnhdạng hiển thị


Đ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

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ửdụng Template và biểu thức buộc để hiển thị dữ liệu


Đ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 trangTự động sắp xếp dữ liệuCho 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 trangTự động sắp xếp dữ liệuCho phép cập nhật, xóa dữ liệu


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

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ínhcủa GridView







</Columns>


</asp:GridView>

Các phần tửđịnh nghĩa cáctrường dữ liệu

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

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


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

ASP.NET sử dụng phần tử trường để định nghĩa các cộtcủa GridViewCá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


ID, Short Name, Long Namevà 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

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

Chose Data Source, Configure DataSource, Refresh: Giống chức năngcủa điều khiển DataListEdit Columns: Thêm/bớt, chỉnh sửacác trườngAdd New Column: Thêm một cộtmới

Menu thông minh(Smart tag menu )

Chose Data Source, Configure DataSource, Refresh: Giống chức năngcủa điều khiển DataListEdit Columns: Thêm/bớt, chỉnh sửacác trườngAdd New Column: Thêm một cộtmới


Enable Paging: Kích hoạt tính năngphân trangEnable Sorting: Kích hoạt tínhnăng tự động sắp xếp dữ liệuEnable Editing, Enable Deleting,Enable Selection: Thêm các buttonedit, Delete, Select thuộc kiểutrường command fieldEdit Templates: Định nghĩa cácTemplate cho GridView

Smart tag menu

Enable Paging: Kích hoạt tính năngphân trangEnable Sorting: Kích hoạt tínhnăng tự động sắp xếp dữ liệuEnable Editing, Enable Deleting,Enable Selection: Thêm các buttonedit, Delete, Select thuộc kiểutrường command fieldEdit Templates: Định nghĩa cácTemplate cho GridView


Ứng dụng một trang đơn giản, hiểnthị danh sách phân loại sản phẩmtrong bảng CategoriesCho phép thêm, sửa, xóa một phânloại sản phẩm trong CSDLỨng dụng gồm:

Một điều khiển GridView gồmBa cột hiển thị thông tin phân loại sảnphẩmHai cột chứa button Edit và Delete

Các điều khiển nhập mới thông tinphân loại sản phẩm

Các text box và button Add NewCategory

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

Ứng dụng một trang đơn giản, hiểnthị danh sách phân loại sản phẩmtrong bảng CategoriesCho phép thêm, sửa, xóa một phânloại sản phẩm trong CSDLỨng dụng gồm:

Một điều khiển GridView gồmBa cột hiển thị thông tin phân loại sảnphẩmHai cột chứa button Edit và Delete

Các điều khiển nhập mới thông tinphân loại sản phẩm

Các text box và button Add NewCategory


Nội dung demo:Liên kết GridView và DataSource

Thêm một điều khiển GridViewThê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ườngThêm hai button Edit & Delete cho ứng dụng

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

DemoHiể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 GridViewThê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ườngThêm hai button Edit & Delete cho ứng dụng

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


Liên kết GridView và DataSourceKé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 Newdata 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 rachứa tất cả các cột của datasource.


Liên kết GridView và DataSourceKé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 Newdata 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 rachứa tất cả các cột của datasource.


Thêm bớt, tùy chỉnh định nghĩa các trườngSử dụng hộp thoại Fields để định nghĩa các trườngMở hộp thoại Fields

Vào smart tag menu. Chọn Edit ColumnsThêm trường CommandField Edit, Update, Cancel và Deletecho GridView


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

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


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

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

- Các trường đã được thêmvà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ườngdữ liệu.Sinh viên tham khảo thêm các thuộc tínhkhác trong SGK

Định nghĩa StyleMở 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ínhBackColor, ForeColor…



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






</Columns>


</asp:GridView>

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







</Columns>


</asp:GridView>

Các phần tửđịnh nghĩa cáctrường dữ liệu

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

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ènCá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 chodatasourceKiể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ènCá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 chodatasourceKiểm soát lỗi thao tác CSDL bằng cách viết mã xử lý sựkiện RowUpdated, RowDeleted


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

Vì điều khiển GridViewkhông hỗ trợ thao tác thêmdữ 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 chophép người dùng nhập dữliệuSử dụng phương thứcInsert của điều khiểnsqlDataSource để chènmột hàng vào CSDL

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

Vì điều khiển GridViewkhông hỗ trợ thao tác thêmdữ 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 chophép người dùng nhập dữliệuSử dụng phương thứcInsert của điều khiểnsqlDataSource để chènmột hàng vào CSDL


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

DemoThê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. " +"Message: " + ex.Message;

}}

Phương thức xử lý sự kiện btnAdd_Click thực hiện thao tácchèn dữ liệu vào CSDL


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. " +"Message: " + ex.Message;

}}

Thiết lập giá trị các tham số của điều khiểnSqlDataSource

Thực thi câu lệnh chèn dữ liệu vào CSDL

DemoCậ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. " +"Message: " + e.Exception.Message;

e.ExceptionHandled = true;e.KeepInEditMode = true;

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

lblError.Text = "Another user may have updated that category." +" Please try again.";

}}


protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e){




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


}}

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

protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e){



e.ExceptionHandled = true;}else if (e.AffectedRows == 0){


}}


protected void GridView1_RowDeleted(object sender, GridViewDeletedEventArgs e){



e.ExceptionHandled = true;}else if (e.AffectedRows == 0){


}}

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ểnthị 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ácnhư: 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ểnthị của các trường của GridView

Mặc định, ở chế độ Update, các trường của GridView hiểnthị 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ácnhư: drop-down list, list box….Thêm các điều khiển ràng buộc cho các trường.


Label Textbox

Chuyển BoundField thành TemplateFieldSử dụng hộp thoại FieldsNhấ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 TemplateMở smart tag menu. Chọn Edit Template.Thao tác giống như Data List

DemoSử dụng Template Field

Chuyển BoundField thành TemplateFieldSử dụng hộp thoại FieldsNhấ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 TemplateMở smart tag menu. Chọn Edit Template.Thao tác giống như Data List



Điều khiển DetailsView được thiết kế để hiển thị mộthàng dữ liệu đơn của một datasourceHỗ trợ các tính năng:

Phân trangCậ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ộthàng dữ liệu đơn của một datasourceHỗ trợ các tính năng:

Phân trangCập nhật, thêm mới, xóa một hàng trong CSDL


Điều khiển DetailsView hiển thịthông tin chi tiết của một sảnphẩm

Điều khiển DetailsViewcung cấp ba chế độhiển thị

ReadOnly: Người dùngchỉ có thể xem dữ liệuInsert: Người dùng cóthể thao tác thêm mớidữ liệuUpdate: Người dùng cóthể thao tác cập nhậtdữ liệu

Lập trình viên có thể lậptrình cấu hình hiển thịcho các chế độ này

Ba chế độ của DetailsViewChế độ ReadOnly

Click vào Edit sẽchuyển sang chế

độ UpdateClick vào New sẽchuyển sang chế

độ Insert

Điều khiển DetailsViewcung cấp ba chế độhiển thị

ReadOnly: Người dùngchỉ có thể xem dữ liệuInsert: Người dùng cóthể thao tác thêm mớidữ liệuUpdate: Người dùng cóthể thao tác cập nhậtdữ liệu

Lập trình viên có thể lậptrình cấu hình hiển thịcho các chế độ này


Chế độ Update Chế độ Insert

Các mục thường dùng trongsmart tag menu

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

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

Các mục thường dùng trongsmart tag menu

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


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

Trang Maser/Details thườngdùng để trình bày thông tincủa hai bảng có quan hệ 1-nĐiều khiển GridView thườngsử dụng kết hợp với điềukhiển danh sách & GridViewtạo thành trangMaster/Details

Trang Master/Details

Điều khiển GridView Điều khiển DetailsViewTrang Maser/Details thườngdùng để trình bày thông tincủa hai bảng có quan hệ 1-nĐiều khiển GridView thườngsử dụng kết hợp với điềukhiển danh sách & GridViewtạo thành trangMaster/Details


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

Thuộc kiểu trang Master/DetailỨng dụng gồm

Một GridView hiển thị danh sáchcác sản phẩm.

GridView chứa button Select chophép chọn từng sản phẩm trongdanh sách

Một DetailsView hiển thị thông tinchi 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ảnphẩ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áchcác sản phẩm.

GridView chứa button Select chophép chọn từng sản phẩm trongdanh sách

Một DetailsView hiển thị thông tinchi 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ảnphẩm


Ứng dụng ProductMaintDetailsView

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 GridViewChỉ định thuộc tính SelectedIndex = 0

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

Demotạ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 GridViewChỉ định thuộc tính SelectedIndex = 0

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


Nội dung demoHiển thị dữ liệu trên DetailsView

Tạo DetailsView. Cấu hình DataSourceĐịnh nghĩa các trườngKích hoạt tính năng phân trangĐịnh nghĩa các Style


Nội dung demoHiển thị dữ liệu trên DetailsView

Tạo DetailsView. Cấu hình DataSourceĐịnh nghĩa các trườngKích hoạt tính năng phân trangĐịnh nghĩa các Style


Tạo DetailsView và cấu hình datasourceKéo DetailsView từ Toolbox lên màn hình thiết kế. Gán giátrị ID cho DetailsViewMở smart tag menu. Tại mục Chose Data Source chọnNew Data Source để mở cửa sổ Data ConfigurationWinzardCấu hình DataSource như các bước đã học


Tạo DetailsView và cấu hình datasourceKéo DetailsView từ Toolbox lên màn hình thiết kế. Gán giátrị ID cho DetailsViewMở smart tag menu. Tại mục Chose Data Source chọnNew Data Source để mở cửa sổ Data ConfigurationWinzardCấu hình DataSource như các bước đã học


<asp:DetailsView ID="DetailsView2" runat="server"DataSourceID="SqlDataSource2"

Height="50px" Width="125px"></asp:DetailsView>

Định nghĩa các trường cho DetailsViewTương tự như điều khiển GridView, để định nghĩa cáctrường của DetailsView ta sử dụng cửa sổ FieldsMở smart tag menu, chọn Edit Fields

Thêm các trường BoundField


Định nghĩa các trường cho DetailsViewTương tự như điều khiển GridView, để định nghĩa cáctrường của DetailsView ta sử dụng cửa sổ FieldsMở smart tag menu, chọn Edit Fields

Thêm các trường BoundField


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>


<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ửFieldsSinh 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…

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 CommandFieldCấu hình câu lệnh Insert, Update,Delete cho DataSourceViết hàm xử lý sự kiện

Chèn và cập nhậtdữ 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 CommandFieldCấu hình câu lệnh Insert, Update,Delete cho DataSourceViết hàm xử lý sự kiện


Thêm CommandField & cấu hìnhDatasource

Để thêm trường CommandField choDetailsView

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

DemoChèn/cập nhật dữ liệu trên DetailsView

Thêm CommandField & cấu hìnhDatasource

Để thêm trường CommandField choDetailsView

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


-Chọn CommandField trong mụcChose a field type- Chọn kiểu button trong mụcButton type-Chọn các button cần hiển thịbằng cách tắt hoặc bật cáccheckbox

<asp:CommandField ButtonType="Button"ShowDeleteButton="True"ShowEditButton="True"ShowInsertButton="True" />

Viết hàm xử lý sự kiệnTương tự điều khiển GridView, DetailViews cũng cungcấ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.

DemoChè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;


}else if (e.AffectedRows == 0)

lblError.Text = "Another user may have updated that product. " +"Please try again.";

elseGridView1.DataBind();

}

Viết hàm xử lý sự kiệnTương tự điều khiển GridView, DetailViews cũng cungcấ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.


protected void DetailsView1_ItemUpdated(object sender, DetailsViewUpdatedEventArgs e)

{if (e.Exception != null){

lblError.Text = "A database error has occurred. " +"Message: " + e.Exception.Message;


}else if (e.AffectedRows == 0)

lblError.Text = "Another user may have updated that product. " +"Please try again.";

elseGridView1.DataBind();

}

Kiểm tra ngoại lệ

Kiểm tra lỗi truy cập đồngthời

Gọi phương thứcDataBind để 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

Mặc định các trường trong chếđộ Insert, Update hiển thị dướidạng textbox hoặc label (trườngkhóa chính)Lập trình viên có thể kiểm soáthiển thị, thêm các điều khiểnvào các trường cho các chế độ nàysử dụng TemplateFieldĐể tạo TemplateField, sử dụnghộp thoại Fields để chuyển cáctrường BoundField thànhTemplateField

Sử dụng TemplateField

Giao diện Details ở chế độ Update vớicác điều khiển Web Server

Mặc định các trường trong chếđộ Insert, Update hiển thị dướidạng textbox hoặc label (trườngkhóa chính)Lập trình viên có thể kiểm soáthiển thị, thêm các điều khiểnvào các trường cho các chế độ nàysử dụng TemplateFieldĐể tạo TemplateField, sử dụnghộp thoại Fields để chuyển cáctrường BoundField thànhTemplateField


Giao diện Details ở chế độ Update vớicác điều khiển Web Server

Giao diện Details ở chế độ Insert vớicác điều khiển Web Server

Chuyển trường BoundFieldthành TemplateField

Mở smart tag menu, chọnEdit Fields

Định nghĩa các trườngTemplateField

Tương tự DataList

Định nghĩaTemplateField cho DetailsView

-Click vào tên trườngtrong mục SelectedFields- Click vào Convert thisfield into aTemplateField

Chuyển trường BoundFieldthành TemplateField

Mở smart tag menu, chọnEdit Fields

Định nghĩa các trườngTemplateField

Tương tự DataList


-Click vào tên trườngtrong mục SelectedFields- Click vào Convert thisfield into aTemplateField

Các phần tử template củaDetailsView

Định nghĩaTemplateField cho DetailsView


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


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áctrường

Nội dung demo. Định nghĩa TemplateField cho ứng dụngProductMaintDetailsView

Đị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ụngProductMaintDetailsView

Định nghĩa EditItemTemplateĐịnh nghĩa InsertItemTemplate


Đ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


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, ítdùng để thêm, sửa, xóa dữ liệuGridView: 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ệuListView: Cơ bản giống GridView, nhưn cung cấp thêm tínhnăng chèn dữ liệu, hiển thị các phần tử của datasource theonhó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, ítdùng để thêm, sửa, xóa dữ liệuGridView: 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ệuListView: Cơ bản giống GridView, nhưn cung cấp thêm tínhnăng chèn dữ liệu, hiển thị các phần tử của datasource theonhóm, có thể tùy chỉnh định dạng hiển thị


Điều khiển hiển thị một hàng dữ liệu đơn từ datasourceDetailsViewFormView: Cơ bản giống DetailsView. Khác: Hỗ trợ sử dụngCSS để đị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ừ datasourceDetailsViewFormView: Cơ bản giống DetailsView. Khác: Hỗ trợ sử dụngCSS để đị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.

Documents

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