Home > 2010 Winter BTI420 > Template-driven data display controls – FormView and ListView

Template-driven data display controls – FormView and ListView


We have used the GridView and DetailsView data display controls for many weeks now. If you want to specify your own layout for a data bound control, use a FormView or ListView.The FormView displays one object at a time. You can configure a pager to navigate through a collection of objects. The ListView displays multiple objects.

Both are template-driven controls. You specify a template, consisting of the markup you want to appear. There are templates for display (ItemTemplate and AlternatingItemTemplate), and for editing (EditItemTemplate etc.).
 

FormView – "one object" template

The following highlights are from the FormView Web Server Control Overview:

 
The FormView control is used to display a single record at a time from a data source. When you use the FormView control, you create templates to display and edit data-bound values. The templates contain controls, binding expressions, and formatting that define the look and functionality of the form.

The FormView control does not specify a pre-defined layout for displaying the record. Instead, you create a template that contains controls to display individual fields from the record. The template contains the formatting, controls, and binding expressions used to create the form.

Creating the FormView User Interface

You build the user interface (UI) for the FormView control by creating templates. You specify different templates for different actions. You create an ItemTemplate template for display, insert, and edit modes. You can control paging using a PagerTemplate template, and you can customize the FormView control’s header and footer using a HeaderTemplate and FooterTemplate, respectively. By using an EmptyDataTemplate, you can also specify a template to display when the data source returns no data.

The item templates that you create for the FormView control specify the content of the control.

For more information, see Creating Templates for the FormView Web Server Control.

 

You should go through the rest of the article yourself.

 

The following is from Creating Templates for the FormView Web Server Control:

 
The primary display template for the FormView control is the ItemTemplate template. The ItemTemplate template displays bound data in read-only mode. The controls included in an ItemTemplate are controls that only display data, such as a Label control.

The template can also contain command buttons to change the FormView control’s mode to insert or edit, or to delete the current record.

You bind controls in the template to data using a data-binding expression that includes the Eval method for one-way data binding.

The ItemTemplate template can include LinkButton controls that change the mode of the FormView control based on the CommandName value. [For a LinkButton:]

  • A CommandName value of New puts the record into insert mode and loads the InsertItemTemplate template, which allows the user to enter values for a new record.
  • [A] CommandName value of Edit to the ItemTemplate template to put the FormView control into edit mode.
  • A button with a CommandName value of Delete can be added to the ItemTemplate template to allow users to delete the current record from the data source.

 

See the March 22 "FormView" example for and implementation. We’ll work with this in class on Wednesday/Friday.

 

Data-Binding Expressions Overview

To use a FormView or ListView, you need to know something about data-binding syntax.

From the Data-Binding Expressions Overview:

 
Data-binding syntax allows you to bind control property values.

Data-binding expressions are contained within <%# and %> delimiters and use the Eval and Bind functions.

The Eval function is used to define one-way (read-only) binding.

The Bind function is used for two-way (updatable) binding.

In addition to calling Eval and Bind methods to perform data binding in a data-binding expression, you can call any publicly scoped code within the <%# and %> delimiters to execute that code and return a value during page processing.

Data-binding expressions are resolved when the DataBind method of a control or of the Page class is called [which happens automatically during the page lifecycle].

At run time, the Eval method calls the Eval method of the DataBinder object, referencing the current data item of the naming container. The naming container is generally the smallest part of the data-bound control that contains a whole record, such as a row. You can therefore use the Eval method only for binding inside templates of a data-bound control.

The Eval method takes the name of a data field and returns a string containing the value of that field from the current record in the data source. You can supply an optional second parameter to specify a format for the returned string. The string format parameter uses the syntax defined for the Format method of the String class.

 

MSDN has a how-to that shows how this works:

How to: Bind to Data in a Templated Control

 

ListView – "multiple object" template

The following highlights are from the ListView Web Server Control Overview:

 
The ASP.NET ListView control enables you to bind to data items that are returned from a data source and display them.

  • You can display data in pages.
  • You can display items individually, or you can group them.

The ListView control displays data in a format that you define by using templates and styles. It is useful for data in any repeating structure. [With] the ListView control, you can [also] enable users to edit, insert, and delete data, and to sort and page data, all without [writing C#] code.

 

Creating Templates for the ListView Control

From the MSDN article:

Items that are displayed by a ListView control are defined by templates.

The ListView control lets you display data as individual items or in groups.

You define the main (root) layout of a ListView control by creating a LayoutTemplate template. The LayoutTemplate must include a control that acts as a placeholder for the data. For example, the layout template might include an ASP.NET Table, Panel, or Label control. (It might also include HTML table, div, or span elements that have a runat attribute that is set to "server".) These controls will contain the output for each item as defined by the ItemTemplate template, which can be grouped in the content that is defined by the GroupTemplate template.

You define content for individual items in the ItemTemplate template. This template typically contains controls that are data-bound to data columns or other individual data elements.

 

You should go through the rest of the article yourself.

 

ListView examples

See the March 22 "ListView…" examples for and implementation. We’ll work with this in class on Wednesday/Friday.

The first example, "ListView", shows Northwind Suppliers data. Here’s how to re-create the example yourself:

  1. Add a ListView to the page
  2. Configure an ObjectDataSource, and point its SELECT method to the desired method; for best results in our example, set the INSERT, UPDATE, and DELETE methods to (None)
  3. On the ListView task panel, choose Configure ListView
  4. Select "Tiled", and "Enable Paging"
  5. Now… go into the markup code to make these changes…
  6. Set the ListView tag’s GroupItemCount value to 3 (for example)
  7. Set the DataPager tag’s PageSize value to 3 (for example)
  8. Save your work; this will create a layout with one "row" of records from the data source, positioned three-across the page

Run the page, and it will look like my code example.

The second example, "ListView Image Gallery", shows pictures from my digital content table. Here’s how I did it (and we may do it in class):

  1. Add a ListView to the page
  2. Configure an ObjectDataSource, and point its SELECT method at the desired method; set the others to (None)
  3. On the ListView task panel, choose Configure ListView
  4. Select "Tiled", and "Enable Paging"
  5. Now… go into the markup code to make these changes…
  6. Set the ListView tag’s GroupItemCount value to 5 (for example)
  7. Set the DataPager tag’s PageSize value to 10 (for example)
  8. Save your work; this will create a layout with two "rows" of records from the data source, positioned three-across the page

Run the page, to be sure it will show data. Now, return to the markup.

Replace the markup in the ItemTemplate and the AlternatingItemTemplate with a standard "img" element. Set its "src" attribute to the image generator page, and in the location where you want to set the ItemID, enter the data binding expression. Here’s what I use in my example:

src="image.aspx?itemid=<%# Eval("ItemID") %>&thumb=yes"

You can extend this example by enclosing the "img" element in an "a" element, so you can open the image thumbnail in its own full size window/tab.

 


Advertisements
Categories: 2010 Winter BTI420
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: