ASP.NET Open PopUp Window Update Refresh Values

This example explains how to Open PopUp Window In Asp.Net And Update Refresh Parent Child Values using ClientScript And RegisterStartupScript.
I am opening popup window from aspx page and updating values in parent window from child or popup window using javascript and ClientScript.RegisterStartupScript.

Open PopUp Window In Asp.Net
I have added to labels in Default.aspx page and one button to open popup window.

I've also added a PopUp.aspx page which is having two textboxes and a button to update lable values of parent page.

The textboxes in popup window are populated with Text values of lables in parent page (Default.aspx), after making changes in textbox values i'm updating values back in parent page.

HTML source Parent page
<form id="form1" runat="server">
<div>
First Name :
<asp:Label ID="lblFirstName" runat="server" Text="amiT">
</asp:Label><br />
 <br />
Last Name:&nbsp;
<asp:Label ID="lblLastName" runat="server" Text="jaiN">
</asp:Label><br />
<br />
<asp:Button ID="btnPop" runat="server" Text="Click To Edit Values" />
</div>
</form>


Write following JavaScript in Head section of page.
   1:  <script type="text/javascript">
   2:  function openPopUp()
   3:  {
   4:   var popUrl = 'PopUp.aspx?fn=' + document.getElementById('<%= lblFirstName.ClientID %>').innerHTML + '&ln=' + document.getElementById('<%= lblLastName.ClientID %>').innerHTML;
   5:   var name = 'popUp';
   6:   var appearence ='dependent=yes,menubar=no,resizable=no,'+
   7:                   'status=no,toolbar=no,titlebar=no,' +
   8:                   'left=5,top=280,width=230px,height=140px';
   9:  var openWindow = window.open(popUrl, name, appearence);
  10:  openWindow.focus();
  11:  }
  12:  </script>


In this i m getting values of lables and passing them to popuup page as querystrings

Write this code in Page_Load event of Default.aspx (parent) page
C# CODE
protected void Page_Load(object sender, EventArgs e)
{
 string updateValuesScript = 
@"function updateValues(popupValues)
{
 document.getElementById('lblFirstName').innerHTML=popupValues[0];
 document.getElementById('lblLastName').innerHTML=popupValues[1];
}";
        
this.ClientScript.RegisterStartupScript(Page.GetType(), 
"UpdateValues", updateValuesScript.ToString(), true);
btnPop.Attributes.Add("onclick", "openPopUp('PopUp.aspx')");
}

VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim updateValuesScript As String = "function updateValues(popupValues)" & vbCr & vbLf & "{" & vbCr & vbLf & " document.getElementById('lblFirstName').innerHTML=popupValues[0];" & vbCr & vbLf & " document.getElementById('lblLastName').innerHTML=popupValues[1];" & vbCr & vbLf & "}"
    
    Me.ClientScript.RegisterStartupScript(Page.[GetType](), "UpdateValues", updateValuesScript.ToString(), True)
    btnPop.Attributes.Add("onclick", "openPopUp('PopUp.aspx')")
End Sub

HTML SOURCE OF PopUp.aspx(child) page

<form id="form1" runat="server">
<div>
First Name :
<asp:TextBox ID="txtPopFName" runat="server" Width="113px">
</asp:TextBox><br />
<br />
Last Name:<asp:TextBox ID="txtPopLName" runat="server" 
                       Width="109px">
</asp:TextBox><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" 
            Text="Button" /></div>
</form>


C# CODE PopUp.aspx
protected void Page_Load(object sender, EventArgs e)
{
 string updateParentScript = 
 @"function updateParentWindow()
 {                                                                               
   var fName=document.getElementById('txtPopFName').value;     
   var lName=document.getElementById('txtPopLName').value;   
   var arrayValues= new Array(fName,lName);
   window.opener.updateValues(arrayValues);       
   window.close(); 
 }";
 this.ClientScript.RegisterStartupScript(this.GetType(), 
     "UpdateParentWindow", updateParentScript, true);
 if (!IsPostBack)
 {
   txtPopFName.Text = Request["fn"];
   txtPopLName.Text = Request["ln"];
 }
   Button1.Attributes.Add("onclick", "updateParentWindow()");
}

VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim updateParentScript As String = "function updateParentWindow()" & vbCr & vbLf & " {                                                                               " & vbCr & vbLf & "   var fName=document.getElementById('txtPopFName').value;     " & vbCr & vbLf & "   var lName=document.getElementById('txtPopLName').value;   " & vbCr & vbLf & "   var arrayValues= new Array(fName,lName);" & vbCr & vbLf & "   window.opener.updateValues(arrayValues);       " & vbCr & vbLf & "   window.close(); " & vbCr & vbLf & " }"
    Me.ClientScript.RegisterStartupScript(Me.[GetType](), "UpdateParentWindow", updateParentScript, True)
    If Not IsPostBack Then
        txtPopFName.Text = Request("fn")
        txtPopLName.Text = Request("ln")
    End If
    Button1.Attributes.Add("onclick", "updateParentWindow()")
End Sub

Hope this helps

Download sample code attached



26 comments:

  1. Hi, I have one problem related to your post which is why every time when we click on that button then the value will change back to default value? Can it possible after click on the button and the value won't be changing back to the default value?

    ReplyDelete
  2. Dude this is sick! This is exactly what I was looking for. Thank you.

    ReplyDelete
  3. Please, What can i do for this not to return to the default value after clicking the button again.

    ReplyDelete
  4. Thanks For Ur Help For Passing Data Using popup control.As Yhis Code Is Workimg In normal Pages.But
    this code is not working when we use this page in content pages error (document.element id can not be null) Project Which Having Master Pages And Content Pages As U have Use This Code In Default Page2(parent Form) ( It is Inheritted Page Of master Page) popup control page (default3) (this is also inherited page of master page) It is Showing Error Ie Document Cant Be null
    please resolve it as iam using this code in my project

    ReplyDelete
  5. this code is not working when we use this page in content pages error (document.element id can not be null) Project Which Having Master Pages And Content Pages As U have Use This Code In Default Page2(parent Form) ( It is Inheritted Page Of master Page) popup control page (default3) (this is also inherited page of master page) It is Showing Error Ie Document Cant Be null

    ReplyDelete
  6. hello sir Regarding Ur Post It Is Very Nice I Have Used This Sample In My Project. This Sample Works Fine When It Doen'tWork When We Use This Sample having content Pages Pls Help Me its Showing document.null error(javascript Error)

    ReplyDelete
  7. Thanks for the tutorial, this is very usefull.

    ReplyDelete
  8. hello amit...how will u assign the checkboxlist selected value back to the main page. Lets say In the pop up page there is a asp:checkboxlist control and after selecting some checkboxes, and click on submit (or some button), the selected values should list back in the main page from where this pop was called. In the main page, there is a list box to which values should be assigned..Please reply me ASAP

    ReplyDelete
  9. hello amit...how will u assign the checkboxlist selected value back to the main page. Lets say In the pop up page there is a asp:checkboxlist control and after selecting some checkboxes, and click on submit (or some button), the selected values should list back in the main page from where this pop was called. In the main page, there is a list box to which values should be assigned..Please reply me ASAP

    ReplyDelete
  10. Hi, This Article Helps me much.
    Thank You

    ReplyDelete
  11. thanks for the info and explanation provided

    ReplyDelete
  12. Love your example, almost exactly what I needed. To make the pop up update a text box I used...

    document.getElementById('txtSearchValue').Value=popupValues[0];

    in place of the .InnerHTML in the updateValues javascript function.

    Thanks !!

    ReplyDelete
  13. Great tutorial!
    Have you considered adding some live class diagrams to your code? Please check my address and think about.

    ReplyDelete
  14. Thanks for the code and such an informative post. It was really helpful. Good stuff

    ReplyDelete
  15. Thank You Kind Sir!

    ReplyDelete
  16. Nice coding this..
    popup window well.

    ReplyDelete
  17. NIce coding this...

    ReplyDelete
  18. Beautiful Blog and excellent posts keep up the good work i have implemented in my requirement seeing this

    ReplyDelete
  19. No offense, but i suggest adding a facebook like button for the blog!

    ReplyDelete
  20. sir
    i have some problem in user control, like i have 1 Usercontrol Having Text Box(as will as textChange event) and 1 aspx Page whre we use this usercontrol.in this page 1 Gridview .i wana to filter this gridview when any value entered on Usercontrol textbox, bind this gridview on TextChange Event of usercontrol.plz help me.


    thanks in advance

    ReplyDelete
  21. @Sandeep Sharma: Download the sample code i have created from the link below and let me know whether it solves your query or not ?

    Filter GridView On TextBox TextChanged Event

    .

    ReplyDelete
  22. how can I do this via click button of grid view , for example if pop window have a button in a grid

    ReplyDelete
  23. Thanks friend this is more help me

    ReplyDelete
  24. In above same code i have an error Unable to get value of the property 'focus': object is null or undefined

    Please tell me solution.

    ReplyDelete
  25. This code will not work because of the following undefined variables:
    txtPopFName.Text = Request["fn"];
    txtPopLName.Text = Request["ln"];

    No where on either page is fn or ln defined

    ReplyDelete