- Introduction
- Implementing a Suitable Data Source
- What Is a DataList Server Control?
- Binding to the DataList
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
What Is a DataList Server Control?
The DataList web control is defined in the System.Web.UI.WebControls namespace. When you create an ASP.NET web application, the DataList is on the Web Forms tab of the Toolbox.
To use the DataList control, click the DataList in the Toolbox and drag it to the design view of a web form. When the control is on the form, you can use the Form Designer to describe the appearance of the DataList, or switch to HTML view and describe the appearance of the DataList with HTML. We'll use the latter method and examine the HTML that will render the DataList in browse and edit modes.
Defining the DataList
The DataList control displays values for each of the objects in your IListSource or IEnumerable objects. What you have to do is define the way this data will appear on a web page. The appearance of the data on a web page is constrained by templates. You describe what one row of data looks like in each template region, and the DataList repeats that information for each row.
The template regions we'll look at include the HeaderTemplate, ItemTemplate, and EditItemTemplate. We'll use the HeaderTemplate to describe the data headers. The ItemTemplate is used to describe the appearance of the data in browse mode, and the EditItemTemplate is used to describe the data in edit mode. The HTML that renders the DataList is provided next. Paste the code in Listing 2 between the <form></form> tags on an ASP.NET web page and you're all set.
NOTE
The line numbers are provided for reference. Leave the line numbers out when you copy and paste the code.
Listing 2—Describing a DataList Control in a Web Page
1: <asp:datalist id="DataList1" RepeatLayout="Table"> 2: <HeaderTemplate> 3: <table width="100%"> 4: <tr> 5: <td><!-- Controls --></td> 6: <td>First Name</td> 7: <td>Last Name</td> 8: <td>Email</td> 9: <td>Web Site</td> 10: </tr> 11: </HeaderTemplate> 12: <ItemTemplate> 13: <tr> 14: <td> 15: <asp:LinkButton id="LinkButton1" 16: CommandName="edit" runat="server">Edit</asp:LinkButton></td> 17: <td><%# DataBinder.Eval(Container.DataItem, "FirstName") %></td> 18: <td><%# DataBinder.Eval(Container.DataItem, "LastName") %></td> 19: <td><%# DataBinder.Eval(Container.DataItem, "Email") %></td> 20: <td><%# DataBinder.Eval(Container.DataItem, "URL") %></td> 21: </tr> 22: </ItemTemplate> 23: <EditItemTemplate> 24: <tr> 25: <td> 26: <asp:LinkButton id="Linkbutton2" 27: CommandName="update" runat="server">Update</asp:LinkButton> 28: <asp:LinkButton id="Linkbutton3" 29: CommandName="delete" runat="server">Delete</asp:LinkButton> 30: <asp:LinkButton id="Linkbutton4" 31: CommandName="cancel" runat="server">Cancel</asp:LinkButton> 32: </td> 33: <td> 34: <asp:TextBox id="TextBox1" 35: value='<%# DataBinder.Eval(Container.DataItem, "FirstName") %>' runat="server"> 36: </asp:TextBox> 37: </td> 38: <td> 39: <asp:TextBox id="TextBox2" 40: value='<%# DataBinder.Eval(Container.DataItem, "LastName") %>' runat="server"> 41: </asp:TextBox></td> 42: <td> 43: <asp:TextBox id="TextBox3" 44: value='<%# DataBinder.Eval(Container.DataItem, "Email") %>' runat="server"> 45: </asp:TextBox></td> 46: <td> 47: <asp:TextBox id="TextBox4" 48: value='<%# DataBinder.Eval(Container.DataItem, "URL") %>' runat="server"> 49: </asp:TextBox></td> 50: </tr> 51: </EditItemTemplate> 52: <FooterTemplate> 53: <tr> 54: </tr> 55: </table> 56: </FooterTemplate> 57: </asp:datalist>
The DataList Control
The DataList control is described by the tags <asp:datalist></asp:datalist> on lines 1 and 57 of Listing 2, respectively. All of the code between lines 1 and 57 participates in describing the DataList. The id attribute identifies the DataList as DataList1 and the RepeatLayout attribute indicates that the layout of the DataList will be described by using an HTML table, using the three templates HeaderTemplate, ItemTemplate, and EditItemTemplate.
HeaderTemplate
The HeaderTemplate, defined in lines 2–11, uses the tags <HeaderTemplate></HeaderTemplate>. The column heading for each field is described in this template. The first column (line 5 in Listing 2) contains a comment. This column is used as a placeholder for the LinkButton controls, which will be used to change the mode of the DataList. (We'll come back to LinkButtons in a moment.)
On lines 6–9, the column headings are the literal names of the four main properties defined in our Contact class. Each name is a literal value defined in a table cell. Because the table width is 100% of the web page, each cell will be an evenly divisible fifth of the total space used by the table. The result is a nicely formatted layout even if the page changes size.
ItemTemplate
The ItemTemplate, defined in lines 12–22, describes the view of the DataList when the DataList is in browse mode. The ItemTemplate spans one row and five cells. Each cell derives its value dynamically using the DataBinder. The DataBinder.Eval method uses reflection to evaluate an expression and determine the value represented by the bound item. It's not necessary to understand reflection to use the DataBinder, but to learn much more about reflection you can read my book, Visual Basic .NET Unleashed (shameless plug). Basically, when you bind a data source to the DataList.DataSource property the DataBinder.Eval method will resolve the value of the property.
Lines 15–16 add a LinkButton to the first cell of the ItemTemplate. When you click the LinkButton, the Edit command is invoked. This is a result of the CommandName="edit" property defined in the <asp:LinkButton> control.
EditItemTemplate
The EditItemTemplate, lines 23–51, is more complex than the other templates; the obvious reason is that you have to describe edit controls in the EditItemTemplate to support displaying and modifying the data in the DataList.
Lines 26–31 define three LinkButton controls that display the text Update, Delete, and Cancel. Each LinkButton is associated with the command named by its display text; clicking the Update button invokes the Update command, and so on.
In edit mode, the four remaining cells render a TextBox control. The value of the TextBox control is also derived by the DataBinder. For example, lines 34–35 render a TextBox control and indicate that the value displayed will be derived from the DataBinder. Implicit in this code is the fact that when you modify the TextBox value, the value is stored back into the field associated by the DataBinder with the TextBox:
34: <asp:TextBox id="TextBox1" 35: value='<%# DataBinder.Eval(Container.DataItem, "FirstName") %>'
The tag <asp:TextBox> defines the TextBox control. The identifier indicates that this control can be referred to as TextBox1. The identifier will be useful when you write the code to extract the value of the TextBox. The value attribute is dynamically bound to the FirstName field.
NOTE
When you use the script block <%# %> tag as the value of an attribute, remember to place the script tag between single quotes (' ').
The page is rendered in edit mode exactly as you might expect (see Figure 1). There are three LinkButtons and four TextBox controls rendered horizontally across the full width of the page.
){kind=link}
Figure 1 The DataList at runtime in edit mode, showing the LinkButton and TextBox controls.