How to add ajax modalpopupExtender control show on gridview

How to use ASP.Net AJAX Control Toolkit ModalPopupExtender Control to add, edit, delete and update record in ASP.Net GridView

Connection string

this is the  connection string to connect to the database.

<connectionStrings>

   <add name="ConnectionString" connectionString="Data Source=Localhost Initial Catalog=Manishdb;Persist Security Info=True;User ID=manish;Password=123" providerName="System.Data.SqlClient" />

</connectionStrings>

HTML Markup

Below is the HTML Text of the page.  I have placed a Script Manager on the form and an ASP.Net Update Panel on the page. Inside the Update Panel I have placed an ASP.Net GridView Control along with a Modal Popup Extender that will be used to Add or Edit the records in the GridView Control.

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="pnelupdate" runat="server">

<ContentTemplate>

<asp:GridView ID="grdview" runat="server" Width = "700px"

AutoGenerateColumns = "false" AlternatingRowStyle-BackColor = "#cccccc" 

HeaderStyle-BackColor = "red" AllowPaging ="true"

OnPageIndexChanging = "OnPaging"

PageSize = "10" >

<Columns>

<asp:BoundField DataField = "ID" HeaderText = "ID" HtmlEncode = "true" />

<asp:BoundField DataField = "Name" HeaderText = "Name" HtmlEncode = "true" />

<asp:BoundField DataField = "CompanyName" HeaderText = "Company Name" HtmlEncode = "true"/>

<asp:TemplateField ItemStyle-Width = "30px" HeaderText = "ID">

   <ItemTemplate>

       <asp:LinkButton ID="btnEdit" runat="server" Text = "Edit" OnClick = "Edit"></asp:LinkButton>

   </ItemTemplate>

</asp:TemplateField>

</Columns>

<AlternatingRowStyle BackColor="#cccccc" />

</asp:GridView>

<asp:Button ID="btnAdd" runat="server" Text="Add" OnClick = "Add" />

<asp:Panel ID="poppannel" runat="server" CssClass="modalPopupextr" style = "display:none">

<asp:Label Font-Bold = "true" ID = "Label4" runat = "server" Text = "Details" ></asp:Label>

<br />

<table align = "center">

<tr>

<td>

<asp:Label ID = "Label1" runat = "server" Text = "Id" ></asp:Label>

</td>

<td>

<asp:TextBox ID="txtID" Width = "40px" MaxLength = "5" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID = "Label2" runat = "server" Text = "Name" ></asp:Label>

</td>

<td>

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>   

</td>

</tr>

<tr>

<td>

<asp:Label ID = "Label3" runat = "server" Text = "Company" ></asp:Label>

</td>

<td>

<asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Button ID="btnSave" runat="server" Text="Save" OnClick = "Save" />

</td>

<td>

<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick = "return Hidepopup()"/>

</td>

</tr>

</table>

</asp:Panel>

<asp:LinkButton ID="lnkbtn" runat="server"></asp:LinkButton>

<cc1:ModalPopupExtender ID="popup" runat="server" DropShadow="false"

PopupControlID="poppannel" TargetControlID = "lnkbtn"

BackgroundCssClass="modalBackground">

</cc1:ModalPopupExtender>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID = "grdview" />

<asp:AsyncPostBackTrigger ControlID = "btnSave" />

</Triggers>

</asp:UpdatePanel>

Binding the data in  GridView control

The GridView Control. It simply fires a select query on the Employee table of the Database.

C#

private String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;

protected void Page_Load(object sender, EventArgs e)

{

    if (!IsPostBack)

    {

        this.BindData();

    }

}

private void BindData()

{

    string strQuery = "select ID,Name,CompanyName" +

                       " from Employee ";

    SqlCommand cmd = new SqlCommand(strQuery);

    grdview.DataSource = GetData(cmd);

    grdview.DataBind();

}

private DataTable GetData(SqlCommand cmd)

{

    DataTable dt = new DataTable();

    using (SqlConnection con = new SqlConnection(strConnString))

    {

        using (SqlDataAdapter sda = new SqlDataAdapter())

        {

            cmd.Connection = con;

            con.Open();

            sda.SelectCommand = cmd;

            sda.Fill(dt);

            return dt;

        }

    }

}

Add Functionality

On click of the add button the following method is called up, which simply sets the textboxes empty and displays the modal popup by calling the AJAX ModalPopupExtender.

C#

protected void Add(object sender, EventArgs e)

{

    txtID.ReadOnly = false;

    txtID.Text = "";

    txtName.Text = "";

    txtCompany.Text = "";

    popup.Show();

}

Edit Functionality

 the Edit button in the GridView row the following method gets called up which simply fills the textboxes with respective values.

C#

protected void Edit(object sender, EventArgs e)

{

    using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)

    {

        txtID.ReadOnly = true;

        txtID.Text = row.Cells[0].Text;

        txtName.Text = row.Cells[1].Text;

        txtCompany.Text = row.Cells[2].Text;           

        popup.Show();

    }

}

Updating the records

The following method gets called up when the Save button the modal popup is clicked.

C#

protected void Save(object sender, EventArgs e)

{

    using (SqlCommand cmd = new SqlCommand())

    {

       String sql="update Employee set  name='"+txtName.text+"' ,companyName='"+txtcompany.text+"' where id='"+txtID.text+"'";

      

        GridView1.DataSource = this.GetData(cmd);

        GridView1.DataBind();

    }

}