How to Display MasterDetail Data from a Database using ListView and GridView Control in Asp.Net

Description:-

In this post, I explain how to Display Master/Detail Data from a Database using List View and GridView Control in ASP.NET.

Step - 1: Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database under Data > Enter Database name > Add.

Step-3: Create 2 table for Master Details Record.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used table as below

-------------------------------------------------------------------------

CREATETABLE [dbo].[Table_1](

      [CID] [int] NOTNULL,

      [CustomerCode] [varchar](10)NOTNULL,

      [CustomerName] [varchar](50)NOTNULL,

      [ContactNo] [varchar](20)NOTNULL,

      [State] [varchar](50)NOTNULL,

      [City] [varchar](50)NOTNULL,

CONSTRAINT [PK_Table_1] PRIMARYKEYCLUSTERED

(

      [CID] ASC

)WITH (PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON [PRIMARY]

)ON [PRIMARY]

GO

-------------------------------------------------------------------------

CREATETABLE [dbo].[Table_2](

      [OrderID] [int] NOTNULL,

      [CID] [int] NOTNULL,

      [OrderNo] [int] NOTNULL,

      [OrderDate] [datetime] NOTNULL,

      [Quantity] [int] NOTNULL,

      [UnitPrice] [numeric](12, 2)NOTNULL,

      [TotalAmount] [numeric](12, 2)NOTNULL,

CONSTRAINT [PK_Table_2] PRIMARYKEYCLUSTERED

(

      [OrderID] ASC

)WITH (PAD_INDEX=OFF,STATISTICS_NORECOMPUTE=OFF,IGNORE_DUP_KEY=OFF,ALLOW_ROW_LOCKS=ON,ALLOW_PAGE_LOCKS=ON)ON [PRIMARY]

)ON [PRIMARY]

GO

ALTERTABLE [dbo].[Table_2]  WITHCHECKADDCONSTRAINT [FK_Table_2_Table_1] FOREIGNKEY([CID])

REFERENCES [dbo].[Table_1]([CID])

GO

ALTERTABLE [dbo].[Table_2] CHECKCONSTRAINT [FK_Table_2_Table_1]

GO

-------------------------------------------------------------------------

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.

A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >

Choose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Webpage and Design for show Master Details Record using List View& Gridview Control in Webpage.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

CSS Code:-

<style type="text/css">
.collapse
{
background-position: left-172px;
height: 14px;
width: 13px;
background-repeat: no-repeat;
background-image: url("DXR.png");
cursor: pointer;
}
.expand
{
background-position: -14px-187px;
height: 14px;
width: 13px;
background-repeat: no-repeat;
background-image: url("DXR.png");
cursor: pointer;
}
table
{
border: solid1pxblack;
}
tabletd
{
border-right: solid1pxblack;
border-bottom: solid1pxblack;
}
tableth
{
border-bottom: solid1pxblack;
}
.SUBDIVtable
{
border: 0px;
border-left: 1pxsolidblack;
}
</style>

Java Script Code:-

To download JQuery Refer this link http://code.jquery.com/jquery-1.7.1.js

<script src="jquery-1.7.1.js"type="text/javascript"></script>
<script language="javascript">
$(document).ready(function () {
// THIS IS FOR HIDE ALL DETAILS ROW
$(".SUBDIV table tr:not(:first-child)").not("trtr").hide();
$(".SUBDIV .btncolexp").click(function () {
$(this).closest('tr').next('tr').toggle();
//this is for change img of btncolexp button
if ($(this).attr('class').toString() == "btncolexp collapse") {
$(this).addClass('expand');
$(this).removeClass('collapse');
}
else {
$(this).removeClass('expand');
$(this).addClass('collapse');
}
});
});
</script>

Html Code:-

<div>
   <h3>
      Master Details Record using ListView & Gridview Control in ASP.NET
   </h3>
   <div>
      <asp:ListViewID="ListView1"runat="server"OnItemDataBound="ListView1_ItemDataBound">
      <LayoutTemplate>
         <tablewidth="100%"border="0"cellpadding="0"cellspacing="0">
         <tr>
            <thwidth="15px">
            </th>
            <thwidth="15%">
            Customer Code
            </th>
            <thwidth="25%">
            Customer Name
            </th>
            <thwidth="20%">
            Contact No
            </th>
            <thwidth="20%">
            State
            </th>
            <th>
               City
            </th>
         </tr>
         </table>
         <divrunat="server"id="itemPlaceHolder">
   </div>
   </LayoutTemplate>
   <ItemTemplate>
      <divid="Div1"class="SUBDIV"runat="server">
      <tablewidth="100%"border="0"cellpadding="0"cellspacing="0">
      <tr>
         <tdwidth="15px">
         <divclass="btncolexp collapse">
         &nbsp;
</div>
</td>
<tdwidth="15%">
<%#Eval("CustomerCode") %>
</td>
<tdwidth="25%">
<%#Eval("CustomerName") %>
</td>
<tdwidth="20%">
<%#Eval("ContactNo") %>
</td>
<tdwidth="20%">
<%#Eval("State") %>
</td>
<td>
<%#Eval("City") %>
</td>
</tr>
<tr>
<tdcolspan="6">
<divstyle="margin: 20px">
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="false">
<Columns>
<asp:BoundFieldHeaderText="Order ID"DataField="OrderID"/>
<asp:BoundFieldHeaderText="Order No"DataField="OrderNo"/>
<asp:BoundFieldHeaderText="Order Date"DataField="OrderDate"/>
<asp:BoundFieldHeaderText="Quantity"DataField="Quantity"/>
<asp:BoundFieldHeaderText="UnitPrice"DataField="UnitPrice"/>
<asp:BoundFieldHeaderText="Total"DataField="TotalAmount"/>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</div>

Step-6: Write code in Page_Load event for fetch Master data from database and bind to List View Control for show master details record in webpage.

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        PopulateData();
    }
}

private void PopulateData()
{
    using (UHEntities dc = newUHEntities())
    {
        var v = dc.Table_1.ToList();
        ListView1.DataSource = v;
        ListView1.DataBind();
    }
}

Step-7: Write code in ListView1_ItemDataBound event for fetch corresponding details record and bind it to the Gridview (inside ListView).

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        ListViewDataItemlvItem = (ListViewDataItem)e.Item;
        Table_1cus = (Table_1)lvItem.DataItem;
        if (cus != null)
        {
            GridView gv1 = (GridView)e.Item.FindControl("GridView1");
            if (gv1 != null)
            {
                using (UHEntities dc = newUHEntities())
                {
                    var v = dc.Table_2.Where(a =>a.CID.Equals(cus.CID)).ToList();
                    gv1.DataSource = v;
                    gv1.DataBind();
                }
            }
        }
    }
}

Step-8: Run Application.

Author : Umesh Patel

Related Posts