GridView and DetailsView Master/Detail page using ObjectDataSource control

The GridView and DetailsView controls are frequently used with ObjectDataSource control to display data in a Master/Detail page. Note that if you are developing an ERP software or any application software based on a three-tier architecture design, SqlDataSource control cannot be used. So, we have to use the ObjectDataSource control to create a three-tier architecture software application.

In this example, we have used GridView control to display the list of accounts, DetailsView control to display the details of a selected account and the ObjectDataSource controls to connect to the business objects.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MasterDetail.aspx.cs" 
Inherits="myCsPresentationLayer.MasterDetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">

.column
{
	float:left;
	padding:10px;
	width:265px;
}
</style>
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="column">
<asp:GridView ID="GridView1" DataSourceID="ObjectDataSource1" 	 
AutoGenerateColumns="false"					
DataKeyNames="AccountCode"  AutoGenerateSelectButton="true"  
    	runat="server" >
    	<Columns>
<asp:BoundField DataField="AccountCode" HeaderText="AccountCode"  />
    <asp:BoundField DataField="AccountName" HeaderText="AccountName"  />
   </Columns>
   </asp:GridView>
   </div>
 <div class="column">
       
<asp:DetailsView ID="DetailsView1" 
	DefaultMode= "Edit"  AutoGenerateEditButton="true" 						
	AutoGenerateInsertButton="true" AutoGenerateDeleteButton="true"				
	DataSourceID="ObjectDataSource2" 	runat="server">
</asp:DetailsView>
   
   </div>
   
   <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
   SelectMethod="AllAccounts"
   TypeName="myCsBusinessLayer.BusinessObjects.Account">
       </asp:ObjectDataSource>
       
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" 
SelectMethod="SingleAccountDetail"
     TypeName="myCsBusinessLayer.BusinessObjects.Account">
            <SelectParameters>
             <asp:ControlParameter  DefaultValue="A002" 
			 Name="AccountCode" ControlID="GridView1" 
                PropertyName="SelectedValue">
                </asp:ControlParameter>
         </SelectParameters>
        </asp:ObjectDataSource>
    </div>
    </form>
</body>
</html>

output of GridView and DetailsView Master/Detail page

In the above code, we have used two ObjectDataSource controls, ObjectDataSource1 and ObjectDataSource2, ObjectDataSource1 to bind the GridView control and ObjectDataSource2 to bind the DetailsView control.

Firstly, we need to configure the ObjectDataSource1 control to retrieve code and name of all the accounts. To do so, we set the SelectMethod property to the name of the class method which exists in the Business Layer. The ObjectdataSource control calls the class method to retrieve data (account's code and name).

We set the AllAccounts() method to the SelectMethod of the ObjectDataSource1. We also specify the name of the type of object that the ObjectDataSource control represents using TypeName property. Set the TypeName property as shown below.
TypeName="myCsBusinessLayer.BusinessObjects.Account"

Observe the code in the BusinessLayer class which is given below. The myCsBusinessLayer and BusinessObjects are the namespaces and Account is the class.

The class Account.cs should contain the methods that are directly used by the ObjectDataSource controls. The Account class contains two methods required by the ObjectDataSource controls. The method AllAccounts() retrieves all accounts from the Accountstable and returns as a DataSet. This method is called by ObjectdataSoiurce1. The method SingleAccountDetail() retrieves account details for a paricular account. This method is called by ObjectdataSoiurce2.

The following is the code for the Account class.

namespace myCsBusinessLayer
{
namespace BusinessObjects
{
public class Account
{
	private string PrivateConnectionString = "Server=LocalHost ;
	Database=ERPFinAccounting;User ID=kris;Password=rooman123;";
	
	#region "AllAccounts - Return all Accounts 
	public DataSet AllAccounts()
	{
		DataSet localDSOutput;
		string ParamsStoredProcedure = "AllAccounts";
		DataServer localOutPutServer = new DataServer(PrivateConnectionString);
		localDSOutput = localOutPutServer.returnDataSet
				(ParamsStoredProcedure, "AccountsTable");
		return localDSOutput;
	}
	#endregion

	public DataSet SingleAccountDetail(string AccountCode)
	{
		DataSet localDSOutput;
		string ParamsStoredProcedure;
		DataServer localOutPutServer = new DataServer(PrivateConnectionString);
		localOutPutServer.BuildParameter("@AccCode", AccountCode, 
		DataServer.SQLDataType.SQLString, 6, ParameterDirection.Input);
		ParamsStoredProcedure = "DisplayAccountByCode";
		localDSOutput = localOutPutServer.returnDataSet
				(ParamsStoredProcedure, "AccountsTable");
		return localDSOutput;
	}
}
}// end of the class
}// end of the namespace

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

Next, we need to configure the ObjectDataSource2 control to retrieve the selected account details. We set the SingleAccountDetail()method to the SelectMethod of the ObjectDataSource2. The method SingleAccountDetail() retrieves account details of a particular account.

The GridView control displays AccountCode and AccountName columns. The DetailsView control displays details of the single account which is selected by the user.

By setting the AutoGenerateSelectbutton property to 'true', the Select button is displayed for each row of the GridView control. This button is rendered as a link button as shown in fig.

How to Display the Selected row details in a DetailsView in a Master/Detail page

Explanation is similar to the previous article, listed here..

GridView and DetailsView Master/Detail page using SqlDataSource control

DetailsView Articles