The ASP.Net ListView control in Visual Studio 'Orcas'

  • Article

When 'ASP.Net AJAX' (formerly codenamed Atlas) was first released for preview back in Sep 2005, one of the controls that was released as part of the preview was the 'ListView' client-side control - the control created the rendering on the fly on the client based on xml-script and the html skeletons defined on the page for the control. The data binding was also done on the client and data was fetched asynchronously using the ClientDataSource component. The server-side ListView is very different from the client-side control. The goals for creating a server-side data presentation control were multiple - mainly

  • leverage existing datasource controls, support declarative binding and common data operations such as insert, edit, delete, sort, page etc.
  • a fully customizable UI with the support of templates
  • WYSIWYG previews and rich design-time support in Visual Studio
  • can be extended to build more complex UI.

Rendering

ListView allows for fully customizable UI rendering with the use of LayoutTemplate. This also obviates the need for having certain templates such as header, footer, and pager. The EmptyDataTemplate can be used to configure the view when no data is available to the ListView.

The EmptyDataTemplate when defined takes over the control rendering when the ListView is empty. It renders by itself and not inside the LayoutTemplate.

The templates follow the following general hierarchy

LayoutTemplate [root template, container for ListView rendering]

            - GroupTemplate [Optional, required for tiled layout]

                        - ItemTemplate

                        - AlternatingItemTemplate

                        - EditItemTemplate

                        - InsertItemTemplate

                        - ItemSeparatorTemplate

                        - EmptyItemTemplate

                        - SelectedItemTemplate

            - GroupSeparatorTemplate

or

EmptyDataTemplate

The id property is added to UI elements to define where this rendering would come from – possible values for the id are – ‘GroupContainer’ or ‘ItemContainer’. This implies the element marked as a GroupContainer will be used as the container for instantiating the GroupTemplate and the element marked as itemContainer will be used as the container for instantiating the ItemTemplates.

The GroupSeparatorTemplate is displayed at the end of each GroupTemplate except the last one. The ItemSeparatorTemplate is displayed at the end of each ItemTemplate except the last one. The EmptyItemTemplate is displayed for filling up dummy columns when building a xhtml conformant layout.

Styling can be handled by applying css to the various html elements defining the various ListView template. ListView comes with certain pre-defined configurations for styling and layouts and these can be selected inside of Visual Studio via the 'Configure ListView' task from the chrome.

DataBinding and Common Data Operations

 

ListView provides databinding model akin to V2.0 data bound controls. Developers can leverage declarative databinding by setting the DataSourceID on the control or can employ the DataSource property programmatically. Apart from Select, Update and Delete which are available with GridView - the listView also provides for an Insert option and the InsertItemTemplate can be displayed by setting the InsertItemPosition property on the ListView.

 

The control also provides for Sorting and Paging capabilities though for Paging the DataPager control should be used in conjunction with the ListView.

This is a simple overview of the control. I will be writing more on specific topics in detail in the coming weeks.

Please post comments or questions regarding the control to this blog.

Thanks,

Kashif