Creating a Master-Detail Page

In ASP.NET, you can create a master-detail page that displays data from two related tables in a hierarchical layout. Here are the steps:

Create a new page, for example “MasterDetail.aspx”.

Add a GridView control to the page to display the master table, for example “Categories”.

<asp:GridView ID=”GridView1″ runat=”server” DataSourceID=”SqlDataSource1″>

</asp:GridView>

Add a SqlDataSource control to the page that retrieves the data from the master table.

<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:NorthwindConnectionString %>”

SelectCommand=”SELECT * FROM Categories”>

</asp:SqlDataSource>

Add a DetailsView control to the page to display the detail table, for example “Products”.

<asp:DetailsView ID=”DetailsView1″ runat=”server” DataSourceID=”SqlDataSource2″>

</asp:DetailsView>

Add a SqlDataSource control to the page that retrieves the data from the detail table, with a parameter that filters the results based on the selected row in the GridView control.

<asp:SqlDataSource ID=”SqlDataSource2″ runat=”server” ConnectionString=”<%$ ConnectionStrings:NorthwindConnectionString %>”

SelectCommand=”SELECT * FROM Products WHERE CategoryID = @CategoryID”>

<asp:Parameter Name=”CategoryID” Type=”Int32″ />

</SelectParameters>

</asp:SqlDataSource>

Note that the SelectCommand of the SqlDataSource2 control includes a WHERE clause that filters the results based on the “CategoryID” parameter.

Add an event handler for the SelectedIndexChanged event of the GridView control.

<asp:GridView ID=”GridView1″ runat=”server” DataSourceID=”SqlDataSource1″ OnSelectedIndexChanged=”GridView1_SelectedIndexChanged”>

</asp:GridView>

In the code behind, write the event handler that sets the value of the “CategoryID” parameter of the SqlDataSource2 control to the selected value of the GridView control.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

int categoryId = (int)GridView1.SelectedValue;

SqlDataSource2.SelectParameters[“CategoryID”].DefaultValue = categoryId.ToString();

DetailsView1.DataBind();

}

This event handler retrieves the selected value of the GridView control, sets the value of the “CategoryID” parameter of the SqlDataSource2 control to the selected value, and calls the DataBind method of the DetailsView control to refresh the data.

Run your application to see the results.

Now, when you select a row in the GridView control, the DetailsView control will display the related data from the detail table. The data displayed in the DetailsView control will be filtered based on the selected row in the GridView control.