Data Bound Controls

by Microsoft

Most ASP.NET applications rely on some degree of data presentation from a back-end data source. Data-bound controls have been a pivotal part of interacting with data in dynamic Web applications. ASP.NET 2.0 introduces some substantial improvements to data-bound controls, including a new BaseDataBoundControl class and declarative syntax.

Most ASP.NET applications rely on some degree of data presentation from a back-end data source. Data-bound controls have been a pivotal part of interacting with data in dynamic Web applications. ASP.NET 2.0 introduces some substantial improvements to data-bound controls, including a new BaseDataBoundControl class and declarative syntax.

The BaseDataBoundControl acts as the base class for the DataBoundControl class and the HierarchicalDataBoundControl class. In this module, we will discuss the following classes that derive from DataBoundControl:

• AdRotator
• List controls
• GridView
• FormView
• DetailsView

We will also discuss the following classes that derive from HierarchicalDataBoundControl class:

• TreeView
• Menu
• SiteMapPath

DataBoundControl Class

The DataBoundControl class is an abstract class (marked MustInherit in VB) used to interact with tabular or list-style data. The following controls are some of the controls that derive from DataBoundControl.

AdRotator

The AdRotator control allows you to display a graphic banner on a Web page that is linked to a specific URL. The graphic that is displayed is rotated using properties for the control. The frequency of a particular ad displaying on a page can be configured using the Impressions property and ads can be filtered using keyword filtering.

AdRotator controls use either an XML file or a table in a database for data. The following attributes are used in XML files to configure the AdRotator control.

ImageUrl

The URL of an image to display for the ad.

NavigateUrl

The URL that the user should be taken to when the ad is clicked. This should be URL encoded.

AlternateText

The alternate text that is displayed in a tooltip and read by screen readers. Also displays when the image specified by ImageUrl is not available.

Keyword

Defines a keyword that can be used when using keyword filtering. If specified, only those ads with a keyword matching the keyword filter will be displayed.

Impressions

A weighting number that determines how often a particular ad is likely to appear. It is relative to the impression of other ads in the same file. The maximum value of the collective impressions for all ads in an XML file is 2,048,000,000 1.

Height

The height of the ad in pixels.

Width

The width of the ad in pixels.

[!NOTE] The Height and Width attributes override the height and width for the AdRotator control itself.

A typical XML file might look like the following:

[!code-xmlMain]

   1:  <?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>

In the above example, the ad for Contoso is twice as likely to appear as the ad for the ASP.NET Web site because of the value for the Impressions attribute.

To display ads from the above XML file, add an AdRotator control to a page and set the AdvertisementFile property to point to the XML file as shown below:

[!code-aspxMain]

   1:  <asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />

If you choose to use a database table as the data source for your AdRotator control, you will first need to set up a database using the following schema:

In cases where you already have a database with a different schema, you can use the AlternateTextField, ImageUrlField, and NavigateUrlField properties to map the AdRotator attributes to your existing database. To display the data from the database in the AdRotator control, add a data source control to the page, configure the connection string for the data source control to point to your database, and set the AdRotator control???s DataSourceID property to the ID of the data source control. In cases where you have a need to configure AdRotator ads programmatically, use the AdCreated event. The AdCreated event takes two parameters; one an object, and the other an instance of AdCreatedEventArgs. The AdCreatedEventArgs is a reference to the ad that is being created.

The following code snippet sets the ImageUrl, NavigateUrl, and AlternateText for an ad programmatically:

[!code-csharpMain]

   1:  protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }

List Controls

List controls include the ListBox, DropDownList, CheckBoxList, RadioButtonList, and BulletedList. Each of these controls can be data bound to a data source. They use one field in the data source as the display text and can optionally use a second field as the value of an item. Items can also be added statically at design-time, and you can mix static items and dynamic items added from a data source.

To data bind a list control, add a data source control to the page. Specify a SELECT command for the data source control and then set the DataSourceID property of the list control to the ID of the data source control. Use the DataTextField and DataValueField properties to define the display text and the value for the control. Additionally, you can use the DataTextFormatString property to control the appearance of the display text as follows:

GridView

The GridView control allows for tabular data display and editing using a declarative approach and is the successor to the DataGrid control. The following features are available in the GridView control.

• Binding to data source controls, such as SqlDataSource.
• Built-in sorting capabilities.
• Built-in updating and deleting capabilities.
• Built-in paging capabilities.
• Built-in row selection capabilities.
• Programmatic access to the GridView object model to dynamically set properties, handle events, and so on.
• Multiple key fields.
• Multiple data fields for the hyperlink columns.
• Customizable appearance through themes and styles.

Column Fields

Each column in the GridView control is represented by a DataControlField object. By default, the AutoGenerateColumns property is set to true, which creates an AutoGeneratedField object for each field in the data source. Each field is then rendered as a column in the GridView control in the order that each field appears in the data source. You can also manually control which column fields appear in the GridView control by setting the AutoGenerateColumns property to false and then defining your own column field collection. Different column field types determine the behavior of the columns in the control.

The following table lists the different column field types that can be used.

To define a column field collection declaratively, first add opening and closing <Columns> tags between the opening and closing tags of the GridView control. Next, list the column fields that you want to include between the opening and closing <Columns> tags. The columns specified are added to the Columns collection in the order listed. The Columns collection stores all the column fields in the control and allows you to programmatically manage the column fields in the GridView control.

Explicitly declared column fields can be displayed in combination with automatically generated column fields. When both are used, explicitly declared column fields are rendered first, followed by the automatically generated column fields.

Binding to Data

The GridView control can be bound to a data source control (such as SqlDataSource, ObjectDataSource, and so on), as well as any data source that implements the System.Collections.IEnumerable interface (such as System.Data.DataView, System.Collections.ArrayList, or System.Collections.Hashtable). Use one of the following methods to bind the GridView control to the appropriate data source type:

• To bind to a data source control, set the DataSourceID property of the GridView control to the ID value of the data source control. The GridView control automatically binds to the specified data source control and can take advantage of the data source control???s capabilities to perform sorting, updating, deleting, and paging functionality. This is the preferred method to bind to data.
• To bind to a data source that implements the System.Collections.IEnumerable interface, programmatically set the DataSource property of the GridView control to the data source and then call the DataBind method. When using this method, the GridView control does not provide built-in sorting, updating, deleting, and paging functionality. You need to provide this functionality yourself.

Data Operations

The GridView control provides many built-in capabilities that allow the user to sort, update, delete, select, and page through items in the control. When the GridView control is bound to a data source control, the GridView control can take advantage of the data source control???s capabilities and provide automatic sorting, updating, and deleting functionality.

[!NOTE] The GridView control can provide support for sorting, updating, and deleting with other types of data sources; however, you will need to provide an appropriate event handler with the implementation for these operations.

Sorting allows the user to sort the items in the GridView control with respect to a specific column by clicking on the column???s header. To enable sorting, set the AllowSorting property to true.

The automatic updating, deleting, and selection functionalities are enabled when a button in a ButtonField or TemplateField column field, with a command name of ???Edit???, ???Delete???, and ???Select???, respectively, is clicked. The GridView control can automatically add a CommandField column field with an Edit, Delete, or Select button if the AutoGenerateEditButton, AutoGenerateDeleteButton, or AutoGenerateSelectButton property is set to true, respectively.

[!NOTE] Inserting records into the data source is not directly supported by the GridView control. However, it is possible to insert records by using the GridView control in conjunction with the DetailsView or FormView control.

Instead of displaying all the records in the data source at the same time, the GridView control can automatically break the records up into pages. To enable paging, set the AllowPaging property to true.

Customizing the User Interface

You can customize the appearance of the GridView control by setting the style properties for the different parts of the control. The following table lists the different style properties.

You can also show or hide different parts of the control. The following table lists the properties that control which parts are shown or hidden.

Events

The GridView control provides several events that you can program against. This allows you to run a custom routine whenever an event occurs. The following table lists the events supported by the GridView control.

FormView

The FormView control is used to display a single record from a data source. It is similar to the DetailsView control, except it displays user-defined templates instead of row fields. Creating your own templates gives you greater flexibility in controlling how the data is displayed. The FormView control supports the following features:

• Binding to data source controls, such as SqlDataSource and ObjectDataSource.
• Built-in inserting capabilities.
• Built-in updating and deleting capabilities.
• Built-in paging capabilities.
• Programmatic access to the FormView object model to dynamically set properties, handle events, and so on.
• Customizable appearance through user-defined templates, themes, and styles.

Templates

For the FormView control to display content, you need to create templates for the different parts of the control. Most templates are optional; however, you must create a template for the mode in which the control is configured. For example, a FormView control that supports inserting records must have an insert item template defined. The following table lists the different templates that you can create.

Input controls in the edit item template and insert item template can be bound to the fields of a data source by using a two-way binding expression. This allows the FormView control to automatically extract the values of the input control for an update or insert operation. Two-way binding expressions also allow input controls in an edit item template to automatically display the original field values.

Binding to Data

The FormView control can be bound to a data source control (such as SqlDataSource, AccessDataSource, ObjectDataSource and so on), or to any data source that implements the System.Collections.IEnumerable interface (such as System.Data.DataView, System.Collections.ArrayList, and System.Collections.Hashtable). Use one of the following methods to bind the FormView control to the appropriate data source type:

• To bind to a data source control, set the DataSourceID property of the FormView control to the ID value of the data source control. The FormView control automatically binds to the specified data source control and can take advantage of the data source control???s capabilities to perform inserting, updating, deleting, and paging functionality. This is the preferred method to bind to data.
• To bind to a data source that implements the System.Collections.IEnumerable interface, programmatically set the DataSource property of the FormView control to the data source and then call the DataBind method. When using this method, the FormView control does not provide built-in inserting, updating, deleting, and paging functionality. You need to provide this functionality by using the appropriate event.

Data Operations

The FormView control provides many built-in capabilities that allow the user to update, delete, insert, and page through items in the control. When the FormView control is bound to a data source control, the FormView control can take advantage of the data source control???s capabilities and provide automatic updating, deleting, inserting, and paging functionality. The FormView control can provide support for update, delete, insert, and paging operations with other types of data sources; however, you must provide an appropriate event handler with the implementation for these operations.

Because the FormView control uses templates, it does not provide a way to automatically generate command buttons to perform updating, deleting, or inserting operations. You must manually include these command buttons in the appropriate template. The FormView control recognizes certain buttons that have their CommandName properties set to specific values. The following table lists the command buttons that the FormView control recognizes.

Unlike the Delete button (which deletes the displayed record immediately), when the Edit or New button is clicked, the FormView control goes into edit or insert mode respectively. In edit mode, the content contained in the EditItemTemplate property is displayed for the current data item. Typically, the edit item template is defined such that the Edit button is replaced with an Update and a Cancel button. Input controls that are appropriate for the field???s data type (such as a TextBox or a CheckBox control) are also usually displayed with a field???s value for the user to modify. Clicking the Update button updates the record in the data source, while clicking the Cancel button abandons any changes.

Likewise, the content contained in the InsertItemTemplate property is displayed for the data item when the control is in insert mode. The insert item template is typically defined such that the New button is replaced with an Insert and a Cancel button, and empty input controls are displayed for the user to enter the values for the new record. Clicking the Insert button inserts the record in the data source, while clicking the Cancel button abandons any changes.

The FormView control provides a paging feature, which allows the user to navigate to other records in the data source. When enabled, a pager row is displayed in the FormView control that contains the page navigation controls. To enable paging, set the AllowPaging property to true. You can customize the pager row by setting the properties of objects contained in the PagerStyle and the PagerSettings property. Instead of using the built-in pager row UI, you can create your own UI by using the PagerTemplate property.

Customizing the User Interface

You can customize the appearance of the FormView control by setting the style properties for the different parts of the control. The following table lists the different style properties.

Events

The FormView control provides several events that you can program against. This allows you to run a custom routine whenever an event occurs. The following table lists the events supported by the FormView control.

DetailsView

The DetailsView control is used to display a single record from a data source in a table, where each field of the record is displayed in a row of the table. It can be used in combination with a GridView control for master-detail scenarios. The DetailsView control supports the following features:

• Binding to data source controls, such as SqlDataSource.
• Built-in inserting capabilities.
• Built-in updating and deleting capabilities.
• Built-in paging capabilities.
• Programmatic access to the DetailsView object model to dynamically set properties, handle events, and so on.
• Customizable appearance through themes and styles.

Row Fields

Each data row in the DetailsView control is created by declaring a field control. Different row field types determine the behavior of the rows in the control. Field controls derive from DataControlField. The following table lists the different row field types that can be used.

By default, the AutoGenerateRows property is set to true, which automatically generates a bound row field object for each field of a bindable type in the data source. Valid bindable types are String, DateTime, Decimal, Guid, and the set of primitive types. Each field is then displayed in a row as text, in the order in which each field appears in the data source.

Automatically generating the rows provides a quick and easy way to display every field in the record. However, to make use of the DetailsView control???s advanced capabilities you must explicitly declare the row fields to include in the DetailsView control. To declare the row fields, first set the AutoGenerateRows property to false. Next, add opening and closing <Fields> tags between the opening and closing tags of the DetailsView control. Finally, list the row fields that you want to include between the opening and closing <Fields> tags. The row fields specified are added to the Fields collection in the order listed. The Fields collection allows you to programmatically manage the row fields in the DetailsView control.

[!NOTE] Automatically generated row fields are not added to the Fields collection.

Binding to Data

The DetailsView control can be bound to a data source control, such as SqlDataSource or AccessDataSource, or to any data source that implements the System.Collections.IEnumerable interface, such as System.Data.DataView, System.Collections.ArrayList and System.Collections.Hashtable.

Use one of the following methods to bind the DetailsView control to the appropriate data source type:

• To bind to a data source control, set the DataSourceID property of the DetailsView control to the ID value of the data source control. The DetailsView control automatically binds to the specified data source control. This is the preferred method to bind to data.
• To bind to a data source that implements the System.Collections.IEnumerable interface, programmatically set the DataSource property of the DetailsView control to the data source and then call the DataBind method.

Security

This control can be used to display user input, which might include malicious client script. Check any information that is sent from a client for executable script, SQL statements, or other code before displaying it in your application. ASP.NET provides an input request validation feature to block script and HTML in user input.

Data Operations

The DetailsView control provides built-in capabilities that allow the user to update, delete, insert, and page through items in the control. When the DetailsView control is bound to a data source control, the DetailsView control can take advantage of the data source control???s capabilities and provide automatic updating, deleting, inserting, and paging functionality.

The DetailsView control can provide support for update, delete, insert, and paging operations with other types of data sources; however, you must provide the implementation for these operations in an appropriate event handler.

The DetailsView control can automatically add a CommandField row field with an Edit, Delete, or New button by setting the AutoGenerateEditButton, AutoGenerateDeleteButton, or AutoGenerateInsertButton properties to true, respectively. Unlike the Delete button (which deletes the selected record immediately), when the Edit or New button is clicked, the DetailsView control goes into edit or insert mode, respectively. In edit mode, the Edit button is replaced with an Update and a Cancel button. Input controls that are appropriate for the field???s data type (such as a TextBox or a CheckBox control) are displayed with a field???s value for the user to modify. Clicking the Update button updates the record in the data source, while clicking the Cancel button abandons any changes. Likewise, in insert mode, the New button is replaced with an Insert and a Cancel button, and empty input controls are displayed for the user to enter the values for the new record.

The DetailsView control provides a paging feature, which allows the user to navigate to other records in the data source. When enabled, page navigation controls are displayed in a pager row. To enable paging, set the AllowPaging property to true. The pager row can be customized using the PagerStyle and PagerSettings properties.

Customizing the User Interface

You can customize the appearance of the DetailsView control by setting the style properties for the different parts of the control. The following table lists the different style properties.

Events

The DetailsView control provides several events that you can program against. This allows you to run a custom routine whenever an event occurs. The following table lists the events supported by the DetailsView control. The DetailsView control also inherits these events from its base classes: DataBinding, DataBound, Disposed, Init, Load, PreRender, and Render.

The Menu Control

The Menu control in ASP.NET 2.0 is designed to be a full-featured navigation system. It can be databound easily to hierarchical data sources such as the SiteMapDataSource.

A Menu controls structure can be defined declaratively or dynamically and consists of a single root node and any number of sub-nodes. The following code declaratively defines a menu for the Menu control.

[!code-aspxMain]

   1:  <asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>

In the above example, the Home.aspx node is the root node. All other nodes are nested within the root node at various levels.

There are two types of menus that the Menu control can render; static menus and dynamic menus. Static menus consist of menu items that are always visible. Dynamic menus consist of menu items that are only visible when the user hovers over them with the mouse. Customers may often confuse static menus with menus defined declaratively and dynamic menus with menus that are databound at runtime. In fact, dynamic and static menus are unrelated to the method of population. The terms static and dynamic refer only to whether or not the menu is statically displayed by default or only displayed when the user takes some action.

The StaticDisplayLevels property is used to configure how many levels of the menu are static and therefore displayed by default. In the above example, setting the StaticDisplayLevels property to a value of 2 would cause the menu to statically display the Home node, the Music node, and the Movies node. All other nodes would be dynamically displayed when the user hovers over the parent node.

The MaximumDynamicDisplayLevels property configures the maximum number of dynamic levels the menu is capable of displaying. Any dynamic menus at a level higher than the value specified by the MaximumDynamicDisplayLevels property are discarded.

[!NOTE] It is almost certain that you might encounter situations where menus don???t appear to render due to the MaximumDynamicDisplayLevels property. In those cases, ensure that the property is set sufficiently to allow for the display of the customers menus.

Data Binding the Menu Control

The Menu control can be bound to any hierarchical data source such as the SiteMapDataSource or the XMLDataSource. The SiteMapDataSource is the most commonly used method for data binding to a Menu control because it feeds off of the Web.sitemap file and its schema provides a known API to the Menu control. The listing below shows a simple Web.sitemap file.

[!code-xmlMain]

   1:  <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>

Notice that there is only one root siteMapNode element, in this case, the Home element. Several attributes can be configured for each siteMapNode. The most commonly used attributes are:

• url Specifies the URL to display when a user clicks the menu item. If this attribute is not present, the node will simply post back when clicked.
• title Specifies the text that is displayed on the menu item.
• description Used as documentation for the node. Also displays as a tool tip when the mouse is hovered over the node.
• siteMapFile Allows for nested sitemaps. This attribute must point to a well-formed ASP.NET sitemap file.
• roles Allows for the appearance of a node to be controlled by ASP.NET security trimming.

Note that while these attributes are all optional, the behavior of the menu may not be what is expected if they are not specified. For example, if the url attribute is specified but the description attribute is not, the node will not be visible and there will be no way to navigate to the URL specified.

Controlling a Menus Operation

There are several properties that affect the operation of an ASP.NET Menu control; the Orientation property, the DisappearAfter property, the StaticItemFormatString property, and the StaticPopoutImageUrl property are just a few of these.

• The Orientation can be set to either horizontal or vertical and controls whether static menu items are laid out horizontally in a row or vertically and stacked upon one another. This property does not affect dynamic menus.
• The DisappearAfter property configures how long a dynamic menu should remain visible after the mouse has been moved away from it. The value is specified in milliseconds and defaults to 500. Setting this property to a value of -1 will cause the menu to never disappear automatically. In that case, the menu will only disappear when the user clicks outside of the menu.
• The StaticItemFormatString property makes it easy to maintain consistent verbiage in your menu system. When specifying this property, {0} should be entered in place of the description that appears in the data source. For example, in order to have the menu item from exercise 1 say Visit Our Products Page, etc., you would specify Visit Our {0} Page for the StaticItemFormatString. At runtime, ASP.NET will replace any occurrence of {0} with the correct description for the menu item.
• The StaticPopoutImageUrl property specifies the image that is used to indicate that a particular menu node has child nodes that can be accessed by hovering over it. Dynamic menus will continue to use the default image.

Templated Menu Controls

The Menu control is a templated control and allows for two different ItemTemplates; the StaticItemTemplate and the DynamicItemTemplate. Using these templates, you can easily add server controls or user controls to your menus.

To edit the templates in Visual Studio .NET, click the Smart Tag button on the menu and either choose Edit Templates. You can then choose between editing the StaticItemTemplate or the DynamicItemTemplate.

Any controls added to the StaticItemTemplate will appear in the static menu when the page loads. Any controls added to the DynamicItemTemplate will appear on all pop-up menus.

Menu Events

The Menu control has two events that are unique to it; the MenuItemClicked and the MenuItemDatabound event.

The MenuItemClicked event is raised when a menu item is clicked. The MenuItemDatabound event is raised when a menu item is databound. The MenuEventArgs that is passed to the event handler provides access to the menu item via the Item property.

Controlling a Menus Appearance

You can also affect the appearance of a menu control using one or more of the many styles available to format menus. Among these are StaticMenuStyle, DynamicMenuStyle, DynamicMenuItemStyle, DynamicSelectedStyle, and DynamicHoverStyle. These properties are configured using a standard HTML Style string. For example, the following will affect the style for dynamic menus.

[!code-aspxMain]

   1:  <DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"

   2:      BackColor="#D6D3CE" />

[!NOTE] If you are using any of the Hover styles, you will need to add a <head> element in to the page with the runat element set to server.

Menu controls also support the use of ASP.NET 2.0 themes.

The TreeView Control

The TreeView control displays data in a tree-like structure. As with the Menu control, it can be easily data bound to any hierarchical data source such as the SiteMapDataSource.

The first question that customers are likely to ask about the TreeView control in ASP.NET 2.0 is whether or not it is related to the TreeView IE WebControl that was available for ASP.NET 1.x. It is not. The ASP.NET 2.0 TreeView control was written from the ground up and offers significant improvement over the IE TreeView WebControl that was previously available.

I won???t go into detail on how to bind a TreeView control to a site map as it is performed in exactly the same way as the Menu control. However, the TreeView control has some distinct differences in the way that it operates.

By default, a TreeView control appears fully expanded. To change the level of expansion upon initial load, modify the ExpandDepth property of the control. This is particularly important in cases where the TreeView is databound upon expanding particular nodes.

DataBinding the TreeView Control

Unlike the Menu control, the TreeView lends itself well to handling large amounts of data. Therefore, in addition to databinding to a SiteMapDataSource or XMLDataSource, the TreeView is often data bound to a DataSet or other relational data. In cases where the TreeView control is bound to large amounts of data, it is best to bind only to data that is actually visible in the control. You can then data bind to additional data as TreeView nodes are expanded.

In these cases, the PopulateOnDemand property of the TreeView should be set to true. You will then need to provide an implementation for the TreeNodePopulate method.

Data Binding Without PostBack

Notice that when you expand a node in the previous example for the first time, the page posts back and refreshes. Thats not a problem in this example, but you can imagine that it might be in a production environment with a large amount of data. A better scenario would be one in which the TreeView would still dynamically populate its nodes, but without a post back to the server.

By setting the PopulateNodesFromClient and the PopulateOnDemand properties to true, the ASP.NET TreeView control will dynamically populate nodes without a post back. When the parent node is expanded, an XMLHttp request is made from the client and the OnTreeNodePopulate event is fired. The server responds with an XML data island which is then used to data bind the child nodes.

ASP.NET dynamically creates the client code that implements this functionality. The <script> tags that contain the script are generated pointing to an AXD file. For example, the listing below shows the script links for the script code that generates the XMLHttp request.

[!code-htmlMain]

   1:  <script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&

   2:      amp;t=632514255396426531"

   3:      type="text/javascript"></script>

If you browse the AXD file above in your browser and open it, you will see the code that implements the XMLHttp request. This method prevents customers from modifying the script file.

Controlling the Operation of the TreeView Control

The TreeView control has several properties that affect the operation of the control. The most obvious properties are the ShowCheckBoxes, ShowExpandCollapse, and ShowLines.

The ShowCheckBoxes property affects whether or not nodes display a check box when rendered. The valid values for this property are None, Root, Parent, Leaf, and All. These affect the TreeView control as follows:

When checkboxes are being used, the CheckedNodes property will return a collection of TreeView nodes that are checked upon postback.

The ShowExpandCollapse property controls the appearance of the expand/collapse image next to root and parent nodes. If this property is set to false, TreeView nodes are rendered as hyperlinks and are expanded/collapsed by clicking on the link.

The ShowLines property controls whether or not lines are displayed connecting parent nodes to child nodes. When false (the default), no lines are displayed. When true, the TreeView control will use lines images in the folder specified by the LineImagesFolder property.

To customize the appearance of TreeView lines, Visual Studio .NET 2005 includes a Line Designer tool. You can access this tool using the Smart Tag button on the TreeView control as below.

Figure 1

When select the Customize Line Images menu option, the Line Designer tool will be launched allowing you to configure the appearance of TreeView lines.

TreeView Events

The TreeView control has the following unique events:

• SelectedNodeChanged Occurs when a node is selected based upon the SelectAction property.
• TreeNodeCheckChanged Occurs when a nodes checkboxs state is changed.
• TreeNodeExpanded Occurs when a node is expanded based upon the SelectAction property.
• TreeNodeCollapsed Occurs when a node is collapsed.
• TreeNodeDataBound Occurs when a node is data bound.
• TreeNodePopulate Occurs when a node is populated.

The SelectAction property allows you to configure which event is fired when a node is selected. The SelectAction property provides the following actions:

• TreeNodeSelectAction.Expand Raises TreeNodeExpanded when the node is selected.
• TreeNodeSelectAction.None Raises no event when the node is selected.
• TreeNodeSelectAction.Select Raises the SelectedNodeChanged event when the node is selected.
• TreeNodeSelectAction.SelectExpand Raises both the SelectedNodeChanged event and the TreeNodeExpanded event when the node is selected.

Controlling Appearance with Styles

The TreeView control provides many properties for controlling the appearance of the control with styles. The following properties are available.

Each of these properties is read-only. However, they will each return a TreeNodeStyle object, and the properties of that object can be modified using the property-subproperty format. For example, to set the ForeColor property of the SelectedNodeStyle, you would use the following syntax:

[!code-aspxMain]

   1:  <asp:TreeView id=sampleTreeView

   2:      SelectedNodeStyle-ForeColor=Blue

   3:      runat=server>

Notice that the tag above is not closed. That is because when using the declarative syntax shown here, you would include the TreeViews nodes in the HTML code as well.

The style properties can also be specified in code using the property.subproperty format. For example, to set the ForeColor property of the RootNodeStyle in code, you would use the following syntax:

[!code-csharpMain]

   1:  treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;

[!NOTE] For a comprehensive list of the different style properties, see the MSDN documentation on the TreeNodeStyle object.

The SiteMapPath Control

The SiteMapPath control provides a bread crumb navigation control for ASP.NET developers. Like the other navigation controls, it can be easily data bound to hierarchical data sources such as the SiteMapDataSource or XmlDataSource.

A SiteMapPath control is made up of SiteMapNodeItem objects. There are three types of nodes; the Root node, Parent nodes, and the Current node. The root node is the node at the top of the hierarchical structure. The current node represents the current page. All other nodes are parent nodes.

Controlling the Operation of the SiteMapPath Control

The properties that control the operation of the SiteMapPath control are as follows:

Templated SiteMapPath Controls

The SiteMapControl is a templated control, and as such, you can define different templates for use in displaying the control. To edit templates in a SiteMapPath control, click the Smart Tag button on the control and choose Edit Templates from the menu. This displays the SiteMapTasks menu as shown below where you can choose between the different templates available.

Figure 2

The NodeTemplate template refers to any node in the SiteMapPath. If the node is a root node or the current node and a RootNodeTemplate or CurrentNodeTemplate is configured, the NodeTemplate is overridden.

SiteMapPath Events

The SiteMapPath control has two events that are not derived from the Control class; the ItemCreated event and the ItemDataBound event. The ItemCreated event is raised when a SiteMapPath item is created. ItemDataBound is raised when the DataBind method is called during the data binding of a SiteMapPath node. A SiteMapNodeItemEventArgs object provides access to the specific SiteMapNodeItem via the Item property.

Controlling Appearance with Styles

The following styles are available for formatting of a SiteMapPath control.

The NodeStyle property is overridden by either the CurrentNodeStyle or the RootNodeStyle. Each of these properties is read-only and returns a Style object. To affect the appearance of a node using one of these properties, you will need to set the properties of the Style object that is returned. For example, the code below changes the forecolor property of the current node.

[!code-aspxMain]

   1:  <asp:SiteMapPath runat="server" ID="SiteMapPath1"

   2:    CurrentNodeStyle-ForeColor="Orange"/>

The property can also be applied programmatically as follows:

[!code-csharpMain]

   1:  this.SiteMapPath1.CurrentNodeStyle.ForeColor =

   2:      System.Drawing.Color.Orange;

[!NOTE] If a template is applied, the style will not be applied.

Lab 1: Configuring an ASP.NET Menu Control

1. Create a new Web site.
2. Add a Site Map file by selecting File, New, File and choosing Site Map from the list of file templates.

3. Open the site map (Web.sitemap by default) and modify it so that it looks like the listing below. The pages to which you are linking in the site map file do not really exist, but that will not be an issue for this exercise.

   [!code-xmlMain]

      1:  <?xml version="1.0" encoding="utf-8" ?>

      2:  <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

      3:      <siteMapNode url="~/default.aspx">

      4:          <siteMapNode url="~/products/default.aspx"

      5:            title="Products" description="Our Products">

      6:              <siteMapNode url="~/products/winprods.aspx"

      7:                title="Windows Products" description="Windows Products" />

      8:              <siteMapNode url="~/products/webprods.aspx"

      9:                title="Web Products" description="Web Products" />

     10:          </siteMapNode>

     11:          <siteMapNode url="~/services/default.aspx"

     12:            title="Services" description="Our Services">

     13:              <siteMapNode url="~/services/consulting.aspx"

     14:                title="Consulting Services"

     15:                description="Consulting Services" />

     16:              <siteMapNode url="~/services/develop.aspx"

     17:                title="Development Services"

     18:                description="Development Services" />

     19:          </siteMapNode>

     20:      </siteMapNode>

     21:  </siteMap>

4. Open the default Web form in Design view.
5. From the Navigation section of the Toolbox, add a new Menu control to the page.
6. From the Data section of the Toolbox, add a new SiteMapDataSource. The SiteMapDataSource will automatically use the Web.sitemap file in your site. (The Web.sitemap file must be in the root folder of the site.)
7. Click the Menu control and then click the Smart Tag button to display the Menu Tasks dialog.
8. In the Choose Data Source dropdown, select SiteMapDataSource1.
9. Click the AutoFormat link and choose a format for the Menu.
10. In the Properties pane, set the StaticDisplayLevels property to 2. The Menu control should now display the Home, Products, and Services node in the Designer.

11. Browse the page in your browser to use the menu. (Because the pages you ve added to the site map don???t actually exist, you will see an error when you try and browse to them.)

Experiment with changing the StaticDisplayLevels and the MaximumDynamicDisplayLevels properties and see how they affect how the menu is rendered.

Lab 2: Dynamically Binding a TreeView Control

This exercise assumes that you have SQL Server running locally and that the Northwind database is present on the SQL Server instance. If these conditions are not met, please change the connection string in the sample. Note that you may also need to specify SQL Server authentication instead of a trusted connection.

1. Create a new Web site.

2. Switch to Code view for Default.aspx and replace all code with the code listed below.

   [!code-aspxMain]

      1:  <%@ Page Language="C#" %>

      2:  <%@ Import Namespace="System.Data" %>

      3:  <%@ Import Namespace="System.Data.SqlClient" %>

      4:   

      5:  <script runat="server">

      6:      void PopulateNode(Object sender, TreeNodeEventArgs e) {

      7:          // Call the appropriate method to populate a node at a particular level.

      8:          switch (e.Node.Depth) {

      9:              case 0:

     10:                  // Populate the first-level nodes.

     11:                  PopulateCategories(e.Node);

     12:                  break;

     13:              case 1:

     14:                  // Populate the second-level nodes.

     15:                  PopulateProducts(e.Node);

     16:                  break;

     17:              default:

     18:                  // Do nothing.

     19:                  break;

     20:          }

     21:   

     22:      }

     23:      void PopulateCategories(TreeNode node) {

     24:   

     25:          // Query for the product categories. These are the values

     26:          // for the second-level nodes.

     27:          DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");

     28:          // Create the second-level nodes.

     29:          if (ResultSet.Tables.Count > 0) {

     30:   

     31:              // Iterate through and create a new node for each row in the query results.

     32:              // Notice that the query results are stored in the table of the DataSet.

     33:              foreach (DataRow row in ResultSet.Tables[0].Rows) {

     34:   

     35:                  // Create the new node. Notice that the CategoryId is stored in the Value property

     36:                  // of the node. This will make querying for items in a specific category easier when

     37:                  // the third-level nodes are created.

     38:                  TreeNode newNode = new TreeNode();

     39:                  newNode.Text = row["CategoryName"].ToString();

     40:                  newNode.Value = row["CategoryID"].ToString();

     41:                  // Set the PopulateOnDemand property to true so that the child nodes can be

     42:                  // dynamically populated.

     43:                  newNode.PopulateOnDemand = true;

     44:   

     45:                  // Set additional properties for the node.

     46:                  newNode.SelectAction = TreeNodeSelectAction.Expand;

     47:   

     48:                  // Add the new node to the ChildNodes collection of the parent node.

     49:                  node.ChildNodes.Add(newNode);

     50:   

     51:              }

     52:   

     53:          }

     54:   

     55:      }

     56:      void PopulateProducts(TreeNode node) {

     57:          // Query for the products of the current category. These are the values

     58:          // for the third-level nodes.

     59:          DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);

     60:          // Create the third-level nodes.

     61:          if (ResultSet.Tables.Count > 0) {

     62:   

     63:              // Iterate through and create a new node for each row in the query results.

     64:              // Notice that the query results are stored in the table of the DataSet.

     65:              foreach (DataRow row in ResultSet.Tables[0].Rows) {

     66:   

     67:                  // Create the new node.

     68:                  TreeNode NewNode = new TreeNode(row["ProductName"].ToString());

     69:   

     70:                  // Set the PopulateOnDemand property to false, because these are leaf nodes and

     71:                  // do not need to be populated.

     72:                  NewNode.PopulateOnDemand = false;

     73:   

     74:                  // Set additional properties for the node.

     75:                  NewNode.SelectAction = TreeNodeSelectAction.None;

     76:   

     77:                  // Add the new node to the ChildNodes collection of the parent node.

     78:                  node.ChildNodes.Add(NewNode);

     79:   

     80:              }

     81:   

     82:          }

     83:      }

     84:      DataSet RunQuery(String QueryString) {

     85:          // Declare the connection string. This example uses Microsoft SQL Server

     86:          // and connects to the Northwind sample database.

     87:          String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI";

     88:          SqlConnection DBConnection = new SqlConnection(ConnectionString);

     89:          SqlDataAdapter DBAdapter;

     90:          DataSet ResultsDataSet = new DataSet();

     91:          try {

     92:              // Run the query and create a DataSet.

     93:              DBAdapter = new SqlDataAdapter(QueryString, DBConnection);

     94:              DBAdapter.Fill(ResultsDataSet);

     95:              // Close the database connection.

     96:              DBConnection.Close();

     97:          } catch (Exception ex) {

     98:              // Close the database connection if it is still open.

     99:              if (DBConnection.State == ConnectionState.Open) {

    100:                  DBConnection.Close();

    101:              }

    102:   

    103:              Message.Text = "Unable to connect to the database.";

    104:          }

    105:          return ResultsDataSet;

    106:      }

    107:  </script>

    108:   

    109:  <html>

    110:  <body>

    111:      <form id="Form1" runat="server">

    112:          <h3>

    113:              TreeView PopulateNodesFromClient Example</h3>

    114:          <asp:TreeView ID="LinksTreeView" 

    115:            Font-Name="Arial" ForeColor="Blue" EnableClientScript="true"

    116:            PopulateNodesFromClient="false" 

    117:            OnTreeNodePopulate="PopulateNode" runat="server"

    118:              ExpandDepth="0">

    119:              <Nodes>

    120:                  <asp:TreeNode Text="Inventory" SelectAction="Expand"

    121:                                PopulateOnDemand="True" Value="Inventory" />

    122:              </Nodes>

    123:          </asp:TreeView>

    124:          <br>

    125:          <br>

    126:          <asp:Label ID="Message" runat="server" />

    127:      </form>

    128:  </body>

    129:  </html>

3. Save the page as treeview.aspx.
4. Browse the page.
5. When the page is first displayed, view the source of the page in your browser. Note that only the visible nodes were sent to the client.
6. Click the plus sign next to any node.

7. View source on the page again. Notice that the newly displayed nodes are now present.

Lab 3: Details View and Editing Data Using a GridView and DetailsView

1. Create a new Web site.
2. Add a new web.config to the Web site.

3. Add a connection string to the web.config file as shown below:

   [!code-xmlMain]

      1:  <connectionStrings>

      2:      <add name="Northwind"

      3:           providerName="System.Data.SqlClient"

      4:           connectionString="Data Source=localhost;Integrated Security=SSPI;

      5:           Initial Catalog=Northwind;"/>

      6:  </connectionStrings>

   [!NOTE] You may need to change the connection string based upon your environment.

4. Save and close the web.config file.
5. Open Default.aspx and add a new SqlDataSource control.
6. Change the ID of the SqlDataSource control to Products.
7. In the SqlDataSource Tasks menu, click Configure Data Source.
8. Select Northwind in the connection dropdown and click Next.

9. Select Products from the Name dropdown and check the ProductID, ProductName, UnitPrice, and UnitsInStock checkboxes as shown below.

**Figure 3**

10. Click Next.
11. Click Finish.
12. Switch to Source view and examine the code that was generated. Notice the SelectCommand, DeleteCommand, InsertCommand, and UpdateCommand that were added to the SqlDataSource control. Also notice the parameters that were added.
13. Switch to Design view and add a new GridView control to the page.
14. Select Products from the Choose Data Source dropdown.
15. Check Enable Paging and Enable Selection as shown below.

**Figure 4**

16. Click the Edit Columns link and make sure that Auto-generate fields is checked.
17. Click OK.
18. With the GridView control selected, click the button next to the DataKeyNames property in the Properties pane.
19. Select ProductID from the Available data fields list and click the > button to add it.
20. Click OK.
21. Add a new SqlDataSource control to the page.
22. Change the ID of the SqlDataSource control to Details.
23. From the SqlDataSource Tasks menu, choose Configure Data Source.
24. Choose Northwind from the dropdown and click Next.
25. Select Products from the Name dropdown and check the * checkbox in the Columns listbox.
26. Click the WHERE button.
27. Select ProductID from the Column dropdown.
28. Select = in the Operator dropdown.
29. Select Control from the Source dropdown.
30. Select GridView1 from the Control ID dropdown.
31. Click the Add button to add the WHERE clause.
32. Click OK.
33. Click the Advanced button and check the Generate INSERT, UPDATE, and DELETE statements checkbox.
34. Click OK.
35. Click Next and click Finish.
36. Add a DetailsView control to the page.
37. In the Choose Data Source dropdown, choose Details.
38. Check the Enable Editing checkbox as shown below.

**Figure 5**

39. Save the page and browse Default.aspx.
40. Click the Select link next to different records to see the DetailsView update automatically.
41. Click the Edit link in the DetailsView control.
42. Make a change to the record and click Update.

Comments ( )