Popup window can be very helpful for editing records. For example, you have a GridView of your customers, when you click on a row or an “edit” button/icon, a new window pops up for you to edit the selected customer. After the editing is done and the record is saved, the popup window is closed and the parent window is reloaded to reflect the updated information. This is a very common scenario for using parent/child window to display and update information, there are several ways to implement this scenario.
1. Parent/Child Window Design with Regular Popup
Child Popup Window:
Parent window is automatically refreshed after the child window is closed.
Now let’s see how to implement this simple solution.
There is something you will need to pay attention to when using this design. For example, the child window is just another normal page, it means any knowledgeable user can manually type in the URL to the child window, which defeats the purpose of this parent/child design. So you will need to prevent this from happening.
Here is the way I use to prevent the direct access to the child window:
2. Parent/Child Window Design with AJAX ModalPopup
With AJAX we can accomplish the same task as above but don’t need to worry about the direct access to the child window, because the child window is an AJAX ModalPopup.
I will not go into details on how to implement AJAX ModalPopup in this case because it is very straightforward to do. With this design, you don’t have to worry anyone would directly access the child popup window and you are able to use UpdatePanel to avoid full postback.
a). We need two Panel controls in which one is for the background and the other is for displaying data:
b) The styles for the two Panel are listed as follows:
The .poup-div-background set width, height, min-width, min-height to 100%, so that the panel will cover the whole screen. The opacity style give the background panel some transparency. These styles actually do the trick to simulate AJAX ModalPopup window.
Then we can simply set the Save button’s OnClientClick=”hidePopup()” so that when the button is clicked the popup will become invisible. In the code behind where the Save button’s OnClick event is handled, we can simply save the changes and rebind the GridView to reflect the new changes.
I personally like the third option because it is clean, has less overhead, and secure.