ModalPopupExtender Example for Editing Rows in a GridView (Master/Detail Scenario)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MasterDetail.aspx.cs"
Inherits="MasterDetail" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<head runat="server">
   <title>Untitled Page</title>
   <form id="form" runat="server">
       <asp:ScriptManager ID="scriptManager" runat="server" />
           <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
                   <asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
                   <asp:GridView ID="gvCustomers" runat="server" DataKeyNames="Id" AutoGenerateColumns="false"
                       AllowPaging="true" AllowSorting="true" PageSize="10" Width="95%">
                       <AlternatingRowStyle BackColor="aliceBlue" />
                       <HeaderStyle HorizontalAlign="Left" />
                           <asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px">
                                   <asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
                           <asp:BoundField DataField="Id" HeaderText="ID" SortExpression="Id" ReadOnly="true" />
                           <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="contactname" ReadOnly="true" />
           <asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
           <ajaxtoolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
               PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
           <asp:Panel ID="pnlPopup" runat="server" Width="500px" Style="display: none">
               <asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
                       <asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" BackColor="lightblue"
                           Width="95%" />
                       <asp:DetailsView ID="dvCustomerDetail" runat="server" DefaultMode="Edit" Width="95%"
                           BackColor="white" />
               <div align="right" style="width: 95%">
                   <asp:Button ID="btnSave" runat="server" Text="Save"
OnClientClick="alert('Sorry, but I didnt implement save '); return false;"
                       Width="50px" />
                   <asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class MasterDetail : System.Web.UI.Page
    DataSet ds;
    protected void Page_Load(object sender, EventArgs e)

        ds = Data();
        if (!this.IsPostBack)
            if (Session["parent"] == null)
                gvCustomers.DataSource = ds.Tables["Parent"];
                gvCustomers.DataSource = Session["Parent"] as DataTable;


    private DataSet Data()

        DataTable dt = new DataTable();
        dt.Columns.Add("Id", typeof(int));
        dt.Columns.Add("Name", typeof(string));

        dt.Rows.Add(new object[] { 1, "aaaa" });
        dt.Rows.Add(new object[] { 2, "bbbb" });
        dt.Rows.Add(new object[] { 3, "cccc" });
        dt.TableName = "Parent";

        DataTable dtc = new DataTable();
        dtc.Columns.Add("Id", typeof(int));
        dtc.Columns.Add("Qul", typeof(string));

        dtc.Rows.Add(new object[] { 1, "aaaa" });
        dtc.Rows.Add(new object[] { 2, "bbbb" });
        dtc.Rows.Add(new object[] { 3, "bbbb" });
        dtc.TableName = "Child";

        DataSet ds = new DataSet();

        Session["Parent"] = dt;

        return ds;

    protected void BtnViewDetails_Click(object sender, EventArgs e)
        //  get the gridviewrow from the sender so we can get the datakey we need
        Button btnDetails = sender as Button;
        GridViewRow row = (GridViewRow)btnDetails.NamingContainer;

        //  extract the id from the row whose details button originated the postback.
        //  grab the customerid and feed it to the customer details datasource
        //  finally, rebind the detailview
        DataView dv = new DataView(ds.Tables["Child"]);

        dv.RowFilter = "Id=" + Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value);
        dvCustomerDetail.DataSource = dv;

        //  update the contents in the detail panel
        //  show the modal popup


  1. Thanks boss.

    makes the big difference between your post and this post

    Thank you very much, you have solved for me a serious problem