Populating Parent Grid from Popup Window Using Ajax

• Download demo project - 5.9 KB
• Download source - 5.7 KB

Introduction

I saw a lot of requests for getting a control over the parent web page from a pop page, so I decided to write this article. This article explains how to call a parent server level function from a popup window using AJAX.

For this I am using the population of a grid as an example. Here I have a datagrid which contains buttons for editing each row. When I click the button, another popup (popup.aspx) pops up containing the fields of the selected row.

After editing the row the grid will refresh from the popup window without posting back to the server. I used the Ajax functionality to do this.

Using the Code

Here am using two ASPX pages.

1. Default.aspx
2. popup.aspx

I am maintaining a hidden button (btnReload) just to fill the grid. On loading the function of the default.aspx I am populating the grid from Northwind database.

Private Function FillGrid() As Boolean 

    Dim Sqlstring As String = " select top 10 customerID,companyname," +
        "contactname from customers" 
    Dim Myreader As SqlDataReader = Nothing 
    Connect_SQLDataReader(Myreader, Sqlstring, errmsg) 
    grid.DataSource = Myreader 
    grid.DataBind() 

End Function

And on the Onload event of the default page I am registering a JavaScript function ReloadPage() which will refer to the reload button click event. This does the trick.

Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load 

ScriptManager.RegisterStartupScript(Me.btnReload, Me.GetType, "xxxxx", 
    "function ReloadPage(){" & Page.ClientScript.GetPostBackEventReference(
    Me.btnReload, Nothing) & "}", True) 
If Page.IsPostBack = False Then 
FillGrid() 
End If 

End Sub

Please note you have to do this outside the Page.IsPostBack condition because we have to register the script for every post for stabilityEnsure, that you had put the grid in the Ajax Update Panel.

While clicking on the link button of the grid, I am popping up the new ASPX page popup.aspx, where I am taking the query string of the rowID and populating what is textboxed for editing purposes.

Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load 

If Page.IsPostBack = False Then 
Dim Sqlstring = "select companyname,
    contactname from customers where customerID='" & 
    Request.QueryString("id") & "'" 
Dim Myreader As SqlDataReader = Nothing 
Connect_SQLDataReader(Myreader, Sqlstring, errMsg) Myreader.Read() 

txtCompanyName.Text = Myreader(0).ToString() 
txtContactName.Text = Myreader(1).ToString() 
Myreader.Close() 

End If 

End Sub

Now, upon clicking the save button in the popup window I am editing the data to the backend and calling a JavaScript function, ReloadParent().

Protected Sub Button1_Click(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Button1.Click 

Dim Sqlstring = "update customers set companyname='" & 
    txtCompanyName.Text & "', contactname='" & txtContactName.Text & 
    "' where customerID='" & Request.QueryString("id") & "'" 
Dim result As Integer 

Try

 Connect_SQLNonQuery(result, Sqlstring, errMsg) 

Catch ex As Exception 

End Try 

ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "Success",
    "ReloadParent('Records Updated')", True) 

End Sub

Let's see what the ReloadParent() does.

function ReloadParent(msg) 
{
    var opener;
    if (window.opener){opener = window.opener;} else{opener = 
       window.dialogArguments;
} 
opener.ReloadPage();
    alert('Records Updated'); //self.close(); 
}

Here I am calling the parent JavaScript fucnction opener.ReloadPage(); which will call the btnReload click event of the parent page. In the btnReload we just call the Fillgrid() function like this:

Protected Sub btnReload_Click(ByVal sender As Object,
    ByVal e As System.EventArgs)
FillGrid()

End Sub