Net-informations.com
SiteMap  | About    

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.

gridview popup window

Database

In this article I have used Microsoft's Pubs database for sample data. You can download it free from the following link.

Download

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...

Asp.Net Ajax Tutorial

In this application, we display some data from Publisher table and provide a LinkBotton to edit the rows. When click on the LinkButton, a Popup window will appear and it allows to edit the row. The ModalPopupExtender that this popup is attached to has a hidden TargetControl.

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

  

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

And add AjaxControlToolkit.dll to your bin folder before you do the Popup coding.

gridview ajax ModalPopup

Default.aspx

  

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
<title>Popup Window</title>
<style type="text/css">
.tableBackground
{
	background-color:silver;
	opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:GridView runat="server" ID="gridView1" DataKeyNames="stor_id" AutoGenerateColumns="false">
	<Columns>
	<asp:BoundField DataField="stor_name" HeaderText="Store Name" />
	<asp:BoundField DataField="stor_address" HeaderText="Store Address" />
	<asp:BoundField DataField="city" HeaderText="City" />
	<asp:BoundField DataField="state" HeaderText="State" />
	<asp:BoundField DataField="zip" HeaderText="Zip" />
	<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: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">Store Details</td>
	</tr>
	<tr>
		<td align="right" style=" width:45%">
		Stor ID:
		</td>
		<td>
		<asp:Label ID="lblstor_id" runat="server"></asp:Label>
		</td>
	</tr>
	<tr>
		<td align="right">
		Store Name:
		</td>
		<td>
		<asp:TextBox ID="txtstor_name" runat="server"/>
		</td>
	</tr>
	<tr>
		<td align="right">
		Store Address:
		</td>
		<td>
		<asp:TextBox ID="txtstor_address" runat="server"/>
		</td>
	</tr>
	<tr>
		<td align="right">
		City:
		</td>
		<td>
		<asp:TextBox ID="txtcity" runat="server"/>
		</td>
	</tr>
	<tr>
		<td align="right">
		State:
		</td>
		<td>
		<asp:TextBox ID="txtstate" runat="server"/>
		</td>
	</tr>
	<tr>
		<td align="right">
		Zip:
		</td>
		<td>
		<asp:TextBox ID="txtzip" 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.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using AjaxControlToolkit;
public partial class _Default : System.Web.UI.Page
{
	private SqlConnection cnn = new SqlConnection("Data Source=.;Initial Catalog=pubs;User ID=sa;Password=*****");
	protected void Page_Load(object sender, EventArgs e)
	{
		if(!IsPostBack)
		{
			loadStores();
		}
	}
	protected void loadStores()
	{
		cnn.Open();
		SqlCommand cmd = new SqlCommand("Select * from stores", cnn);
		SqlDataAdapter da = new SqlDataAdapter(cmd);
		DataSet ds = new DataSet();
		da.Fill(ds);
		int count = ds.Tables[0].Rows.Count;
		cnn.Close();
		if (ds.Tables[0].Rows.Count > 0)
		{
			gridView1.DataSource = ds;
			gridView1.DataBind();
		}
		else
		{
			lblmsg.Text = " No data found !!!";
		}
	}
	protected void btnModity_Click(object sender, EventArgs e)
	{
		string stor_id = lblstor_id.Text;
		cnn.Open();
		SqlCommand cmd = new SqlCommand("update stores set stor_name='" + txtstor_name.Text + "', stor_address='" + txtstor_address.Text + "', city='" + txtcity.Text + "', state='" + txtstate.Text + "', zip='" + txtzip.Text + "' where stor_id=" + lblstor_id.Text, cnn);
		cmd.ExecuteNonQuery();
		cnn.Close();
		lblmsg.Text = "Data Updated...";
		loadStores();
	}
	protected void lnkEdit_Click(object sender, EventArgs e)
	{
		LinkButton btnsubmit = sender as LinkButton;
		GridViewRow gRow = (GridViewRow)btnsubmit.NamingContainer;
		lblstor_id.Text = gridView1.DataKeys[gRow.RowIndex].Value.ToString();
		txtstor_name.Text = gRow.Cells[0].Text;
		txtstor_address.Text = gRow.Cells[1].Text;
		txtcity.Text = gRow.Cells[2].Text;
		txtstate.Text = gRow.Cells[3].Text;
		txtzip.Text = gRow.Cells[4].Text;
		this.ModalPopupExtender1.Show();
	}
}

VB.Net Source Code

  

Imports System.Data
Imports System.Data.SqlClient
Imports AjaxControlToolkit
Partial Class _Default
	Inherits System.Web.UI.Page
	Private cnn As New SqlConnection("Data Source=.;Initial Catalog=pubs;User ID=sa;Password=*****")
	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
		If Not IsPostBack Then
			loadStores()
		End If
	End Sub
	Protected Sub loadStores()
		cnn.Open()
		Dim cmd As New SqlCommand("Select * from stores", cnn)
		Dim da As New SqlDataAdapter(cmd)
		Dim ds As New DataSet()
		da.Fill(ds)
		Dim count As Integer = ds.Tables(0).Rows.Count
		cnn.Close()
		If ds.Tables(0).Rows.Count > 0 Then
			gridView1.DataSource = ds
			gridView1.DataBind()
		Else
			lblmsg.Text = " No data found !!!"
		End If
	End Sub
	Protected Sub btnModity_Click(ByVal sender As Object, ByVal e As EventArgs)
		Dim stor_id As String = lblstor_id.Text
		cnn.Open()
		Dim cmd As New SqlCommand("update stores set stor_name='" + txtstor_name.Text + "', stor_address='" + txtstor_address.Text + "', city='" + txtcity.Text + "', state='" + txtstate.Text + "', zip='" + txtzip.Text + "' where stor_id=" + lblstor_id.Text, cnn)
		cmd.ExecuteNonQuery()
		cnn.Close()
		lblmsg.Text = "Data Updated..."
		loadStores()
	End Sub
	Protected Sub lnkEdit_Click(ByVal sender As Object, ByVal e As EventArgs)
		Dim btnsubmit As LinkButton = TryCast(sender, LinkButton)
		Dim gRow As GridViewRow = DirectCast(btnsubmit.NamingContainer, GridViewRow)
		lblstor_id.Text = gridView1.DataKeys(gRow.RowIndex).Value.ToString()
		txtstor_name.Text = gRow.Cells(0).Text
		txtstor_address.Text = gRow.Cells(1).Text
		txtcity.Text = gRow.Cells(2).Text
		txtstate.Text = gRow.Cells(3).Text
		txtzip.Text = gRow.Cells(4).Text
		Me.ModalPopupExtender1.Show()
	End Sub
End Class






net-informations.com (C) 2017    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.