ASP. NET 2.0 data Tutorial: bind to ObjectDataSource

After adding the ObjectDataSource to the page and completing the configuration, we can add a Data Web Server Control to the page to display the Data returned by the Select method of ObjectDataSource. All Data Web server controls can be bound to ObjectDataSource. Next, let's take a look at how to present ObjectDataSource Data to the GridView, DetailsView, and FormView.

Bind a GridView to ObjectDataSource

Add a GridView control from the toolbox to the design interface of SimpleDisplay. aspx on the page. From the intelligent tag of the GridView, select the ObjectDataSource control we added in step 1 as the data source. This will automatically generate a binding column BoundField in the GridView Control Based on each attribute of the data returned by the Select method of ObjectDataSource, that is, the attribute defined by Products of the typed dataset ).

 

Figure 6: Add a GridView control to the page and bind it to ObjectDataSource

 

Figure 7: Manage the columns bound to the GridView control in the edit column dialog box

It takes some time to modify the binding columns of the GridView control and remove the columns ProductID, SupplierID, CategoryID, QuantityPerUnit, UnitsInStock, UnitsOnOrder, and ReorderLevel. The operation is simple. You can remove these columns from the list in the lower left and click the delete button in red. Then, re-arrange, select the BIND columns CategoryName and SupplierName, and click the up arrow to release them before the UnitPrice column. Set the HeaderText attributes of the remaining binding columns Products, Category, Supplier, and Price respectively. Format the Price column as currency-set the HtmlEncode attribute of the binding column to False and set the DataFormatString attribute to {0: c }. Finally, you can use the ItemStyle/HorizontalAlign attribute to set the horizontal align of the Price of the bound column to the right and the Discontinued horizontal center display of the CheckBox column.

 
 

  
  
< asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" EnableViewState="False">  
  
  
 
  
  
    < Columns>  
  
  
 
  
  
        < asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" />  
  
  
 
  
  
        < asp:BoundField DataField="CategoryName" HeaderText="Category" ReadOnly="True" SortExpression="CategoryName" />  
  
  
 
  
  
        < asp:BoundField DataField="SupplierName" HeaderText="Supplier" ReadOnly="True" SortExpression="SupplierName" />  
  
  
 
  
  
        < asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" HeaderText="Price" 
  
  
 
  
  
            HtmlEncode="False" SortExpression="UnitPrice">  
  
  
 
  
  
            < ItemStyle HorizontalAlign="Right" />  
  
  
 
  
  
        < /asp:BoundField>  
  
  
 
  
  
        < asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued">  
  
  
 
  
  
            < ItemStyle HorizontalAlign="Center" />  
  
  
 
  
  
        < /asp:CheckBoxField>  
  
  
 
  
  
    < /Columns>  
  
  
 
  
  
< /asp:GridView>  
  
  
 
 
 

 

Figure 8: The binding column of the GridView control is customized.

Themes topic) to keep the display style consistent

The style settings at the control level are removed as much as possible. Instead, the Cascading Style Sheet defined in an external file is used. The styles.css file contains the DataWebControlStyle, HeaderStyle, RowStyle, and AlternatingRowStyle CSS styles that can be used to indicate the appearance of the Data Web Server Control. To achieve this, we can set the CssClass attribute of the GridView control to DataWebControlStyle, and CssClass attributes of HeaderStyle, RowStyle, and AlternatingRowStyle.

If we set these CssClass attributes to Web controls, we have to remember to clearly record the values of each attribute and each Data Web Server Control to our manual. A more convenient management method is to use Theme to define the association between CSS styles and the properties of the GridView, DetailsView, and FormView controls. Theme is a set of control-level attribute settings, images, and CSS styles. It can be applied to all pages of the entire site to forcibly restrict appearance and perception.

Our Theme will not contain images and CSS files. We will keep the stylesheet Styles.css file in the root directory of the web application), but it will contain two appearances of Skin ). The appearance is a file that contains the default property settings of the Web control. In particular, we will create a Skin file to define the appearance for the GridView and DetailsView, marking the default CssClass associated attributes.

In Solution Explorer, select the current project, right-click the project, and select "Add new item". Add an appearance file to your project and name it "GridView. skin.

 

Figure 9: Add a appearance file and name it "GridView. skin"

Skin files need to be placed in a Theme, which are located in the App_Themes folder. since we don't yet have such a folder, Visual Studio will kindly offer to create one for us when adding our first Skin. click Yes to create the App_Theme folder and place the new GridView. skin file there.

The appearance file needs to be placed in a topic, and the topic file is stored in the App_Themes folder. Because we do not have this folder yet, Visual Studio will kindly propose to create one for us when we add the first appearance file. Click "yes" to automatically create the App_Theme folder and place the newly added GridView. skin file there.

 

Figure 10: Enable Visual Studio to automatically create the App_Theme folder

This will automatically create a topic in the App_Themes folder. The topic name is GridView and contains the appearance file GridView. skin.

 

Figure 11: The topic GridView has been added to the App_Theme folder.

Rename the topic GridView to DataWebControls from the context menu of the GridView folder and select Rename ). Then, enter the tag of the GridView. skin file shown below:

 
 

  
  
< asp:GridView runat="server" CssClass="DataWebControlStyle">  
  
  
 
  
  
   < AlternatingRowStyle CssClass="AlternatingRowStyle" />  
  
  
 
  
  
   < RowStyle CssClass="RowStyle" />  
  
  
 
  
  
   < HeaderStyle CssClass="HeaderStyle" />     
  
  
 
  
  
< /asp:GridView>  
  
  
 
 
 

When the topic DataWebControls is used, this defines the default values of any GridView control on any page and CssClass-related attributes. Let's add another appearance for the DetailsView control, which will be used soon. Add an appearance named DetailsView. skin to the topic DataWebControls and add the following tag:

 
 

  
  
< asp:DetailsView runat="server" CssClass="DataWebControlStyle">  
  
  
 
  
  
   < AlternatingRowStyle CssClass="AlternatingRowStyle" />  
  
  
 
  
  
   < RowStyle CssClass="RowStyle" />  
  
  
 
  
  
   < FieldHeaderStyle CssClass="HeaderStyle" />  
  
  
 
  
  
< /asp:DetailsView>  
  
  
 
 
 

The last part of our topic settings is to apply the topic to our asp.net page. A topic can be applied to pages on one page or all pages under a site. Let's apply the topic to all pages under the site. To achieve this, add the following tag to the <system. Web> segment of web. config:

 
 

  
  
< pages styleSheetTheme="DataWebControls" /> 
 
 

This is complete! The predefined attributes in the topic style table do not overwrite the attributes directly set at the control level. If you want the settings in the topic to be higher than the control settings, you need to use the topic features in the topic style table. However, unfortunately, the settings of the topic features do not appear in the logical view of Visual Studio. See asp.net Themes and Skins Overview and Server-Side Styles Using Themes for more information about Themes and appearances. See How: apply asp.net Themes for more information about how to configure a page to use a topic.

 

Figure 12: The GridView displays The Product's Name, Category, Supplier, Price, and Discontinued Information.

Display a piece of data each time in the DetailsView Control

In the GridView control, each record of data returned from the bound data source control is displayed as a row. However, sometimes we only need to display a single record or only one record at a time. The DetailsView control provides this function, which is a two-column HTML <table>. Each row displays a field or attribute. As you can imagine, DetailsView only has one data row in the GridView, Which is flipped 90 degrees.

First, add a DetailsView control at the top of the GridView control in SimpleDisplay. aspx. Then, bind it to the same object‑c control of the GridView. Like the GridView control, it generates a binding column for each attribute based on the data returned by the Select method of ObjectDataSource. The only difference is that the binding columns of DetailsView are horizontally arranged.

 

Figure 13: Add a DetailsView control to the page and bind it to ObjectDataSource

Similar to the GridView, the binding columns of DetailsView can also be adjusted to provide customized display. Figure 14 shows the example of the DetailsView control that looks similar to the GridView after the binding column and CssClass attribute are set.

 

Figure 14: The DetailsView control displays a record.

Note that the DetailsView control only displays the first record in its data source. To allow users to browse all records, we must allow the DetailsView page. To achieve this, go back to Visual Studio and select enable paging in the intelligent tag of DetailsView ".

 

Figure 15: allow the DetailsView control to be paged

 

Figure 16: After pagination is enabled, the DetailsView control allows you to view any Products

In future tutorials, we will discuss in detail about paging.

A more flexible layout for displaying a record at a time

Using DetailView to display each piece of data returned by ObjectDataSource seems dull. We may need more flexible data presentation methods. For example, in each individual row, based on displaying information such as product's name, category, supplier, price, and discontinued information, we may need the product name and price columns to display the

The FormView control provides customization at this level. The FormView control uses templates based on fields (like the GridView and DetailsView). This allows us to use Web server controls in a mix, static HTML, and binding syntax databinding syntax ). If you are familiar with the Repeater control in asp.net 1.x, you can think that FormView is a Repeater that only displays one record.

Add a FormView control on the SimpleDisplay. aspx design page. At the beginning, the FromView control is displayed as a gray square and tells us that we need to edit the template content and use ItemTemplate.

 

Figure 17: FormView must contain an ItemTemplate

You can directly bind a data source control to it using the Smart tag of FormView. This will automatically create a default ItemTemplate if the ObjectDataSource sets InsertMethod and UpdateMethod, in this case, EditItemTemplate and InsertItemTemplate are created automatically ). However, in this example, we will manually bind FormView and set its ItemTemplate. First, set the performanceid attribute of FormView to the ID of ObjectDataSource: objectperformance1, create an ItemTemplate, and display the product's name and price in a

 
 

  
  
< asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1" EnableViewState="False">  
  
  
 
  
  
    < ItemTemplate>  
  
  
 
  
  
        < h4>< %# Eval("ProductName") %> (< %# Eval("UnitPrice", "{0:c}") %>)< /h4>  
  
  
 
  
  
        Category: < %# Eval("CategoryName") %>; Supplier: < %# Eval("SupplierName") %>  
  
  
 
  
  
    < /ItemTemplate>  
  
  
 
  
  
< /asp:FormView>  
  
  
 
 
 

<% # Eval (propertyName) %> is the binding syntax. The Eval method returns the value of the specified attribute of the object bound to FormView. Read Alex Homer's article Simplified and Extended Data Binding Syntax in asp.net 2.0 to learn more about Data Binding.

Like DetailsView, FormView displays the first record returned by ObjectDataSource. You can enable the pagination feature of FormView so that visitors can view each product in sequence.

1. ASP. NET 2.0 data Tutorial: insert, update, and delete data
2. ASP. NET 2.0 data Tutorial: how to add parameterization to the data access layer
3. ASP. NET 2.0 data Tutorial: create a data access layer
4. ASP. NET 2.0 data Tutorial: create a Web project and configure database connection
5. ASP. NET 2.0 data Tutorial: add field-level verification to DataRow