This way:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).on("click", "[id*=lnkView]", function () {
$("#id").html($(".Id", $(this).closest("tr")).html());
$("#name").html($(".Name", $(this).closest("tr")).html());
$("#description").html($(".Description", $(this).closest("tr")).html());
$("#ImgPic").attr("src", $(this).closest("tr").find('img')[0].src);
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate>
<table border="1" cellpadding="1" style="width: 700px;">
<tr style="background-color: #E5E5FE">
<th align="left">
ID
</th>
<th align="left">
Name
</th>
<th align="left">
Country
</th>
<th>
Image
</th>
<th>
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label runat="server" CssClass="Id" ID="lblId" Text='<%# Eval("ID")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblName" CssClass="Name" Text='<%# Eval("Name")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDescription" CssClass="Description" Text='<%# Eval("Description")%>'></asp:Label>
</td>
<td>
<asp:Image CssClass="Image" ImageUrl='<%# Eval("Image") %>' AlternateText='<%# Eval("Image") %>'
runat="server" />
</td>
<td>
<asp:LinkButton Text="View" ID="lnkView" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
<div id="dialog" style="display: none">
<b>Id:</b> <span id="id"></span>
<br />
<b>Name:</b> <span id="name"></span>
<br />
<b>Description:</b> <span id="description"></span>
<br />
<br />
<b>Image:</b><asp:Image ID="ImgPic" runat="server" Height="80" Width="80" />
</div>
</div>
</form>
</body>
</html>
c#:
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description",typeof(string)),
new DataColumn("Image", typeof(string))});
dt.Rows.Add(1, "Mudassar Khan", "ASP.Net programmer and consultant in India.", "~/Images/Mudassar.jpg");
dt.Rows.Add(2, "Aditya Panchal", "Senior lead Excelasoft PVT", "~/Images/aditya2267.jpg");
dt.Rows.Add(3, "Shaikh Azimuddin", "Moderator of aspforums.net", "~/Images/Azim.jpg");
this.DataList1.DataSource = dt;
this.DataList1.DataBind();
}
}
Image:
Thank You.
