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: 400px;
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">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnViewDetails" ImageUrl="~/bolt.png" CommandArgument='<%# Eval("Id") %>'
OnClick="View" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<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:GridView ID="GridView2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
<asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="150" />
<asp:BoundField DataField="Phone" HeaderText="Phone" ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" Text="Redirect" OnClick="Redirect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</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[5] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)),
new DataColumn("City",typeof(string)),
new DataColumn("Phone",typeof(int))});
dt.Rows.Add(1, "John Hammond", "United States", "Lasvagas", 1234567899);
dt.Rows.Add(2, "Mudassar Khan", "India", "Mumbai", 1234567899);
dt.Rows.Add(3, "Suzanne Mathews", "France", "Paris", 1234567899);
dt.Rows.Add(4, "Robert Schidner", "Russia", "Mascow", 1234567899);
GridView1.DataSource = dt;
GridView1.DataBind();
ViewState["Table"] = dt;
}
}
protected void View(object sender, EventArgs e)
{
ImageButton imgbtn = sender as ImageButton;
DataTable dt = (DataTable)ViewState["Table"];
this.GridView2.DataSource = dt.Select("Id = '" + imgbtn.CommandArgument + "'").CopyToDataTable();
GridView2.DataBind();
mpe.Show();
}
protected void Redirect(object sender, EventArgs e)
{
Response.Redirect("your page");
}
Namespace:
using System.Data;
Image:
Thank You.
