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.
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.
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.
DetailsView Articles
- Difference between DetailsView and FormView control
- DataBinding a DetailsView control
- GridView and DetailsView Master/Detail page using SqlDataSource control
- DetailsView databound event
- DetailsView integer type conversion error?
- Using detailsview control datakeynames property
- How to get the datakey value in DetailsView control
- DetailsView autogeneraterows property
- DetailsView fields
- Formatting DetailsView control with style properties
- Using Boundfields in DetailsView control
- Display message using EmptyDataTemplate in the DetailsView Control
- How to access DetailsView's fields programmatically
- Bind a DetailsView control with a DropDownList control
- Using Command buttons in DetailsView control
- Using Commandfield element in a DetailsView control
- Using buttonfield in a DetailsView control
Most Viewed
Azure Q & A
Azure Platform
Grid-View
GridView CommandField example
Details-View
GridView and DetailsView Master/Detail page using SqlDataSource control
POCO
POCO overview and advantages - POCO class, Entity Framework in Enterprise Applications
Entity Framework
Query entity data model using linq to entities
Array List
Difference between arraylist and list collection
Web Services
How to create a Web service using Visual Studio.net
Form-View
FormView DataBound Event
Object Oriented Programming
Calling base class constructor in C#
Linq
Convert a sequence to a generic list using ToList()method
ERP
ERP Software Development
Project Ideas
Project ideas for students
AccountingSoftware
Accounting Software
MVC
Creating an ASP.Net MVC 3 application
.Net
Using assemblies in .net applications
ASP .Net
How to implement form validation using ASP.Net 2.0 Validation Controls