16.2. Displaying Data with ASP.NET Data Controls

The third and final step toward showing data on an ASP.NET Web page by using data controls is about binding the data source control to a data display control. Data display controls are responsible for showing the data that's exposed by the data source controls. At browse time, these controls are rendered on Web pages to provide the interface for displaying data.

Most of the ASP.NET 2.0 controls can be bound to data source controls. However, ASP.NET 2.0 offers special controls for displaying data from data sources in a tabular or grid format. This section discusses how you can bind the data source controls you configured earlier to display and format data on Web pages.

16.2.1. Binding with data source controls

As mentioned earlier, most of the ASP.NET 2.0 controls can be bound to data source controls to display data on the Web pages. For example, you can use the following steps in SharePoint Designer to bind an ASP.NET DropDownList control to the SQLDataSource data control:

The values of the data column that you chose in step 5 are displayed in the dropdown menu on the Web page. As mentioned earlier, the ASP.NET Development Server is invoked every time you preview an ASP.NET Web page to facilitate rendering of the controls on Web pages.

So, you've just completed the steps to bring the data from a back-end database to a Web page in SharePoint Designer without handwriting a single line of code. If you open the Code view of the Web page you just created, the HTML code of the DropDownList control appears:

<asp:DropDownList runat="server" id="DropDownList1"
   DataTextField="FirstName" DataSourceID="SqlDataSource1"
   DataValueField="CustomerKey">
   </asp:DropDownList>

The Data Source Configuration Wizard has allowed you to set the DataTextField, DataSourceID, and DataValueField for the asp:DropDownList control. You can also use the Tag Properties task pane to specify these properties.

16.2.2. Using ASP.NET data display controls

While the DropDownList control is useful, you might want to display the data from the data source control in a tabular or grid format. SharePoint Designer provides a number of ASP.NET 2.0 controls that can be used to display and work with data on a Web page.

Figure 16.13. The Data Source Configuration Wizard

16.2.2.1. Using the DataList control

The DataList control can be used to display a view of data in a repeating fashion and optionally edit and delete the records. In the following exercise, you use the ASP.NET 2.0 DataList control to display data from the SQLDataSource on the Web page. Follow these steps:

If you view the code of the DataList in the Code view, SharePoint Designer has automatically applied some formatting styles and tags to the DataList. These properties are highlighted in blue in the Tag Properties task pane for the DataList control:

<asp:DataList runat="server" id="DataList1"
   DataKeyField="CustomerKey" DataSourceID="SqlDataSource1"
   BorderColor="Tan" CellPadding="2" BackColor="LightGoldenrodYellow
   " BorderWidth="1px" ForeColor="Black">
         <FooterStyle BackColor="Tan" />
         <AlternatingItemStyle BackColor="PaleGoldenrod" />
         <SelectedItemStyle BackColor="DarkSlateBlue"
   ForeColor="GhostWhite" />
         <HeaderStyle BackColor="Tan" Font-Bold="True" />
         <ItemTemplate>
                CustomerKey:
                <asp:Label Text='<%# Eval("CustomerKey") %>'
   runat="server" id="CustomerKeyLabel" />
                <br />
                Title:
                <asp:Label Text='<%# Eval("Title") %>'
   runat="server" id="TitleLabel" />
                <br />
                MiddleName:
                <asp:Label Text='<%# Eval("MiddleName") %>'
   runat="server" id="MiddleNameLabel" />
                <br />
                FirstName:
                <asp:Label Text='<%# Eval("FirstName") %>'
   runat="server" id="FirstNameLabel" />
                <br />
                <br />
         </ItemTemplate>
   </asp:DataList>

Alternatively, you can use the Property Builder dialog box available through the Property Builder link in the Common DataList Tasks menu to modify the formatting of the DataList control. As shown in Figure 16.17, you can use the Property Builder dialog box to specify format settings for the DataList header, footer, items, and separators.

Using the Property Builder dialog box for the DataList control, you can set the formatting and style properties for this control without having to know firsthand the purpose of the property. The interface is fairly simple to use: Simply select the object to which you want to apply formatting and then use the controls provided in the Appearance section to specify values for the properties.

Figure 16.17. The Property Builder dialog box

16.2.2.2. Using the GridView control

All ASP.NET 2.0 controls have characteristics and features that differentiate them from each other. For example, the DataList control in SharePoint Designer doesn't allow paging of rows, while the GridView control does. Based on the functionality required, you can choose which control you want to use. In the next exercise, you use the GridView control to display the data from the same SQLDataSource used earlier to see the difference in the appearance of the controls:

You can navigate more easily between pages of data by using the links at the bottom on the GridView. The Columns headers also allow you to sort the data by clicking on them. You can specify the properties of the GridView by using the Tag Properties task pane. For example, as shown in Figure 16.19, if you want to change the location of the paging links from bottom to top, you can use the Tag Properties task pane to change the Position property in the Paging section to Top.

Figure 16.18. A preview of the GridView control on a Web page

Figure 16.19. Changing properties of the GridView control by using the Tag Properties task pane

The GridView also allows for updating and deleting data, provided that the data source control it's bound to has properly written UPDATE and DELETE statements. After you bind the GridView to such a data source control, the Enable Editing and Enable Deleting check boxes become available in the Common GridView Tasks menu. You can click these check boxes to enable the links for updating and deleting records in the GridView.

16.2.2.3. Using the DetailsView Control

While the GridView control allows for editing and deleting data, the DetailsView control allows for inserting new rows of data into a table in the database. In the next exercise, you use the DetailsView control in combination with the GridView control to create a Web page that can be used to insert and update rows of data in a table in a database:

Figure 16.23. The Common DetailsView Tasks after binding to an SQLDataSource control that supports data manipulation

As shown in Figure 16.24, when you click the Select link on the GridView, the DetailsView shows the corresponding item and allows you to edit it. The DetailsView also provides a New link to add a new record to the table.

Figure 16.24. The resulting Web page after linking the GridView and DetailsView controls

16.2.3. Formatting the display of data

While the AutoFormat dialog box provides you with many attractive templates and schemes to choose from, you might still want to change the look of the data display controls to better suit your design requirements.

Most of the control properties for the data display controls related to formatting and appearance are combined in the Appearance and Styles categories of the Tag Properties task pane. You can use these properties to modify the formatting of the controls. For example, the AlternateRowStyle property collection in the GridView control provides a set of properties that allows you to change the formatting of the alternate rows in the GridView.