DataList .NET Server Control
DataList .NET Server Control"-->
| only for RuBoard |
DataList .NET Server Control
The DataList is next on the list of server controls that support templates we'll be discussing. The DataList differs from the DataGrid because you must use templates to display data; you cannot simply set its DataList.DataSource attribute and call the DataList.DataBind method as you can with the DataGrid . Although, it is similar to the DataGrid , in that it must be bound to a data source that supports the ICollection interface to render HTML.
The DataList contains 7 templates. The following list contains each:
-
HeaderTemplate ” Defines how the header is rendered.
-
ItemTemplate ” Defines how items are rendered.
-
AlternatingItemTemplate ” Defines how alternating items are rendered (every other item).
-
EditItemTemplate ” Defines how items in edit mode should be rendered (not discussed in this chapter).
-
SelectedItemTemplate ” Defines how selected items should be rendered (not discussed in this chapter).
-
SeparatorTemplate ” Defines a separator for each item to be rendered (ex: <hr> ).
-
FooterTemplate ” Defines how the footer is rendered.
Note
At a minimum, you need to define the ItemTemplate to render output to a page using the DataList .
By default, the DataList renders items in a single vertical column. However, by setting the RepeatColumns property, you can specify that more than one column is rendered. You set the RepeatColumns property in the opening DataList tag:
<asp:DataList RepeatColumns="2" />
If RepeatColumns is set to more than one column, a couple of new properties can be taken advantage of. The first is the RepeatLayout property. RepeatLayout enables you to control how items in the DataList are positioned with respect to one another. RepeatLayout has two options:
-
Flow ” List items are rendered inline, much like a word document (left to right). Flow Layout uses the <SPAN> HTML element for placement; hence attributes such as GridLines disappear when RepeatLayout is Flow .
-
Table ” List items are rendered in a <TABLE> HTML element. Table Layout gives you more flexibility than Flow Layout in manipulating the look of the data contained in each cell. You can set any property you would normally set for a table cell or table such as setting the GridLines attribute. (Table Layout is the default value for RepeatLayout .)
You can set the RepeatLayout property using code similar to the following:
<asp:DataList RepeatColumns="2" RepeatLayout="Table" />
The third layout property I want to discuss is the RepeatDirection property, which indicates whether the control is rendered horizontally or vertically:
-
Vertical ” Items are ordered vertically, like a newspaper or magazine column. (This is the default value for RepeatDirection.) What this means is items are rendered from index 0 to n from your data source top to bottom in the DataList.
-
Horizontal ” Items are ordered like the content of a calendar. What this means is items are rendered from index 0 to n from your data source left to right.
You set the RepeatDirection using code similar to the following:
<asp:DataList RepeatColumns="2" RepeatLayout="Table" RepeatDirection="Vertical" />
Listing 7.4 illustrates how all these properties affect the way things are rendered to the page. There's only so much room in this book, so I'm keeping these examples very concise . For more detailed examples, please visit our web site at http://www.DotNetJunkies.com. When you are through with this example, I recommend playing around with the RepeatColumns , RepeatDirection , and RepeatLayout properties further to get a better idea of how they affect the rendering of the page.
Listing 7.4 Using the DataList
[VisualBasic.NET] 01: <%@ Import Namespace="System.Data" %> 02: <%@ Import Namespace="System.Data.SqlClient" %> 03: 04: <script language="VB" runat="server"> 05: 06: sub Page_Load(sender as Object, e as EventArgs) 07: 08: dim SqlCmd as new StringBuilder() 09: SqlCmd.Append("SELECT S.CompanyName,") 10: SqlCmd.Append("P.ProductName,") 11: SqlCmd.Append("P.QuantityPerUnit,") 12: SqlCmd.Append("P.UnitPrice,") 13: SqlCmd.Append("P.UnitsInStock,") 14: SqlCmd.Append("P.UnitsOnOrder ") 15: SqlCmd.Append("FROM Products P ") 16: SqlCmd.Append("INNER JOIN Suppliers S ") 17: SqlCmd.Append("ON ") 18: SqlCmd.Append("S.SupplierID = P.SupplierID") 19: 20: dim SqlCon as new SqlConnection("server=localhost; 
uid=sa;pwd=;database=northwind") 21: dim sqlcommand as new SqlCommand(SqlCmd.ToString(), SqlCon) 22: 23: SqlCon.Open() 24: DLProducts.DataSource = sqlcommand.ExecuteReader(CommandBehavior.CloseConnection) 25: DLProducts.DataBind() 26: 27: 28: End Sub 29: 30: </script> [C#.NET] 01: <%@ Import Namespace="System.Data" %> 02: <%@ Import Namespace="System.Data.SqlClient" %> 03: 04: <script language="c#" runat="server"> 05: 06: public void Page_Load(Object sender, EventArgs e) { 07: 08: StringBuilder SqlCmd = new StringBuilder(); 09: SqlCmd.Append("SELECT S.CompanyName,"); 10: SqlCmd.Append("P.ProductName,"); 11: SqlCmd.Append("P.QuantityPerUnit,"); 12: SqlCmd.Append("P.UnitPrice,"); 13: SqlCmd.Append("P.UnitsInStock,"); 14: SqlCmd.Append("P.UnitsOnOrder "); 15: SqlCmd.Append("FROM Products P "); 16: SqlCmd.Append("INNER JOIN Suppliers S "); 17: SqlCmd.Append("ON "); 18: SqlCmd.Append("S.SupplierID = P.SupplierID"); 19: 20: SqlConnection SqlCon = new SqlConnection("server=localhost; uid=sa;pwd=;database=northwind"); 21: SqlCommand sqlcommand = new SqlCommand(SqlCmd.ToString(), SqlCon); 22: 23: SqlCon.Open(); 24: DLProducts.DataSource = sqlcommand.ExecuteReader(CommandBehavior.CloseConnection); 25: DLProducts.DataBind(); 26: 27: 28: } 29: 30: </script> [VisualBasic.NET & C#.NET] 31: <html> 32: <head><title>DotNetJunkies.com</title> 33: <style rel="stylesheet"> 34: 35: A { text-decoration:none;color:black} 36: A:Hover { color:maroon;text-decoration:underline} 37: A:Visited { color:red} 38: .body { font: 9pt Verdana, Arial, sans-serif; } 39: .head { font: bold 9pt Verdana, Arial, sans-serif; background-color:Maroon; color: white; } 40: .tablehead { font: bold 9pt Verdana, Arial, sans-serif; background-color:green; color:white; } 41: </style> 42: </head> 43: <body> 44: <center> 45: <asp:DataList 46: id="DLProducts" 47: Runat="server" 48: Width="100%" 49: GridLines="Both" 50: CellPadding="4" 51: CellSpacing="0" 52: RepeatColumns="3" 53: RepeatLayout="Table" 54: RepeatDirection="Horizontal" 55: 56: HeaderStyle-CssClass="head" 57: ItemStyle-CssClass="body" 58: 59: > 60: 61: <HeaderTemplate> 62: <center>Northwind Products</center> 63: </HeaderTemplate> 64: 65: <ItemTemplate> 66: <table width="100%"> 67: <tr> 68: <td align="center" class="tablehead" ColSpan="2"> 69: <%# DataBinder.Eval(Container.DataItem, "ProductName" )%> 70: </td> 71: </tr> 72: <tr> 73: <td class="body" align="left" valign="top"> 74: <b>Price</b> 75: </td> 76: <td class="body" align="right" valign="top"> 77: <b><%# DataBinder.Eval( Container.DataItem, "UnitPrice", "{ 0:C} ")%></b> 78: </td> 79: </tr> 80: <tr> 81: <td class="body" align="left" valign="top"> 82: <b>Quantity Per Unit</b> 83: </td> 84: <td class="body" align="right" valign="top"> 85: <b><%# DataBinder.Eval( Container.DataItem, "QuantityPerUnit")%></b> 86: </td> 87: </tr> 88: <tr> 89: <td align="center" class="head" ColSpan="2"></td> 90: </tr> 91: <tr> 92: <td class="body" ColSpan="2" align="center"> 93: <a Target="_blank" 94: href="ProductDetails.aspx?ProductName=<%# DataBinder.Eval( Container.DataItem, "ProductName")%>"> 95: [ More Information Click Here ] 96: </a> 97: </td> 98: </tr> 99: </table> 100: </ItemTemplate> 101: 102: </asp:DataList> 103: </center> 104: </body> 105: </html> First let's look at the rendered page from Listing 7.4 found in Figure 7.4 and then go through what attributes made it render in this fashion.
Figure 7.4. DataList using the HeaderTemplate and ItemTemplate .
The first thing you'll notice is that there are three columns within the DataList and only one Header. This was achieved by using the RepeatColumns attribute (line 52) in conjunction with the RepeatLayout (line 53). The value of RepeatColumns is 3 , which indicates that the items should render 3 columns wide, but if the RepeatLayout is set to Flow rather than Table there are no columns rendered; hence, setting this attribute would be ineffective .
Something that may not jump out at you is the effect of setting the RepeatDirection attribute. As previously mentioned the RepeatDirection attribute determines whether items from the DataList.DataSource are rendered from left to right or from top to bottom. I recommend changing the value from Horizontal to Vertical in order to see the difference in the way the items are rendered.
In this example I only took advantage of two templates. The first template is the HeaderTemplate (lines 61 “63). Whatever is located between the HeaderTemplate elements will only be rendered once. In this example there are a mix of HTML elements and raw text "Northwind Products" . The second template used is the ItemTemplate . Recall that the ItemTemplate contents will be rendered once for each item in the DataList.DataSource . In this example a table HTML element is used to structure the item and the DataBinder.Eval method is used to populate data from the DataList.DataSource .
Now let's add a little more pizzazz to the DataList by adding the AlternatingItemTemplate , which lets you change the display of every other item that's rendered. Using the DataList the AlternatingItemTemplate can differ from the ItemTemplate merely by style attributes such as the background color of the header or you can change the entire structure of the item. Listing 7.5 contains example code illustrating how to use the AlternatingItemTemplate . Insert the code from Listing 7.5 between lines 100 & 102 in Listing 7.4.
Listing 7.5 Adding an AlternatingItemTemplate to Listing 7.4
101: <AlternatingItemTemplate> 102: <table width="100%"> 103: <tr> 104: <td align="center" class="Head" ColSpan="2"> 105: <%# DataBinder.Eval(Container.DataItem, "ProductName" )%> 106: </td> 107: </tr> 108: <tr> 109: <td class="body" ColSpan="2" align="center"> 110: <a Target="_blank" 111: href="ProductDetails.aspx?ProductName=<%# DataBinder.Eval(
Again, let's look at the rendered page for Listing 7.5 before discussion (see Figure 7.5).
Figure 7.5. DataList using the HeaderTemplate , ItemTemplate , and the AlternatingItemTemplate .
Ok, this isn't the prettiest page possible, but it demonstrates my point for this section. Every other item is different within the DataList both in style and structure. The first item in the top-left corner has a green header with a hyperlink at the bottom of the item. The item found directly to the right of that has a maroon header and the link is located at the top of the item.
As you can imagine you easily can make some very complicated user interfaces using the DataList since you have absolute control over how items are rendered. Also, you only have to create your user interface for an item once and it is repeated for you for all other items. For instance, a DataList would be great for a master detail list.
| only for RuBoard |
EAN: 2147483647
Pages: 170