DropDownList and GridView Master/Detail page using ObjectDataSource control

In this example, we will see how to display a simple master/details page using a DropDownList populated with the account names and a GridView showing the selected account details. This format of display is useful for data having master/detail relationship.

For example, a given customer account may have multiple orders or invoices. The customer data will be the master data, and orders data is the detail data. For this example, we will consider a single table - AccountsTable for simplicity. We will display the Master/Detail data using DropDownList control and GridView control using ObjectDatasource control.

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
SelectMethod="AllAccounts"
TypeName="myCsBusinessLayer.BusinessObjects.Account">
</asp:ObjectDataSource>
        
<asp:DropDownList ID="drpAccounts" Runat="server" 
AutoPostBack="True" DataSourceID="ObjectDataSource1"
DataTextField="AccountName" DataValueField="AccountCode">
</asp:DropDownList>
      
<asp:ObjectDataSource ID="ObjectDataSource2" 
Runat="server" TypeName="myCsBusinessLayer.BusinessObjects.Account"
SelectMethod="SingleAccountDetail">
<SelectParameters>
<asp:ControlParameter Name="AccountCode" ControlID="drpAccounts" 
PropertyName="SelectedValue">
</asp:ControlParameter>
</SelectParameters>
</asp:ObjectDataSource>
        
<asp:GridView ID="AccountGridView" Runat="server" 
DataSourceID="ObjectDataSource2" 
AutoGenerateColumns="False" >
<Columns>
    <asp:BoundField ReadOnly="True" 
	HeaderText="Account Name" 
      DataField="AccountName">
      <ItemStyle HorizontalAlign="Center"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField HeaderText="Account description" 
       DataField="Accountdescription" >
       <ItemStyle HorizontalAlign="Right"></ItemStyle>
     </asp:BoundField>
 </Columns>
</asp:GridView>   



The Account class used in the above code is given on this page - Account class

Configure a ObjectDataSource control - ObjectDataSource1 to retrieve data from the Account class. We set the AllAccounts() method to the SelectMethod property of the ObjectDataSource1.

After configuring the ObjectDataSource1, we bind the Dropdownlist control to the ObjectDataSource1 control using the DataSourceID property.

Next, We need to specify which field should be displayed in the DropDownList control. To do so, set the AccountName field as the display item in the DropDownList control.

ObjectDataSource1 invokes the AllAccounts() method from the Account class. The DropDownList control populates the account names which are returned from the AllAccounts() method.

When the user selects an account from the DropDownList, we want a postback to occur in order to refresh the GridView control. For this, we set the DropDownList control autopostback property to True. So, when the user selects an account, the current selected account details are listed in the GridView control.

The next step is to display the details for the selected account in a GridView control. To accomplish this, set the GridView control's ID property to AccountGridView.

Lastly, configure another ObjectDataSource control ObjectDataSource2 to retrieve data from the account class's SingleAccountDetail() method. Set the ControlID property to the DropDownList control by using ControlParameter object. The ControlParameter represents the AccountCode of the selected account in the DropDownList control. Set the value of the AccountCode parameter to the selected value of the DropDownList control by using the SelectedValue property of the dropDownList control.