GridView and DetailsView Master/Detail page using SqlDataSource control

The GridView and DetailsView controls are commonly used in a Master/Detail page. A Master/Detail page is a page that displays a list of items from a database along with the details of a selected item in the list. The DetailsView control is often used to display the details portion in a Master/Detail page.

The list of items can be displayed in a Master/Detail page using a DropDownList or a GridView control. In this example, we have used GridView control to display the list of items and DetailsView control to display the details of a selected item in the list.

In the example, we have used two data source controls, one to bind the GridView control and the other to bind the DetailsView control. The data source control which is connected to the GridView control retrieves all the items from the AccountsTable.

The data source control which is connected to the DetailsView control retrieves the single account details selected by the user in the GridView control. The datasouce control SqlDataSource1 is connected to the GridView control and the datasouce control SqlDataSource2 is connected to the DetailsView control.

<asp:GridView ID="GridView1" DataSourceID="SqlDataSource1" 
DataKeyNames="AccountCode"  AutoGenerateSelectButton="true" 
runat="server" />

<asp:DetailsView ID="DetailsView1" 
DefaultMode= "Edit"  AutoGenerateEditButton="true" AutoGenerateInsertButton="true" 
AutoGenerateDeleteButton="true"
DataSourceID="SqlDataSource2" 	runat="server">
</asp:DetailsView>
   
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 			
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT AccountCode, AccountName FROM AccountsTable">
</asp:SqlDataSource> 

<asp:SqlDataSource ID="SqlDataSource2" 						
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT * FROM AccountsTable Where AccountCode=@Code" 
UpdateCommand="Update AccountsTable 
SET AccountName=@AccountName,AccountDescription=@AccountDescription,
AccountPGroup=@AccountPgroup Where AccountCode=@AccountCode" 
runat="server">
<SelectParameters>
<asp:ControlParameter Name="Code" ControlID="GridView1"/>
</SelectParameters>
</asp:SqlDataSource>



output of GridView and DetailsView Master/Detail page using SqlDataSource control

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

We need to enable a user to select a particular row in a GridView control when we want to build a single page Master/Detail page. To do so, we set the GridView control AutoGenerateSelectbutton property to 'true'. This results in a Select button for each row of the GridView rendered as LinkButton, as shown in Figure.

We also set the DefaultMode property of the DetailsView control to 'Edit' which results in the DetailsView control appearing in the EditMode. This is useful to enable the user to edit the data in a master/detail relationship. At runtime, when the user selects a record in the GridView, the selected record is displayed by the DetailsView control and this data can be edited.

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

To display the selected row, the Code parameter's value is first retrieved from the GridView control SelectedValue property.

The GridView control's SelectedValue property contains the first datakey value of the selected row. To do the above, the GridView's DataKeyNames property is set to AccountCode. When the user clicks on the Select button, a postback occurs and the GridView's SelectedValue property returns the AccountCode of the selected row, and the DetailsView shows the details of a selected account.

For the above to happen, the ControlParameter object is added to the SelectParameters collection of the SqlDataSource control (SqlDataSource2). Note that datasource control SqlDataSource2 is bound to the DetailsView control.

When using ControlParameter object, we need to set the ControlID property to point to the GridView control (GridView1). The ControlParameter represents the AccountCode of the selected account in the GridView control. When using a ControlParameter, we must always set the value of the ControlID property to point to a control on a page (here, GridView control).



cover image of azure cloud book

Develop Azure Applications

Azure Cloud is gaining popularity and is competing with Amazon Elastic Cloud and Google Cloud for a spot in the billion dollar Cloud computing space.

With this book learn how to use - Table (an Azure Table is different from a SQL Server Table), Queue, Blob storage services, use your local machine to create an Application and a Service, how Azure splits a Table to achieve Load Balancing, Scalability based on the Partition Key, AppFabric Service Bus, Access Control Service, role of Fabric Controller, features of Azure SQL Database and Content Delivery Network.

Many have mastered Cloud Programming and are enjoying the benefits. Why not you?

View Highlights » View Contents »
cover image of foundation database programming book

Create your Own Accounting Software

A foundation book to Master Accounting Software Development, VB.Net, C# and OOPs programming. Detailed explanation of the Accounting domain for programmers is included. SQL and ADO.Net is also covered in detail.

This book gives you a strong foundation in Application Development.

A thorough understanding of the contents will enable you to grasp the topics covered in the accompanying books quite easily. This is because, the accounting domain is dealt with great detail in this book.

The ideal book to get started with application development in the .Net world.

View Highlights » View Contents »

cover image of asp.net book

Create your Own WEB ERP Software using ASP.Net

This book opens you to the Web. Using ASP.Net, C# and SQL Server as the tools, you will learn to build a Multi Tier Web Application as recommended by Microsoft. You will learn implementing inline GridView control, Transaction Management for a layered Web Application, build Data Access component and a Business Layer component.

Opens you to a world of opportunities. You will be able to develop a Web ERP application including all the five modules and learn how to use the TreeView control and GridView control to implement transactions such as Purchase Invoice, Sales Order and Sales Invoice.

View Highlights » View Contents »
cover image of entity framework book

ASP.Net MVC 5 Application Development Using Entity Framework 6 and VS 2015

Entity frameworks is the latest buzz in .Net programming and is the data access technology for Microsoft OS based hand held devices and web applications. Learn to integrate EF into an ASP.Net Application and MVC application. Create, explore and query the Entity Data Model. Learn how to use ObjectDataSource control and GridView control in an ASP.Net Application.

Also, learn to build Three-Tier ASP.Net application, create a business-class, implement methods in the class to perform CRUD operations and bind a GridView to the ObjectDataSource control. Learn how to handle concurrency and managing Transactions.

View Contents »