Working with the DataList

for RuBoard

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.

Figure 11.5. The IBuySpy Product List page.

graphics/11fig05.jpg

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.

Figure 11.6. The Product List page implemented in Listing 11.6.

graphics/11fig06.jpg

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">                   &nbsp               </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>

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. The code for that screen is not provided in this hour. However, it can be downloaded online at http://www. sams .com.

for RuBoard