Hi AjNoori,
Check this example. Now please take its reference and correct your code.
Database
For this sample I have used of NorthWind database that you can download using the link given below.
Download Northwind Database
HTML
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=40);
opacity: 0.4;
}
.modalPopup
{
background-color: #FFFFFF;
border: 3px solid #0DA9D0;
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
padding: 5px;
}
.modalPopup .footer
{
padding: 3px;
}
.modalPopup .button
{
height: 23px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modalPopup td
{
text-align: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Repeater ID="rptCustomers" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>
Customer Id
</th>
<th>
Customer Name
</th>
<th>
Country
</th>
<th>
Display Orders
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("CustomerId") %>' />
</td>
<td>
<asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' />
</td>
<td>
<asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Country") %>' />
</td>
<td>
<asp:Button Text="Display Orders" runat="server" ID="btnOrders" OnClick="DisplayOrders" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:LinkButton Text="" ID="lnkFake" runat="server" />
<cc1:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkFake"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
<div class="header">
Details
</div>
<div class="body">
<asp:Repeater ID="rptOrders" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>
Order Id
</th>
<th>
Date
</th>
<th>
Freight
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblOrderID" runat="server" Text='<%# Eval("OrderID") %>' />
</td>
<td>
<asp:Label ID="lblDate" runat="server" Text='<%# Eval("OrderDate") %>' />
</td>
<td>
<asp:Label ID="lblFreight" runat="server" Text='<%# Eval("Freight") %>' />
</td>
<td>
<asp:Label ID="lblCity" runat="server" Text='<%# Eval("ShipCity") %>' />
</td>
<td>
<asp:Label ID="lblCountry" runat="server" Text='<%# Eval("ShipCountry") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div class="footer" align="right">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" />
</div>
</asp:Panel>
</div>
</form>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindRepeater();
}
}
protected void DisplayOrders(object sender, EventArgs e)
{
RepeaterItem item = (sender as Button).NamingContainer as RepeaterItem;
string id = (item.FindControl("lblCustomerId") as Label).Text;
BindOrders(id);
mpe.Show();
}
private void BindRepeater()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 CustomerId,ContactName,Country FROM Customers", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
rptCustomers.DataSource = dt;
rptCustomers.DataBind();
}
}
}
}
private void BindOrders(string customerId)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 5 OrderID,OrderDate,Freight,ShipCity,ShipCountry FROM Orders WHERE CustomerId = @CustomerId", con))
{
cmd.Parameters.AddWithValue("@CustomerId", customerId);
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
rptOrders.DataSource = dt;
rptOrders.DataBind();
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindRepeater()
End If
End Sub
Protected Sub DisplayOrders(ByVal sender As Object, ByVal e As EventArgs)
Dim item As RepeaterItem = TryCast((TryCast(sender, Button)).NamingContainer, RepeaterItem)
Dim id As String = (TryCast(item.FindControl("lblCustomerId"), Label)).Text
BindOrders(id)
mpe.Show()
End Sub
Private Sub BindRepeater()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT TOP 10 CustomerId,ContactName,Country FROM Customers", con)
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
sda.Fill(dt)
rptCustomers.DataSource = dt
rptCustomers.DataBind()
End Using
End Using
End Using
End Sub
Private Sub BindOrders(ByVal customerId As String)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT TOP 5 OrderID,OrderDate,Freight,ShipCity,ShipCountry FROM Orders WHERE CustomerId = @CustomerId", con)
cmd.Parameters.AddWithValue("@CustomerId", customerId)
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
sda.Fill(dt)
rptOrders.DataSource = dt
rptOrders.DataBind()
End Using
End Using
End Using
End Sub
Screenshot
