Displaying Data with the Datalist and Repeater Controls

COMP3121 SESSION 5:

MORE DATA-LINKING AND FORMATTING

The previous exercises used the GridView and DetailsView controls to display & insert product & customer data. While these controls make it easy to display, page through, sort, add, edit, and delete data, the appearance is a bit “boxy” and this would not impress potential customers. Appearance should be a consideration with any shopping website… although ass2 won’t be assessed specifically on look-and-feel, some expectation of something presentable will be assumed!

For interacting more flexibly with data, the DataList & Repeater controls are useful. These render their content using templates rather than BoundFields, CheckBoxFields, ButtonFields, etc.

Like GridView (if you didn’t notice when you used it, take another look…), DataList renders as an HTML <table>, but allows for multiple data source records to be displayed per table row.

The Repeater, on the other hand, renders no additional markup than what is explicitly specified, and is therefore an ideal candidate for HTML coding when more precise control is needed. Repeater is therefore useful for customised page development and in particular, for the shopping cart!

Also, although master pages have been used, there has yet to be an example of using Cascading Style Sheets for formatting purposes. The repeater exercise will address this omission.

Exercise 5(a) Displaying Product Information with DataList

As already stated, DataList’s rendered output depends upon templates rather than BoundFields, etc. However, it is designed to display a set of records rather than just one. To bind product information from a database to a DataList:

1. Open an existing solution and create a new .aspx page. Don’t bother with a site master for now…

2. Drag a DataList from the Toolbox onto the Designer. Quick look at code in source view. Now, back to design mode. From the DataList’s smart tag, add a new DataSource and configure it to use the access database, and all fields from the products table. Visual Studio automatically creates an ItemTemplate in the DataList that displays the name and value of each data field returned by the data source:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID" DataSourceID="AccessDataSource1" EnableViewState="False">

</ItemTemplate>

</asp:DataList>

<asp:AccessDataSource ID="AccessDataSource1" runat="server"

DataFile="~/App_Data/productdata.mdb" SelectCommand="SELECT * FROM [Products]">

</asp:AccessDataSource>

3. Back to design mode… before specifying any DataList’s templates, the Designer displays the displayed data screen as a grey box.

4. Now choose item template, and then end template editing. The design now encompasses the design template. Take a look in source code mode. It should look, depending on fieldnames, something like:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID" DataSourceID="AccessDataSource1" EnableViewState="False">

ProductID: <asp:Label ID="ProductIDLabel" runat="server"

Text='<%# Eval("ProductID") %>' /<br />

Name:

<asp:Label ID="ProductNameLabel" runat="server"

Text='<%# Eval("ProductName") %>' /<br />

Description:

<asp:Label ID="DescriptionLabel" runat="server"

Text='<%# Eval("Description") %>' /<br />

CategoryID:

<asp:Label ID="PriceLabel" runat="server"

Text='<%# Eval("Price") %>'/>

</ItemTemplate>

</asp:DataList>

4. Look at the source code again – notice the locations of the code that will present the values of the datafields, within <ItemTemplate>. Unlike in GridView or DetailsView, the appearance of a DataList template can easily be improved to satisfy the needs of the design:

e.g. it is possible to modify the code to:

· display only selected records without changing the underlying SQL query

· display the name in an <h4> heading and lay out the remaining fields using a <table> beneath the heading.

Two options are therefore available to you for removing a field from the display, and inserting a table (design mode & code mode)

(your choice…)

If using design mode:

· use the Tables menu to create the table and then populate the cells

· use the Edit Templates option in design view to create the product display (always a good option if you don’t feel comfortable writing code) and Table menu option to create the table and add the data

Note: Label controls have been used in the code, with Text property assigned to the value of the databinding syntax. In practice, these could have been omitted altogether, typing in just the databinding syntax

<%# Eval("CategoryName") %>

instead of using:

<asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />

(both have the same effect!)

However, leaving in the Label Web controls provides an easier means for formatting the data based on the data, and the “simpler” solution complicates matters with “Edit Templates” in the Designer, which uses the full syntax.

This complication only applies to DataList! The Repeater requires that the template’s contents be edited from Source view. Consequently, when creating Repeater templates the Label Web controls will be left out, and the much shorter eval statements will be appropriate. This is obviously quicker, if coding by hand.

Exercise 5(b): Exploring other DataList Templates in DataList

When a template is chosen in Design view, DataList adds the relevant HTML code. However, DataList templates are not bound to data so any databinding syntax that attempted to access bound data would return a blank string…

However, these templates are useful for formatting, and, in addition to the ItemTemplate, the DataList supports six other optional templates:

HeaderTemplate if provided, adds a header row to the output and is used to render this row

AlternatingItemTemplate used to render alternating items

SelectedItemTemplate used to render the selected item; the selected item is the item whose index corresponds to the DataList’s Selected Index property

EditItemTemplate used to render the item being edited

SeparatorTemplate - adds a separator between each item and is used to render this separator

FooterTemplate - adds a footer row to the output and is used to render this row

1. From the Designer, click on the Edit Templates link in the DataList’s smart tag, choosing the Header Template from the drop-down list, and type in the text after picking the Heading 3 option from the style drop-down list (on toolbar, showing “none” by default). This should display “Product Information” at the top in an <h3> heading.

This could also have been hand coded by entering

<HeaderTemplate> <h3>Product Information</h3> </HeaderTemplate>

within the <asp:DataList> tags.

2. To add a bit of space between each product listing, choose a SeparatorTemplate, but don’t add any text yet. Now go back into source mode and create the effect of a line between each section, using the horizontal rule tag (<hr>):

Note: Like the HeaderTemplate and FooterTemplates, the SeparatorTemplate is not bound to any record from the data source and therefore cannot directly access the data source records bound to the DataList.

3. Now run the page. Note the header row and the line between each product listing. Try investigating templates a little further… e.g. add a footer template. Check the source code generated before running the page.

One purpose of these exercises has been to introduce you to the syntax of the various templates, which DataList adds in the right place for you. The next exercise will involve the Repeater control which also uses templates but in a slightly more limited way.

Exercise 5(c): The Repeater Control, and use of HTML

The Repeater control is necessary if total control over the HTML is required. .

As with DataList, formatting is based on templates (only five this time):

· HeaderTemplate if provided, adds the specified markup before the items

· ItemTemplate used to render items

· AlternatingItemTemplate if provided, used to render alternating items

· SeparatorTemplate if provided, adds the specified markup between each item

· FooterTemplate - if provided, adds the specified markup after the items

However, unlike DataLIst all of these templates need to be completely hard coded (P.S. or cut-and-pasted from a DataList control)

1. Now, begin another new .aspx page, and drag a repeater control within a div section.

2. Now, create a bulleted list. The good news (for those who don’t like to hard code) is that the toolbox also contains the BulletedList control, which can be bound to a data source control in order to display a simple bulleted list. Use this, and link the control with an appropriate data source. Simply indicate the data field to display as the text for each list item, and let the wizard do all the coding. Take a quick look in source mode, and then CTRL-F5 before moving on…

3. The Repeater serves as a “catch all data” Web control, which can be used where no other control can generate the code. For example, it is useful to choose the categories displayed in a single-row HTML <table> with each category displayed as a column in the table. This will be very useful when creating product pages with parameter passing as well as the shopping cart page.

Now, go back to the previous .aspx page containing the DataList. Drag a Repeater control onto the page in design mode, above the Product Information DataList. Click on the smart tag: Choose Data Source. Opt to create a new DataSource and configure it to link to the products database as before…

4. Look at the code. Unlike the DataList, Visual Studio does not automatically create an ItemTemplate for the Repeater after binding it to a data source. Furthermore, the Repeater’s templates cannot be configured through the Designer and must be coded… Use table menu to produce a single row table with three columns. Add contents category 1, category 2, etc., to the cells and switch to code mode. The resulting table should look like:

<table>

<tr>

<td>Category 1</td>

<td>Category 2</td>

<td>Category 3</td>

</tr>

</table>

5. To complete the display, the relevant templates have to be added manually in exactly the right places. This is very important, and easily messed up! Go to Source mode and type in the following syntax:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource2" EnableViewState="False">

</HeaderTemplate>

</ItemTemplate>

</table>

</FooterTemplate>

</asp:Repeater>

The Repeater generates the precise markup as specified by its templates. Note the structure carefully… unless you stick to this structure, compile errors will be generated when you create the pages that will build towards assignment 2.

Exercise 5(d): Improving the Appearance of the Repeater via CSS & ItemTemplates

The beauty of cascading style sheets is that they can be applied quite specifically with HTML code. In this exercise, an existing CSS will be added to your project, and then css styles will be added to the page in a controlled way to control the display of the bound data.

1. First of all copy the css file styles.css from my COMP3121 website to your project.

2. Now, it should be possible to use that css file to make the category columns alternate background colours by using different CSS classes for different table data (td) sections. To accomplish this, first “include” the css file to the project. Now, assign the RowStyle CSS class to each Repeater item and the AlternatingRowStyle CSS class to each alternating Repeater item through the use of ItemTemplate and AlternatingItemTemplate:

<%# Eval("CategoryName") %>

</td>

</ItemTemplate>

<%# Eval("CategoryName") %>

</td>

</AlternatingItemTemplate>

3. Now add a header row to the output with the text “Product Categories”. The number of columns the resulting <table> will depend on the number of fields you have used and is unknown. Therefore, the simplest way to generate a header row that is guaranteed to span all columns is to use two nested <table>s.

The first <table> will contain two rows the header row and a row that will contain the second, single-row <table> that has a column for each category in the system:

<th>Product Categories</th> </tr> <tr> <td>

<td>Category 1</td>

<td>Category 2</td>

<td>Category N</td>

</tr> </table>

</td> </tr>

</table>

4. Now, try the following HeaderTemplate and FooterTemplate syntax:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource2" EnableViewState="False">

<HeaderTemplate> <table cellpadding="0" cellspacing="0" style="border: solid 1px black;"> <tr> <th class="HeaderStyle">Product Categories</th> </tr> <tr> <td> <table cellpadding="4" cellspacing="0"> <tr> </HeaderTemplate>

<%# Eval("CategoryName") %</td> </AlternatingItemTemplate>

</asp:Repeater>

Save the file, and run to see if this achieves the desired effect: Category Columns alternating in Background colour and including a Header Row.

This is an ambitious exercise that is intended to focus you on using The Repeater with templates and tables so you get the hang of the syntax. At this stage, it is more important that you get no syntax errors than you get a table structure that holds products in actual categories.

Summary

The DataList or Repeater controls are more flexible than GridView and DetailsView because they can display a set of records using templates instead of BoundFields, CheckBoxFields, etc.

The DataList renders as an HTML <table> that, by default, displays each data source record in a single table row, just like a GridView with a single TemplateField, but it does permit multiple records to be displayed per table row.

The Repeater, on the other hand, strictly emits the markup specified in its templates; it does not add any additional markup and therefore is commonly used to display data in HTML elements other than a <table> (such as in a bulleted list).

What Else to do…

This Repeater exercise has prepared you for creating the shopping cart page.

By the time of the week 6 practical (after study week, apart from getting assignment 1 completed), you should have:

1. designed your database complete with all four entities and appropriate attributes (you are doing yourself a favour here, because the logical data model is required for the write-up of assignment 2).

2. implemented this database in full on Access, by