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:-
<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">
</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.
