santosh-asp tutorial

How to create Gridview Popup Form

Following program shows how to create a Popup window from a Gridview Event. In this program we are using ModalPopup extender to display a Popup window in the webpage.

We use SQL DATABASE:-

  

    Create table  tblRecord
    (
      Id int primary key, Name varchar(200),Branch varchar(50)
     )
--Insert some record

Ajax ModalPopup extender

The Ajax ModalPopup extender in Asp.Net allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc . If you want to know more about Asp.Net Ajax click the following link...

It is important to note that, you should register Assembly in you aspx page top line.

  

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Default.aspx code:-

  

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gvDetail" runat="server" AutoGenerateColumns="false" DataKeyNames="Id">
        <Columns>
	<asp:BoundField DataField="Id" HeaderText="Id" />
	<asp:BoundField DataField="Name" HeaderText="Name" />
	<asp:BoundField DataField="Branch" HeaderText="Branch" />
	
	<asp:TemplateField HeaderText="Edit">
	<ItemTemplate>
		<asp:LinkButton ID="lnkEdit" Text="Edit"  OnClick="lnkEdit_Click" runat="server"></asp:LinkButton>
	</ItemTemplate>
	</asp:TemplateField>
	</Columns>
        
    </asp:GridView>
   <asp:Label ID="lblmsg" runat="server"/>
<asp:Button ID="modelPopup" runat="server" style="display:none" />
     
       <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="modelPopup" PopupControlID="updatePanel"
CancelControlID="btnCancel" BackgroundCssClass="tableBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="updatePanel" runat="server" BackColor="White" Height="230px" Width="300px" style="display:none">
<table width="100%" cellspacing="4">
	<tr style="background-color:#33CC66">
	<td colspan="2"  align="center">Student Details</td>
	</tr>
	<tr>
		<td align="right" style=" width:45%">
		Student ID:
		</td>
		<td>
		<asp:Label ID="lblId" runat="server"></asp:Label>
		</td>
	</tr>
	<tr>
		<td align="right">
		 Name:
		</td>
		<td>
		<asp:TextBox ID="txtName" runat="server"/>
		</td>
	</tr>
	<tr>
		<td align="right">
		Branch:
		</td>
		<td>
		<asp:TextBox ID="txtBranch" runat="server"/>
		</td>
	</tr>
	
	
	
	<tr>
		<td align=right >
		<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update Data" onclick="btnModity_Click"/>
		</td>
		<td>
		<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
		</td>
	</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>

C# Source Code:-

  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class Default : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Data source=PS-PC\\SANTOSH; Database=dbSantoshTest; Integrated Security=true");  //connection is created.....
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            loadRecord();
        }
    }
    protected void loadRecord()  //bind gridview.....
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("Select * from tblRecord", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        int count = ds.Tables[0].Rows.Count;
        con.Close();
        if (ds.Tables[0].Rows.Count > 0)
        {
            gvDetail.DataSource = ds;
            gvDetail.DataBind();
        }
        else
        {
            ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
            gvDetail.DataSource = ds;
            gvDetail.DataBind();
            int columncount = gvDetail.Rows[0].Cells.Count;
            lblmsg.Text = " No data found !!!";
        }
    }

    protected void btnModity_Click(object sender, EventArgs e)
    {
        string Id = lblId.Text;
        con.Open();
        SqlCommand cmd = new SqlCommand("update tblRecord set Name ='" + txtName.Text+ "', Branch='" + txtBranch.Text +"' where Id='" + lblId.Text+"'", con);
        cmd.ExecuteNonQuery();
        con.Close();
        lblmsg.Text = "Data Updated...";
        loadRecord();
    }
    protected void lnkEdit_Click(object sender, EventArgs e)
    {
        LinkButton btnsubmit = sender as LinkButton;
        GridViewRow gRow = (GridViewRow)btnsubmit.NamingContainer;
        lblId.Text = gvDetail.DataKeys[gRow.RowIndex].Value.ToString();
        txtName.Text = gRow.Cells[1].Text;
        txtBranch.Text = gRow.Cells[2].Text;
       
        this.ModalPopupExtender1.Show();
    }
}