Introduction:
In this article I will show you that how you
can refresh the GridView control on the parent page from a pop up window. I will
discuss different scenarios which you will find very helpful when implementing
your solution.
Database Table:
I will be using my own custom table for this
article. The table name is Users which contain columns for UserID, UserName,
FirstName and LastName. UserID is an automatically generated primary key. Here
is the schema of the User's table.
if exists (select * from
dbo.sysobjects where id = object_id(N'[dbo].[Users]') and OBJECTPROPERTY(id,
N'IsUserTable') = 1)
drop table [dbo].[Users]
GO
CREATE TABLE [dbo].[Users] (
[UserID] [int] IDENTITY (1, 1) NOT NULL ,
[UserName] [varchar] (50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[FirstName] [varchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL ,
[LastName] [varchar] (20) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
) ON [PRIMARY]
GO |
Making the Parent Page:
The parent page will contain a GridView control
and a href tag. The href tag will open a new popup window which will be used to
insert the data into the database and refresh the GridView control which is
contained in the parent page. Let's see how the parent page is implemented.
Code Behind of the Parent Page:
|
protected
void Page_Load(object
sender, EventArgs
e) {
BindData();
}
private
void
BindData()
{
// make the
query
string
query = "SELECT * FROM Users";
SqlConnection myConnection =
new
SqlConnection(ConnectionString);
SqlDataAdapter ad =
new
SqlDataAdapter(query,
myConnection);
DataSet
ds = new
DataSet();
ad.Fill(ds,"Users");
GridView1.DataSource = ds;
GridView1.DataBind();
}
private
string
ConnectionString
{
get
{ return
@"Server=localhost;Database=MyDatabase;Trusted_Connection=true";
}
} |
As you can see I am not doing anything fancy I
simply populates the GridView from the database using a select query in the
BindData method.
The parent page also contains the href tag
which is used to open the popup window. Let's see the code for this href tag in
the html view of the page.
|
<a
href="#"
onclick="OpenWindow()">Insert
Data</a></div>
<script
language="javascript"
type="text/javascript">
function
OpenWindow()
{
window.open ("PopUpWindow.aspx",
"mywindow","menubar=0,resizable=0,width=350,height=250,toolbars=0");
}
</script>
|
Pretty simply right! The OpenWindow function is
fired when you click on the href tag. This will open a small pop up window. Take
a look at the screenshot below to have a clear idea.
Yes, you have guessed right the small window
which contains the textboxes for username, firstname and lastname is our small
popup window. Now we want that after filling all the required information in the
textboxes and pressing the Add User button it will add the user to the database
and refresh the parent page which contains the GridView control hence populating
the newly inserted data into the GridView.
Implementation of the PopUp Page:
Now, let's see that how the PopUp page is being
implemented. First lets see the HTML code for the PopUp page so we will know
that how the controls are setup on the page.
| <form
id="form1"
runat="server">
<div>
UserName:
<asp:TextBox
ID="txtUserName"
runat="server"></asp:TextBox><br
/>
FirstName:<asp:TextBox
ID="txtFirstName"
runat="server"></asp:TextBox><br
/>
LastName:<asp:TextBox
ID="txtLastName"
runat="server"></asp:TextBox> <br
/>
<asp:Button
ID="BtnAdd"
runat="server"
Text="Add
User" OnClick="BtnAdd_Click"
/>
<asp:Button
ID="Btn_CloseWindow"
runat="server"
Text="Close
Window" /></div>
</form> |
Now, let's implement the code that will insert
the data into the database. The following code is triggered when the user
presses the "Add User" button.
|
private
void AddUser(string
userName, string
firstName, string
lastName) {
string
QUERY_ADDUSER =
@"INSERT INTO Users(UserName, FirstName, LastName)
VALUES(@UserName,@FirstName,@LastName)";
SqlConnection myConnection =
new
SqlConnection(ConnectionString);
SqlCommand
myCommand = new
SqlCommand(QUERY_ADDUSER,
myConnection);
myCommand.Parameters.AddWithValue("@UserName",
userName);
myCommand.Parameters.AddWithValue("@FirstName",
firstName);
myCommand.Parameters.AddWithValue("@LastName",
lastName);
myConnection.Open();
myCommand.ExecuteNonQuery();
myConnection.Close();
} |
The above code simply attaches the parameters
to the parameterized query and inserts them into the database. I am pretty sure
you have done similar stuff several times.
Now let's see the code that will refresh the
parent page which contains the GridView.
Refreshing the GridView Control on the
Parent Page:
Refreshing the GridView control on the parent
page sounds refreshing! Sorry about the bad joke let's get to the point.
Refreshing the GridView control is pretty simply. Take a look at the code below:
|
protected
void Page_Load(object
sender, EventArgs
e) {
string
scriptString = "<script
language=JavaScript> window.opener.document.forms(0).submit(); </script>";
// ASP.NET 2.0
if
(!Page.ClientScript.IsClientScriptBlockRegistered(scriptString))
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"script",
scriptString);
}
//// ASP.NET 1.X
//if (!Page.IsClientScriptBlockRegistered(scriptString))
//{
//
Page.RegisterClientScriptBlock("script", scriptString);
//}
if
(!Page.IsPostBack) { }
}
|
I have included the code for both the versions.
The commented out code can be used if you are using Visual Studio.NET 2003 or
the .NET framework 1.X. All I am doing in the page load event is attaching the
client side script to the page. The script
window.opener.document.forms(0).submit();
means that the parent of the current page will be submitted. This will cause a
postback to happen on the parent page and since we are binding the GridView
control on every page load it will work fine. Take a look at the screenshot
below:
So, you see it is pretty simple right! Now
let's take care of some important things. Let's say that you want to close the
window when the "Close Window" button is pressed. You can do this by simply
attaching the JavaScript "window.close()"
function to the button click event.
| //
ASP.NET 2.0
Btn_CloseWindow.OnClientClick =
"window.close();";
// ASP.NET 1.X
Btn_CloseWindow.Attributes.Add("onclick",
"window.close();");
|
You might want to attach the window close event
to the "Add User" button. This way when the user is added the popup window is
automatically closed. For this you can use the onunload event. Check out the
code below:
| <body
onunload="window.close();"> |
As I already explained that the JavaScript
function
window.opener.document.forms(0).submit();
will cause a postback and in order to work
with this example you need to bind the GridView each time the page is loaded.
This is not a good idea and you can improve that by using
opener.location.reload();
function which will reload the parent page. This
way you can bind the GridView and other controls only when the page is reloaded
and not that if there is a postback. In order to use
opener.location.reload();
simply attach it to the onunload event of the
parent page as shown below:
| <body
onunload="opener.location.reload();"> |
| Also keep in mind that you
don't have to register any scripts when you are using
opener.location.reload(). |
I have attached the project files below please
feel free to download them.
I hope you liked this article, happy coding!
| If you are one of the
thousands that visit GridViewGuy for your .NET articles and resources, you
might be interested in making a donation. Extra cash helps pay for the
hosting services and speed things up
around here, and makes this website possible.
Make a Donation
Once, again thank you very much and
remember its because of you FINE people that this website
is up and running. |
|
Export Button is a custom control that let's you export your
DataGrid or TextBox data to several different formats. The
control is extremely easy to use and also exposes design time features. In
this article I will discuss some of the features of the Export Button and
how it benefits the developer.
BUY IT
NOW |