c) Thao tác thêm dữ liệu Insert
3.3.3. Giới thiệu điều khiển Data Bound
Data-bound controls là các điều khiển buộc dữ liệu, cung cấp kết nối giữa các điều khiển data source controls với người sử dụng.
Điều khiển GridView:
Điều khiển Grid View là điều khiển phát triển từ điều khiển Data Grid (ASP.NET 1.0). Giống như DataGrid, GridView được sử dụng để hiển thị dữ liệu như một bảng dữ liệu. Sử dụng GridView để hiển thị, edit, delete, sort, và phân trang.
GridView và DataGrid có thể buộc vào một điều khiển DataSourceControl, nhưng DataGrid chỉ cho chọn dữ liệu. Việc Sort, paging, updates, và delete phải được code bằng tay. GridView h ỗ t r ợ thuộc tính DataSourceID làm cho điều khiển có thể tích hợp được các khả năng sorting, paging, updating, và deleting của điều khiển data source.
Ví dụ 3.4. Sử dụng GridView để hiển thị dữ liệu, sorting và paging (vidu3_5.aspx)
<%@ Page Language="VB" %> <script runat="server"></script> <body>
<form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource>
<asp:GridView ID="MyGridView" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" PageSize="2" DataSourceID="SqlDataSource1" DataKeyNames="ProductID"> <Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID"/>
<asp:BoundField DataField="ProductType" HeaderText="ProductType"/> <asp:BoundField DataField="ProductName" HeaderText="ProductName" /> <asp:BoundField DataField="ProductDescription"
HeaderText="ProductDescription" />
<asp:BoundField DataField="ProductSize" HeaderText="ProductSize" /> <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /> <asp:TemplateField HeaderText="Image">
<ItemTemplate>
80
Eval("ProductImageURL")%>'/> </ItemTemplate>
</asp:TemplateField> </Columns>
<PagerSettings FirstPageText="First" LastPageText="Last" PageButtonCount="4" Position="TopAndBottom" FirstPageImageUrl="~/Images/btnFirst.gif" LastPageImageUrl="~/Images/btnLast.gif" NextPageImageUrl="~/Images/btn_next.gif" NextPageText="Next" PreviousPageImageUrl="~/Images/btn_previous.gif" PreviousPageText="Previous" /> </asp:GridView> </form> </body>
Ta thực hiện thiết kế trong tab Design của cửa sổ Web Page Designer:
- Kéo điều khiển GridView vào cửa sổ thiết kế. Sau đó mở Smart Task và chọn: DataSource, Paging để phân trang và Sorting dùng để sắp xếp dữ liệu (Hình 3.8).
- Chọn Add New Column để thêm một cột thể hiện hình ảnh các sản phẩm. Xuất hiện hình 3.9. Chọn kiểu trường là TemplateFile và Header Text là Image. Sau đó click OK.
- Chọn Edit Template và chọn Template vừa tạo để hiệu chỉnh xuất hiện cửa sổ hình 3.10. Trong cửa sổ này ta thêm thẻ <Image> và buộc điều khiển này vào trường ProductImageURL
- Thực hiện phân trang hiển thị. Trong cửa sổ Properties mở rộng thuộc tính PagerSetting và Page size để định dạng phân trang (hình 3.11):
+ Mode: Kiểu duyệt trang (NextPreviousFirstLast, Numeric, NextPrevious, NumericFirstLast).
+ NextPageImagerURL: Địa chỉ ảnh của nút Next. + NextPageText: Chuỗi Text của nút Next
Tương tự cho các nút còn lại,… + Pagesize: Số bản ghi trên một trang Kết quả duyệt ví dụ 3.4 trong hình 3.12.
81
Hình 3.9. Cửa sổ Add File Hình 3.10. Cửa sổ Edit Template
82
Hình 3.11. Cửa sổ Properties
Hình 3.12. Duyệt ví dụ 3.4. Điều khiển DataList và Repeater Controls:
83
Là các điều khiển mà tồn bộ thơng tin của bản ghi sẽ được hiển thị trên một cell. Điểm khác nhau giữa hai điều khiển này là DataList có định dạng và template mặc định cịn Repeater khơng có mà phải tự thiết kế. Cách tạo DataList tương tự như GridView.
Ví dụ 3.5. Sử dụng điều khiển DataList (vidu3_6.aspx)
<%@ Page Language="VB" %> <script runat="server">
</script> <body>
<form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize],
[ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="2">
<ItemTemplate>
<asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> Mã sản phẩm:
<asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>'></asp:Label><br /> Tên sản phẩm:
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br />
Kiểu sản phầm:
<asp:Label ID="ProductTypeLabel" runat="server"
Text='<%# Eval("ProductType")%>'></asp:Label><br /> Mô tả:
<asp:Label ID="ProductDescriptionLabel" runat="server" Text='<%# Eval("ProductDescription") %>'></asp:Label>
Kích thước sản phẩm:
<asp:Label ID="ProductSizeLabel" runat="server"
Text='<%# Eval("ProductSize")%>'></asp:Label><br /> Giá sản phẩm (USD):
<asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> </ItemTemplate>
</asp:DataList> </form>
</body>
84
Hình 3.13. Duyệt ví dụ 3.5. Ví dụ 3.6. Sử dụng điều khiển Repeater (vidu3_7.aspx)
<%@ Page Language="VB" %> <form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>"
SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize], [ProductImageURL], [UnitPrice] FROM [Products]"> </asp:SqlDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate>
<asp:Image ID="Image1" runat="server"
ImageUrl='<%# Eval("ProductImageURL") %>' /><br /> Mã sản phẩm:
<asp:Label ID="ProductIDLabel" runat="server"
Text='<%# Eval("ProductID") %>'></asp:Label><br /> Tên sản phẩm:
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label><br />
Kiểu sản phầm:
<asp:Label ID="ProductTypeLabel" runat="server"
Text='<%# Eval("ProductType")%>'></asp:Label><br /> Mô tả:
<asp:Label ID="ProductDescriptionLabel" runat="server" Text='<%# Eval("ProductDescription") %>'></asp:Label>
Kích thước sản phẩm:
<asp:Label ID="ProductSizeLabel" runat="server"
Text='<%# Eval("ProductSize")%>'></asp:Label><br /> Giá sản phẩm (USD):
85
<asp:Label ID="UnitPriceLabel" runat="server"
Text='<%# Eval("UnitPrice") %>'></asp:Label><br /> </ItemTemplate>
</asp:Repeater> </form>
Kết quả triệu gọi ví dụ 3.6. cho trong hình 3.14.
Hình 3.14. Duyệt ví dụ 3.6. Điều khiển DetailsView và FormView Controls:
Đây là hai điều khiển buộc dữ liệu, tại một thời điểm chỉ hiển thị một bản ghi. Khi buộc dữ liệu, điều khiển DetailsView tự động tạo các template, FormView chỉ tạo ra thẻ trắng và người thiết kế phải tự thiết kế các template.
Ví dụ 3.8. Minh họa việc sử dụng kết hợp điều khiển GridView và điều khiển
DetailView. Điều khiển GridView hiển thị danh sách các sản phẩm còn điều khiển DetailView hiển thị thông tin chi tiết sản phẩm mà người dùng chọn trên điều khiển GridView.
<%@ Page Language="VB" %> <form id="form1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:MyConn %>"
SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [UnitPrice] FROM [Products]">
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowPaging="True" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px"
CellPadding="3" DataKeyNames="ProductID" PageSize="5" GridLines="Horizontal">
<Columns>
<asp:CommandField ShowSelectButton="True" ButtonType="Image" SelectImageUrl="~/Images/dn.gif" />
86 SortExpression="ProductID" /> SortExpression="ProductID" /> <asp:BoundField DataField="ProductType" HeaderText="Kiểu sản phẩm"SortExpression="ProductType"/> <asp:BoundField DataField="ProductName" HeaderText="Tên sản phẩm" SortExpression="ProductName"/> <asp:BoundField DataField="UnitPrice" HeaderText="Giá(USD)" SortExpression="UnitPrice" /> </Columns> <PagerSettings PageButtonCount="4" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font- Bold="True"ForeColor="#F7F7F7"/>
<PagerStyleBackColor="#E7E7FF"ForeColor="#4A3C8C" HorizontalAlign="Right"/>
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7"/>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:MyConn %>" SelectCommand="SELECT [ProductID], [ProductType], [ProductName], [ProductDescription], [ProductSize],
[ProductImageURL], [UnitPrice] FROM [Products] WHERE ([ProductID] = @ProductID)">
<SelectParameters>
<asp:ControlParameter ControlID="GridView1" DefaultValue="2"
Name="ProductID" PropertyName="SelectedValue" Type="Int32" /> </SelectParameters>
</asp:SqlDataSource> Thông tin chi tiết<br />
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="SqlDataSource2" GridLines="Horizontal" Height="50px" Width="440px">
<PagerSettings PageButtonCount="4" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<EditRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /> <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<PagerStyleBackColor="#E7E7FF"ForeColor="#4A3C8C" HorizontalAlign="Right"/>
<Fields>
<asp:TemplateField HeaderText="Ảnh"> <ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImageURL") %>' />
</ItemTemplate> </asp:TemplateField>
<asp:BoundField DataField="ProductName" HeaderText="Tên sản phẩm" SortExpression="ProductName" />
87
<asp:BoundField DataField="ProductID" HeaderText="Mã sản phẩm" SortExpression="ProductID" />
<asp:BoundField DataField="ProductType"HeaderText="Kiểu sản phẩm" SortExpression="ProductType" />
<asp:BoundField DataField="ProductDescription" HeaderText="Mơ tả:"/> <asp:BoundField DataField="ProductSize" HeaderText="Kích thước"
SortExpression="ProductSize" />
<asp:BoundField DataField="UnitPrice" HeaderText="Đơn giá:" /> </Fields>
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <AlternatingRowStyle BackColor="#F7F7F7" />
</asp:DetailsView> </form>
Chú ý: Xây dựng mệnh đề Where cho điều khiển SqlDataSource2 để kết nối dữ liệu giữa hai điều khiển như hình 3.14.
Kết quả duyệt ví dụ 3.8. cho trong hình 3.15.
88
Hình 3.15. Duyệt ví dụ 3.8.