ASP.NET is an open-source, server-side web-application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, applications and services.
In this article, I will show you how to open modal pop up on the click of GridView row. This can be useful in many scenarios like showing details or editing the record without leaving the page.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ccl" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Grd_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow row = ((GridView)sender).SelectedRow;
if (row == null) return;
ModalPopupExtender extender = row.FindControl("extPerson") as ModalPopupExtender;
if (extender != null)
{
extender.Show();
}
}
private DataSet CreateDS()
{
DataSet ds = new DataSet();
if (Session["ds"] == null)
{
DataTable dt = new DataTable("PersonData");
DataRow dr;
dt.Columns.Add(new DataColumn("Person_ID", typeof(Int32)));
dt.Columns.Add(new DataColumn("PersonName", typeof(string)));
dt.Columns.Add(new DataColumn("Company", typeof(string)));
for (int i = 1; i < 10; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Person " + i;
dr[2] = "Company " + i;
dt.Rows.Add(dr);
}
DataColumn parentCol;
parentCol = dt.Columns["Person_ID"];
ds.Tables.Add(dt);
DataColumn[] PrimaryKeyColumns = new DataColumn[1];
PrimaryKeyColumns[0] = dt.Columns["Person_Id"];
dt.PrimaryKey = PrimaryKeyColumns;
Session["ds"] = ds;
}
else
{
ds = (DataSet)Session["ds"];
}
return ds;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.Grd.DataSource = CreateDS();
this.Grd.DataBind();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManger1" runat="Server"></asp:ScriptManager>
<div>
<asp:GridView ID="Grd" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="Grd_SelectedIndexChanged">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lblPerson" runat="server" Text='<%# Eval("PersonName") %>' />
<asp:Panel ID="pnlPerson" runat="server" Style="display: none" Width="400px" Height="400px"
BackColor="CadetBlue">
<div style="float: right;">
<asp:LinkButton ID="lnkClose" runat="server">Close</asp:LinkButton>
</div>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
</asp:Panel>
<ccl:ModalPopupExtender ID="extPerson" runat="server" TargetControlID="lblPerson"
PopupControlID="pnlPerson" DropShadow="true" CancelControlID="lnkClose" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>