- Hour 11: Using the Built-In ASP.NET List Controls
- Working with the Repeater
- Working with the DataGrid
- Working with the DataList
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with the DataList
Much like the DataGrid, the DataList is geared toward displaying data in a particular format. Whereas the DataGrid is best at organizing data into horizontal rows in a table, the DataList is best at grouping data into chunks, as you can see in Figure 11.5. Notice how the information about each product is closely grouped in its own section. Though it can be used to display data horizontally, the DataList is primarily used to display a set of information grouped together.
){kind=link}
Unlike the DataGrid, however, the DataList will not automatically generate a default appearance for your data. You must define a template, just as you did earlier for the repeater. To implement a screen like the one in Figure 11.5, you must define an ItemTemplate. In the ItemTemplate, you place the code necessary to display a single product. Then, for each product returned from the data source, an instance of the ItemTemplate is placed on the page.
An implementation of a product list screen is shown in Listing 11.6. Much like the other examples in this hour, product information is retrieved from the data source and then bound to the DataList control. The DataList control has an ItemTemplate defined that builds a separate HTML table for each record. When run, the Web form looks much like the one in Figure 11.6.
){kind=link}
Figure 11.5 The IBuySpy Product List page.
Listing 11.6 Showing Order Details Using the DataGrid Control
<% @Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="Main.css">
<!-- End Style Sheet -->
<script language="VB" runat="server" >
Sub Page_Load(Source as Object, E as EventArgs)
LoadGridData( products )
End Sub
Private Sub LoadGridData( _
myDataList as System.Web.UI.WebControls.DataList )
Dim conn as New SqlConnection("Initial Catalog=Northwind;" + _
"Server=(local);UID=sa;PWD=;")
Dim cmd as New SqlCommand("Exec Products_GetAll ", conn)
conn.Open()
myDataList.DataSource = cmd.ExecuteReader()
myDataList.DataBind()
conn.Close()
End Sub
</script>
</HEAD>
<BODY>
<h1>Product List</h1>
<hr>
<form runat="server" id=form1 name=form1>
<asp:DataList id="products" RepeatColumns="2" runat="server">
<ItemTemplate>
<table border="0" width="300">
<tr>
<td width="25">
 
</td>
<td width="100" valign="middle" align="right">
<a href='productdetails.aspx?productID=
<%# DataBinder.Eval(Container.DataItem, "ProductID") %>'>
<img src='/ADO24HOURS<%# DataBinder.Eval
(Container.DataItem, "ImagePath") %>' width="72" height="72" border="0">
</a>
</td>
<td width="200" valign="middle">
<a href='ProductDetails.aspx?productID=
<%# trim(DataBinder.Eval(Container.DataItem, "ProductID")) %>'>
<%# DataBinder.Eval(Container.DataItem,
"ProductName") %></a><br>
<b>Price: </b>
<%# DataBinder.Eval(Container.DataItem,
"UnitPrice", "{0:c}") %>
<b>Units In Stock: </b>
<%# DataBinder.Eval(Container.DataItem,
"UnitsInStock") %>
<br>
</a>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</form>
<hr>
</BODY>
</HTML>
Figure 11.6 The Product List page implemented in Listing 11.6.
Note that the product hyperlinks generated in Listing 11.6 reference a page named productdetails.aspx, and pass to it the ProductID of the selected item.