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ướ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 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 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 (đã 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ị Đ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 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 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ự độ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 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 [...]... List Điều khiển DetailsView, FormView, ListView, DataPager 29 Làm quen với lập trình CSDL ASP.NET 30 Điều khiển DetailsView Điều khiển DetailsView được thiết kế để hiển thị một hàng dữ liệu đơn của một datasource Hỗ trợ các tính năng: Phân trang Cập nhật, thêm mới, xóa một hàng trong CSDL Điều khiển DetailsView hiển thị thông tin chi tiết của một sản phẩm Điều khiển DetailsView, FormView, ListView, DataPager. .. dạng Footer PageStyle Style định dạng phân trang Điều khiển DetailsView, FormView, ListView, DataPager 13 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 Smart tag menu Enable Paging: Kích hoạt... sản phẩm Điều khiển DetailsView, FormView, ListView, DataPager Ứng dụng ProductMaintDetailsView 35 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 ... menu của điều khiển DetailsView Các mục thường dùng trong smart tag menu Chức năng tương tự như chức năng tương ứng của GridViews Smart tag menu hỗ trợ cấu hình DetailsView dễ dàng Điều khiển DetailsView, FormView, ListView, DataPager 33 Trang Master/Details Trang Maser/Details thường dùng để trình bày thông tin của hai bảng có quan hệ 1n Điều khiển GridView thường sử dụng kết hợp với điều khiển danh... quan hệ 1n Đ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 GridView Điều khiển DetailsView Điều khiển DetailsView hiển thị một hàng dữ liệu đơn của một dataSource Điều khiển DetailsView, FormView, ListView, DataPager 34 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ị... 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 Label Điều khiển DetailsView, FormView, ListView, DataPager Textbox 28 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. .. 16 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. .. Template cho GridView Điều khiển DetailsView, FormView, ListView, DataPager 15 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... của điều khiển GridView 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 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 Điều khiển DetailsView,. .. Hiển thị dữ liệu trên GridView Đị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… Điều khiển DetailsView, FormView, ListView, DataPager 20 Mã aspx của điều khiển GridView . 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 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 Điều khiển DetailsView, FormView, ListView, DataPager 3 2. Điều khiển GridView 3. Điều. 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 Các điều khiển hiển thị một hàng