Hi nadeem1218,
I have created a sample which full fill your requirement you need to modify the code according to your need.
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;
}
.modalBackground
{
background-color: Black;
filter: alpha(opacity=40);
opacity: 0.4;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
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;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<br />
<div style="padding-left: 20px !important;">
<asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<th>
CustomerId
</th>
<th>
ContactName
</th>
<th>
Country
</th>
<th>
Images
</th>
</tr>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:Label ID="lblId" Text='<%# Eval("ID") %>' runat="server" />
</td>
<td>
<asp:Label ID="lblName" Text='<%# Eval("Name") %>' runat="server" />
</td>
<td>
<asp:Label ID="lblCountry" Text='<%# Eval("Country") %>' runat="server" />
</td>
<td>
<asp:ImageButton ID="imgShow" Width="50px" Height="50px" ImageUrl='<%# Eval("ImageUrl") %>'
runat="server" OnClick="ShowModal" />
</td>
</ItemTemplate>
</asp:ListView>
</div>
<asp:ImageButton ID="lnkFake" runat="server" Style="display: none" />
<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">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 60px">
<b>Id: </b>
</td>
<td>
<asp:Label ID="lblId" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Name: </b>
</td>
<td>
<asp:Label ID="lblName" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Country: </b>
</td>
<td>
<asp:Label ID="lblCountry" runat="server" />
</td>
</tr>
<tr>
<td>
<b>Image: </b>
</td>
<td>
<asp:Image ID="imgUrl" ImageUrl="" runat="server" />
</td>
</tr>
</table>
</div>
<div class="footer" align="right">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="button" />
</div>
</asp:Panel>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country"), new DataColumn("ImageUrl") });
dt.Rows.Add(1, "John Hammond", "United States", "images/John.jpg");
dt.Rows.Add(2, "Luke", "Ireland", "images/Luke.jpg");
dt.Rows.Add(3, "Suzanne Mathews", "France", "images/Suzanne.jpg");
dt.Rows.Add(4, "Robert Schidner", "Russia", "images/Robert.jpg");
dt.Rows.Add(5, "Lokesh", "Japan", "images/Lokesh.jpg");
lvCustomers.DataSource = dt;
lvCustomers.DataBind();
}
}
protected void ShowModal(object sender, EventArgs e)
{
ListViewItem item = (sender as ImageButton).NamingContainer as ListViewItem;
lblId.Text = (item.FindControl("lblId") as Label).Text;
lblName.Text = (item.FindControl("lblName") as Label).Text;
lblCountry.Text = (item.FindControl("lblCountry") as Label).Text;
imgUrl.ImageUrl = (sender as ImageButton).ImageUrl;
mpe.Show();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country"), New DataColumn("ImageUrl")})
dt.Rows.Add(1, "John Hammond", "United States", "images/John.jpg")
dt.Rows.Add(2, "Luke", "Ireland", "images/Luke.jpg")
dt.Rows.Add(3, "Suzanne Mathews", "France", "images/Suzanne.jpg")
dt.Rows.Add(4, "Robert Schidner", "Russia", "images/Robert.jpg")
dt.Rows.Add(5, "Lokesh", "Japan", "images/Lokesh.jpg")
lvCustomers.DataSource = dt
lvCustomers.DataBind()
End If
End Sub
Protected Sub ShowModal(sender As Object, e As EventArgs)
Dim item As ListViewItem = TryCast(TryCast(sender, ImageButton).NamingContainer, ListViewItem)
lblId.Text = TryCast(item.FindControl("lblId"), Label).Text
lblName.Text = TryCast(item.FindControl("lblName"), Label).Text
lblCountry.Text = TryCast(item.FindControl("lblCountry"), Label).Text
imgUrl.ImageUrl = TryCast(sender, ImageButton).ImageUrl
mpe.Show()
End Sub
ScreenShot
