Resources

Data Bound Controls in ASP.NET websites

Can be classified as

  • simple - inherit from ListControl
  • composite - inherit from CompositeDataBoundControl, e.g. GridView, DetailsView, FormView
  • hierarchical - Menu and TreeView controls
  • visualisation - ChartControl

BaseDataBoundControl (inherits from WebControl) is first control in hierarchy and contains DataSource and DataSourceID used in data binding.

  • DataSource - object that data bound control uses to retrieve data items
  • DataSourceID - introduced later to allow binding by control ID

If both DataSource and DatsSourceID sre set the DataSourceID takes precedence.

Bind data bound control to any data implementing IEnumerable, IListSource, IDataSource, IHierarchicalDatasource.

Automatically connects at run-ti,e via DataBind method - can call method to force re-binding to take place.

Mapping Fields to Templates

Templated binding can be used on controls that support templates.

Template control has no default UI, simply provides mechanism for binding to data.

Developer provides UI in form of templates.

Templates can contain declarative elements, such as HTML. Can also contain ASP.NET data-binding syntax to insert data from data source.

Templated controls include GridView, DetailsView and FormView.

Typically allow templates for:

  • HeaderTemplate - rendered at top of control
  • FooterTemplate - rendered at bottom of control
  • ItemTemplate - rendered for each row
  • AlternatingTemplate -use to render every other row
  • SelectedItemTemplate - renders a row that has been selected
  • SeparatorTemplate - indicates separation between rows
  • EditItemTemplate - renders a row when it is being edited

DataBinder Class

Provides granular control over which field get bound to which controls.

Provides Eval() method to assist in binding.

Eval reflects on DataItems underlying type to retrieve its meta data.

To bind to Vin property of Car object:

<%# Eval("Vin") %>

Can also modify how bound data is displayed, e.g. to provide currency formatting:

<%# Eval("Price", "{0:C}") %>

Eval does not support read-write data binding - can't be used in edit or insert scenarios.

The Bind() method can be used for two way binding.

Bind() works in similar fashion to Eval() but does not work with all controls - only those that support read, insert, update and delete (e.g. GridView, DetailsView, FormView).

Simple Data-Bound Controls

Not designed to work with pages of data or provide complicated editing,

Provide a list of items on which user can operate.

Based on abstract ListControl base class.

ListControl exposed Items collection which contains ListItem objects.

Each ListItem has Text property displayed to user and Value property posted back to server.

Can add items to Items collection via code or markup.

ListControl can be bound to data sources.

Can specify which fields will bind to the Text and Value properties either though declarative markup or the DataTextField and DataValueField properties.

<asp:ListBox ID="ListBox1" runat="server" DataSourceID="SqlDataSource1" DataTextField="CompanyName" DataValueField="ShipperID" />

SelectedIndex property gets/sets index of selected item in ListControl.

The AppendDataBoundItems controls whether items from the data source are added to or replace those currently held in the ListControl. When false the current contents are replaced.

DropDownList Control

Displays list and allows user to make a single selection.

SelectedValue indicates which entry has been chosen.

ListBoxControl

Displays longer list and allows user to (optionally via SelectionMode property) select multiple values.

Rows property controls how many rows are displayed on screen at a time.

Determine which items selected by iterating over Items collection and examining the Selected property for each element.

CheckBoxList and RadioButtonList

Display lists allowing users to make selections via a checkbox.

CheckBoxList allows for multiple selections.

RadioButtonList supports single selection.

The RepeatColumns property indicates number of columns to be displayed.

The RepeatDirection (Vertical by default) indicates whether data should be rendered horizontally or vertically.

The RadioButtonList exposed SelectedValue to indicate which item has been selected.

BulletedList

Displays list as ordered <ol> or unordered list <ul> in HTML.

BulletStyle property controls whether rendered as bulleted (disc, circle or square) or numbered (LowerAlpha, UpperAlpha, LowerRoman, UpperRoman).

FirstBulletNumber controls starting number of sequence.

DisplayMode can take a value of Text, LinkButton or HyperLink - latter two causing postback to raise a Click event.

Composite Data-Bound Controls

Display several related controls containing bound data. The CompositeDataBoundControl base class implements INamingContainer which act as as a container for the related controls.

GridView

Displays data in tabular form, rendered as HTML table.

Easy to configure paging, sorting and editing without much supporting code.

Contains collection of GridViewRow (rows) and collection of DataControlField (columns).

Each DataControlField (column) contains method to initialise cell in a row via InitialzeCell method.

GridView supports InitializeRow method for creating new GridViewRow and initialising its cells.

The DataControlField supports class hierarchy, e.g. ButtonField, CommandField, ImageField, HyperLinkField, etc.

Formatting GridView

Can use styles to format GridView, these include overall GridViewStyle, HeaderStyle, FooterStyle, RowStyle, etc.

Can set style at design time, or in code via RowCreated (raised first and before data available) and RowDataBound (raised when data bound to row) events.

Can use these events to override design time styles.

DetailsView

Displays values of one record at a time in an HTML table.

Allows records to be edited, deleted and inserted.

If AllowPaging property is true then support for navigation is enabled.

Often used in conjunction with other controls, such as GridView, ListBox or DropDownLost for a master-detail form layout.

Does not directly support sorting, can use DataSource control to manage this.

Same formatting options as GridView.

FormView

Displays single record from database, but not within pre-defined HTML table.

Developers create template that defines how data is displayed.

Can define different templates for viewing, editing and updating records.

Define template by placing markup within it and binding any code within this markup:

<asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1">
    <ItemTamplate>
        Shipper Identification: <asp:Label runat="server" ID="Label1" Text='<%# Eval("ShipperID") %>' />
    </ItemTamplate>
</asp:FormView>

Repeater Control

Uses templates to define custom binding.

Does not show data as individual rows, instead repeats rows as specified in template.

Read-only template - i.e. only supports ItemTemplate, no support for editing, insertion, etc.

ListView Control

Like Repeater uses templates for data display.

Supports additional templates for more work scenarios.

LayoutTemplate provides overall layout within which rows of data are displayed.

Rows of data defined by ItemTemplate.

The GroupTemplate allows data to be grouped, the GroupItemCount indicating number of items within group. User can then page through the groups.

The ItemSeparatorTemplate defines content between the rows.

Supports edit, insert and delete operations.

Chart Control

Displays data using chart visualisation (25 different types).

When run on server a .png is generated and sent to browser as part of response.

A Series element has a ChartTpe that defines the visualisation.

A ChartArea indicates areas on chart such as x and y axis.

DataList Control

Works like Repeater control.

Repeats data for each row in data set based on provided template.

Laid out within various HTML structures, e.g. options for horizontal or vertical layout, how data repeated - as flow or table layout, etc.

No direct support for data editing - raises events which you can handle. To enable these events add Button control to template and set its CommandName to edit, delete, update or cancel.

Hierarchical Data-Bound Controls

HierarchicalDataBoundControl acts as base for controls rendering data in hierarchical fashion.

TreeView Control

Displays hierarchical data such as file list, table of contents, etc. in a tree structure.

Each entry in tree = node.

Nodes bound to XML, tabular or relational data.

Provides site navigation when used with SiteMapDataSource.

Nodes represented as TreeNode object.

Nodes can be both parents and children.

Node with no children = leaf node.

Can have multiple root nodes within tree structure.

Each TreeNode has Text property to display and Value property to use when posting back data.

If NavigateUrl property of TreeNode contains value then clicking on the TreeNode navigates to specified location.

Population

Populate by static data or data binding.

For static population place <Nodes> element within <TreeView> element. Within the <Nodes> add <TreeNode> elements.

Can bind to any data source supporting IHierarchicalDataSource, e.g. XmlDataSource or SiteMapDataSource via the DataSourceID property.

Can bind XmlDocument or DataSet containing DataRelation objects via DataSource property.

By default will display element name, to display other property need to add following to code behind:

public partial class TreeView_Control : System.Web.UI.Page
{  
    protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)  
    {  
        Response.Wrtie("Value:" + TreeView1.SelectedNode.Value);  
    }  
}

Menu Control

Displays hierarchical data as a menu.

Can populate via static data or using binding.

Static data represented by <Items> element within <Menu>. Individual menu elements are represented by the <MenuItem> element within the <Items>.

Exposes a DataBindings property that is collection of MenuITemBinding objects. These define binding between data item and menu item

Downloads