-
Các control dùng để thể hiện dữ liệu của một bảng dữ liệu (DataTable).
Ví dụ:
-
Sử dụng các control để thể hiện dữ liệu của bảng “SanPham” trong file
XMLFile1.xml
- Các
thuộc tính của bảng:
Nội dung file .xml:
<?xml version="1.0" encoding="utf-8"?> <library>
<SanPham> <SanPhamID>1</SanPhamID>
<TenSanPham>Nokia E72</TenSanPham> <File>E72.bmp</File> <Gia>6.5</Gia>
</SanPham> <SanPham>
<SanPhamID>2</SanPhamID> <TenSanPham>iPhone 3Gs</TenSanPham> <File>iPhone3Gs.bmp</File> <Gia>12.0</Gia>
</SanPham> <SanPham>
<SanPhamID>3</SanPhamID> <TenSanPham>iPhone 4</TenSanPham> <File>iPhone4.bmp</File> <Gia>22.0</Gia>
</SanPham> </library>
Thiết kế Web Form:
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Xml" %> <%@ Import Namespace="System.Data" %>
<script language="C#" runat="server">
void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataSet ds = new DataSet(); ds.ReadXml(Server.MapPath(@"App_Data\XMLFile1.xml")); listControl1.DataSource = ds.Tables["SanPham"]; listControl1.DataBind();
Session["TableSanPham"] = listControl1.DataSource;
}
}
<html>
</script>
<head runat="server"><title>Untitled Page</title></head>
<body>
<h2>Danh mục sản phẩm</h2>
<form id="form1" runat="server">
<%-- Đoạn thiết kế cho listControl1 --%>
</form>
</body>
</html>
Sử
dụng Repeater Control
Thiết
kế Repeater Control
<asp:Repeater id="Repeater1" runat="server" > <HeaderTemplate><table></HeaderTemplate> <ItemTemplate>
<tr>
<td><asp:Image ID="Image1" height="100" width="100"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "File") %>' runat="server"/>
</td>
<td>Mã sản phẩm:
<%# DataBinder.Eval(Container.DataItem, "SanPhamID") %> <br />Tên sản phẩm: <b><i>
<%# DataBinder.Eval(Container.DataItem, "TenSanPham") %></b><i> <br /><b>Giá:
<%# DataBinder.Eval(Container.DataItem, "Gia") %></b><br /> </td>
</tr> </ItemTemplate>
<FooterTemplate></table></FooterTemplate> </asp:Repeater>
Sử
dụng DataList Control
Thiết
kế DataList Control
<asp:DataList id="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="2" >
<ItemTemplate><table> <tr>
<td><asp:Image ID="Image1" height="100" width="100"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "File") %>' runat="server"/>
</td> </tr> <tr>
<td>Mã sản phẩm:
<%# DataBinder.Eval(Container.DataItem, "SanPhamID") %> <br />Tên sản phẩm: <b><i>
<%# DataBinder.Eval(Container.DataItem, "TenSanPham") %></b><i> <br /><b>Giá:
<%# DataBinder.Eval(Container.DataItem, "Gia") %></b> </td>
</tr> </table></ItemTemplate>
</asp:DataList>
Sử
dụng DataGrid Control
Thiết kế DataGrid Control
<asp:DataGrid id="listControl1" runat="server" AutoGenerateColumns="false" BorderStyle="Solid" BorderWidth="1" AlternatingItemStyle-BackColor="WhiteSmoke" CellPadding="5" CellSpacing="0" >
<HeaderStyle Font-Size="8" Font-Names="Arial" Font-Bold="True"
BackColor="LightGray" HorizontalAlign="center">
</HeaderStyle>
<%-- Đoạn thiết kế các column --%>
</asp:DataGrid>
Thiết kế DataGrid Control
<Columns>
<asp:BoundColumn DataField="SanPhamID"
HeaderText="Mã SP">
<ItemStyle Width="40px" HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundColumn>
<asp:BoundColumn DataField="TenSanPham"
HeaderText="Tên sản phẩm">
<ItemStyle Width="200px" HorizontalAlign="Left" VerticalAlign="Middle" />
</asp:BoundColumn>
<asp:BoundColumn DataField="Gia"
HeaderText="Giá (triệu đồng)">
<ItemStyle Width="100px" HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:BoundColumn> </Columns>
- Thiết
lập bảng chứa DataGrid và Image.
<table> <tr>
<td>
<%-- Đoạn thiết kế DataGrid -->
</td>
<td>
<asp:Image id="image1" Width="120" Height="120" runat="server" />
</td>
</tr> </table>
- Khi
nhấn một button “Xem hình…”, Web Form phải thể hiện hình ảnh của sản phẩm trên
image1.
Thiết
kế DataGrid
asp:DataGrid
...
OnItemCommand="Item_Click">
...
<Columns>
...
<asp:ButtonColumn ButtonType="PushButton"
Text="Xem hình..." CommandName="ShowPicture" />
</Columns>
</asp:DataGrid>
Xử
lý sự kiện OnItemCommand
<script language="C#" runat="server">
void Item_Click(object sender, DataGridCommandEventArgs e)
{
if (e.CommandName == "ShowPicture")
{
try
{
DataTable tab = (DataTable)Session["TableSanPham"]; DataRow row = tab.Rows[e.Item.ItemIndex]; this.image1.ImageUrl = row["File"].ToString();
}
catch
{
}
}
}
</script>
(Còn tiếp...)
----------------------------------------------------------------------
Download bai2-tt3.mp3
----------------------------------------------------------------------
Cùng bài học
>> Bài 2: Các ASP.NET Server Control
>> Bài 2: Các ASP.NET Server Control (tiếp theo 1)
>> Bài 2: Các ASP.NET Server Control (tiếp theo 2)
>> Bài 2: Các ASP.NET Server Control (tiếp theo - hết)
----------------------------------------------------------------------
Download bai2-tt3.mp3
----------------------------------------------------------------------
Cùng bài học
>> Bài 2: Các ASP.NET Server Control
>> Bài 2: Các ASP.NET Server Control (tiếp theo 1)
>> Bài 2: Các ASP.NET Server Control (tiếp theo 2)
>> Bài 2: Các ASP.NET Server Control (tiếp theo - hết)
Không có nhận xét nào:
Đăng nhận xét