| You use DataBound controls to generate your application's user interface for working with data. The DataBound controls can be used to display and edit database data, XML data, or just about any other type of data you can imagine. There are three main types of DataBound controls: list controls, tabular DataBound controls, and hierarchical DataBound controls. Working with List Controls List controls are used to display simple option lists. The ASP.NET 2.0 Framework includes the following five list controls: BulletedList Displays a bulleted list of items. Each item can be displayed as text, a link button, or a hyperlink. CheckBoxList Displays a list of check boxes. Multiple check boxes in the list can be selected. DropDownList Displays a drop-down list. Only one item in the drop-down list can be selected. ListBox Displays a list box. You can configure this control so that only one item in the list can be selected or multiple items can be selected. RadioButtonList Displays a list of radio buttons. Only one radio button can be selected.
All five controls inherit from the same base ListControl class. This means that all these controls share a core set of properties and methods. In Chapter 10, "Working with List Controls," you can find detailed instructions on how to use each of the list controls. The page in Listing 8.1 illustrates how to use all five list controls to display the same set of database records (see Figure 8.1). Figure 8.1. Using list controls. 
Listing 8.1. ShowListControls.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .floater { float:left; border:solid 1px black; padding:5px; margin:5px; } </style> <title>Show List Controls</title> </head> <body> <form runat="server"> <div > <h3>BulletedList</h3> <asp:BulletedList DataSource DataTextField="Title" Runat="server" /> </div> <div > <h3>CheckBoxList</h3> <asp:CheckBoxList DataSource DataTextField="Title" Runat="server" /> </div> <div > <h3>DropDownList</h3> <asp:DropDownList DataSource DataTextField="Title" Runat="server" /> </div> <div > <h3>ListBox</h3> <asp:ListBox DataSource DataTextField="Title" Runat="server" /> </div> <div > <h3>RadioButtonList</h3> <asp:RadioButtonList DataSource DataTextField="Title" Runat="server" /> </div> <asp:SqlDataSource ConnectionString="Data Source=.\SQLExpress; AttachDbFilename=|DataDirectory|MyDatabase.mdf; Integrated Security=True;User Instance=True" SelectCommand="SELECT Title FROM Movies" Runat="server" /> </form> </body> </html>
|
In Listing 8.1, each list control is bound to a SqlDataSource control which represents the contents of the Movies database table. For example, the BulletedList control is bound to the DataSource control like this: <asp:BulletedList DataSource DataTextField="Title" Runat="server" /> <asp:SqlDataSource ConnectionString="Data Source=.\SQLExpress; AttachDbFilename=|DataDirectory|MyDatabase.mdf; Integrated Security=True;User Instance=True" SelectCommand="SELECT Title FROM Movies" Runat="server" />
Notice that the BulletedList control includes a DataSourceID attribute, which points to the ID of the SqlDataSource control. The DataSourceID attribute associates a DataBound control with a DataSource control. Working with Tabular DataBound Controls The tabular DataBound controls are the main set of controls that you use when working with database data. These controls enable you to display and, in some cases, modify data retrieved from a database or other type of data source. There are five tabular DataBound controls. These controls can be divided into two types: those that display multiple data items at a time and those that display a single data item at a time. First, you can use any of the following controls to display a set of data items: GridView Displays a set of data items in an HTML table. For example, you can use the GridView control to display all the records contained in the Movies database table. This control enables you to display, sort, page, select, and edit data. DataList Displays a set of data items in an HTML table. Unlike the GridView control, more than one data item can be displayed in a single row. Repeater Displays a set of data items using a template. Unlike the GridView and DataList controls, a Repeater control does not automatically render an HTML table.
You can use either of the following two controls to display a single data item at a time: DetailsView Displays a single data item in an HTML table. For example, you can use the DetailsView control to display a single record from the Movies database table. This control enables you to display, page, edit, and add data. FormView Uses a template to display a single data item. Unlike the DetailsView, a FormView enables you to use to layout a form by using templates.
Note What happened to the DataGrid? The DataGrid was included in the ASP.NET 1.x Framework, but it no longer appears in the Toolbox in Visual Web Developer. The DataGrid is officially deprecated. You should use the GridView control instead because the GridView is more powerful. For backwards compatibility reasons, the DataGrid is included in the ASP.NET 2.0 Framework so that you can still use it in your pages.
The page in Listing 8.2 illustrates how you can use each of the tabular DataBound controls (see Figure 8.2). Figure 8.2. Using tabular DataBound controls. 
Listing 8.2. ShowTabularDataBound.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .floater { float:left; border:solid 1px black; padding:5px; margin:5px; } </style> <title>Show Tabular Databound Controls</title> </head> <body> <form runat="server"> <div > <h3>GridView</h3> <asp:GridView DataSource Runat="server" /> </div> <div > <h3>DataList</h3> <asp:DataList DataSource RepeatColumns="2" Runat="server"> <ItemTemplate> <%#Eval("Title")%> <i>directed by</i> <%#Eval("Director")%> </ItemTemplate> </asp:DataList> </div> <div > <h3>Repeater</h3> <asp:Repeater DataSource Runat="server"> <ItemTemplate> <%#Eval("Title")%> <i>directed by</i> <%#Eval("Director")%> </ItemTemplate> </asp:Repeater> </div> <div > <h3>DetailsView</h3> <asp:DetailsView DataSource AllowPaging="true" Runat="server" /> </div> <div > <h3>FormView</h3> <asp:FormView DataSource AllowPaging="true" Runat="server"> <ItemTemplate> <%#Eval("Title")%> <i>directed by</i> <%#Eval("Director")%> </ItemTemplate> </asp:FormView> </div> <asp:SqlDataSource ConnectionString="Data Source=.\SQLExpress; AttachDbFilename=|DataDirectory|MyDatabase.mdf; Integrated Security=True;User Instance=True" SelectCommand="SELECT Title,Director FROM Movies" Runat="server" /> </form> </body> </html>
|
For the moment, don't worry too much about formatting the controls. Each of the tabular DataBound controls supports an abundance of properties that modify the control's behavior and appearance. The GridView control gets a detailed examination in Chapter 11, "Using the GridView Control." The DetailsView and FormView controls are covered in Chapter 12, "Using the DetailsView and FormView Controls." The Repeater and DataList controls are discussed in Chapter 13, "Using the Repeater and DataList controls." Working with Hierarchical DataBound Controls A hierarchical DataBound control can be used to display nested data items. For example, you can use hierarchical DataBound controls to display the folder and page structure of your website, the contents of an XML file, or a set of master/detail database records. The ASP.NET 2.0 Framework includes two hierarchical DataBound controls: The page in Listing 8.3 illustrates how you can use both the Menu and treeView controls. Both controls are bound to an XmlDataSource control, which represents the XML file in Listing 8.4 (see Figure 8.3). Figure 8.3. Using hierarchical DataBound controls. 
Listing 8.3. ShowHierarchicalDataBound.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .floater { float:left; width:45%; border:solid 1px black; padding:5px; margin:5px; } </style> <title>Show Hierarchical Databound Controls</title> </head> <body> <form runat="server"> <div > <h3>TreeView</h3> <asp:TreeView DataSource Runat="server" /> </div> <div > <h3>Menu</h3> <asp:Menu DataSource Runat="server" /> </div> <asp:XmlDataSource DataFile="~/Movies.xml" XPath="/movies/*" Runat="server" /> </form> </body> </html>
|
Listing 8.4. Movies.xml <?xml version="1.0" encoding="utf-8" ?> <movies> <Adventure> <StarWars /> <JurassicPark /> <IndependenceDay /> </Adventure> <Animation> <IceAge /> <Shrek /> </Animation> <Drama> <Titanic /> <Ghost /> <ForrestGump /> </Drama> <Horrer> <Jaws /> <TheRing /> </Horrer> </movies>
|
Again, don't worry about the appearance of the Menu and TReeView controls in the page rendered by Listing 8.3. Both controls support a rich set of options for modifying the control's appearance. We examine the properties of both of these hierarchical controls in detail in Chapter 17, "Using the Navigation Controls." Working with Other Controls You can bind any control in the ASP.NET Framework to the data items represented by a data source. Imagine, for example, that you want to display a photo gallery. In that case, you might want to bind a set of Image controls to a data source. You can bind any ASP.NET control to a data item by adding the control to a template. For example, the page in Listing 8.5 automatically displays all the pictures in a folder named Photos (see Figure 8.4). Figure 8.4. Binding images to a data source. 
Listing 8.5. ShowPhotos.aspx <%@ Page Language="VB" %> <%@ Import Namespace="System.IO" %> <%@ Import Namespace="System.Collections.Generic" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> ''' <summary> ''' Bind photos to Repeater ''' </summary> Sub Page_Load() If Not Page.IsPostBack Then Repeater1.DataSource = GetPhotos() Repeater1.DataBind() End If End Sub ''' <summary> ''' Get list of photos from Photo folder ''' </summary> Public Function GetPhotos() As List(Of String) Dim photos As New List(Of String)() Dim photoPath As String = MapPath("~/Photos") Dim files As String() = Directory.GetFiles(photoPath) For Each photo As String In files photos.Add("~/Photos/" + Path.GetFileName(photo)) Next Return photos End Function </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Show Photos</title> </head> <body> <form runat="server"> <div> <asp:Repeater runat="server"> <ItemTemplate> <asp:Image Width="200px" ImageUrl='<%# Container.DataItem %>' Runat="server" /> </ItemTemplate> </asp:Repeater> </div> </form> </body> </html>
|
Notice that the Repeater control contains an ItemTemplate, and the ItemTemplate contains an ASP.NET Image control. The Image control displays each of the photographs from the Photos folder. | 