GridView with DetailsView

By: Rajesh P.S.

The DetailsView control in ASP.NET offers functionality similar to the GridView control, but with a distinct display style. While the GridView displays all records from its data source control in a tabular format, the DetailsView presents a single record at a time, resembling the Form View of a Microsoft Access database.

DetailsView control

The DetailsView control is commonly used for updating or deleting the currently displayed record, as well as inserting new records. It provides a user interface that allows users to interact with the data in a detailed manner, similar to how a form would be used in a database application.

Additionally, the DetailsView control is often used in master-details scenarios, where the selection of a record in a master control, such as a GridView, determines the record to display in the detail view. This allows for a hierarchical display of data, where users can view and modify specific details related to a selected master record.

The following ASP.NET program shows how to display a master-details data from database using GridView and DetailsView control. Here we are using master data as sales data and details as store data. When the user select a row of sales data then it displays the corresponding store details in DetailsView.

Default.aspx

<!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 id="Head1" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <br /><b><u>Sales Details</u></b><br /><br /> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="stor_id" AutoGenerateSelectButton="true" AllowPaging="True" pagesize ="5" /> <br /><b><u>Store Details</u></b><br /><br /> <asp:DetailsView id="DetailsView1" DataSourceID="SqlDataSource2" DataKeyNames="stor_id" AllowPaging ="true" Runat="server" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SQLDbConnection %>" SelectCommand="select * from sales" /> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:SQLDbConnection %>" SelectCommand="select * from stores WHERE stor_id=@stor_id" > <SelectParameters> <asp:ControlParameter Name="stor_id" ControlID="GridView1" /> </SelectParameters> </asp:SqlDataSource> </div> </form> </body> </html>

Conclusion

The DetailsView control has capabilities like editing, deletion, and insertion of records, making it a reusable enabling component for information management. Consequently, developers are allowed to use this feature to develop engaging user interfaces for record level operations, imparting on them a smooth and convenient experience.

Next > ASP.NET Detailsview Binding

Related Topics