Introduction
Last night to do a project, encountered a problem, this project is an online examination system, a new paper page, to add a number of question strategy. Click Add Question Policy, pop up the page to add the policy, the policy is edited well after the submission, the Add Policy page closes, the current Add Question page policy list refresh. Then encounter a problem, in the "Add Quiz page" click on the "Add Policy" button pop up the Add Policy page, after adding a policy, the parent page can only be partially refreshed (the overall refresh will lose the page input box unsaved data).
Summing up, condensed into a sentence ah, is "the parent page opens the child page, the child page completes the action to trigger the parent page event." ”
Process
I search in Baidu and Bing, many solutions are implemented with window.showModalDialog, because it has a return value, can be implemented according to the return value. However, after chrome37 does not support window.showModalDialog, consider compatibility, you can not use window.showModalDialog. So, can only be opened with window.open, but window.open no return value, so only in the child page to find ways to trigger the parent page event.
At that time, the first reaction was to write a common event on the parent page, so that the child page calls, a silly idea, the idea is too unreliable (but I think the programmer still dare to imagine), because each page is an object instance, you call the common method, do not know is in the role of the page, and second, The direct call must be static methods, static methods can not directly manipulate the page control, if it is not a static method, you need a new page, completely meaningless.
Then thinking about getting the parent page from C #, triggering the parent page event, and finding a discovery, C # has no good way to get to the parent page. Then can only from JS, I am not too familiar with JS, rookie is not a rookie, my idea is to use JS to find the parent page (JS in the parent page or very convenient). Search, there are several methods:
The results of window.opener.document running on the page are as follows:
The results of window.parent.document running on the page are as follows:
Found:
Window.opener.document Gets the parent page.
Window.parent.document obtained is itself, very strange.
Some information was then consulted to conclude that:
Window.parent can get the parent window or parent frame of a frame. The parent of the top-level window refers to itself.
Window.opener refers to the parent page of a page that window.open opens.
Opener that who open my, such as a page with window.open pop up the B page window, then a page is located in the window is B page opener, b page through the opener object can access a page.
The parent indicates that a page, such as an an A, uses an IFRAME or frame to invoke page B, then the page A is the parent of page B.
After that, it was very smooth to use "window.opener.document.getElementById (' Button1 ')." Click (); "Triggers the page event (I implemented the event via a button). We can hide this button.
After all these experiments and thinking, finally realized through the child page JS trigger the parent page a button's Click event, implementation of the child page refresh the parent page local data method.
Results
As follows:
Open the parent page and type something in the text box (to make it easier to test whether it's just a partial refresh).
Click to open the sub-page:
Click Refresh Parent Page Local
As you can see, the parent page is only partially refreshed.
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><HeadID= "Head1"runat= "Server"> <title>Parent page</title></Head><Body> <formID= "Form1"runat= "Server"> <Div> <labelrunat= "Server"ID= "Label1"style= "Color:blue">Original Tag</label> <Asp:textboxID= "TextBox1"runat= "Server"></Asp:textbox> <inputtype= "button"value= "Open sub-page"onclick= "window.open (' webform2.aspx ')" /> <Divstyle= "Display:none"> <Asp:buttonID= "Button1"runat= "Server"OnClick= "Button1_Click"Text= "button" /> </Div> </Div> </form></Body></HTML>WebForm1.aspx
usingSystem;namespacewebdemo{ Public Partial classWebForm1:System.Web.UI.Page {protected voidPage_Load (Objectsender, EventArgs e) { } protected voidButton1_Click (Objectsender, EventArgs e) {Label1. InnerText="was partially refreshed."; Label1. Style.add ("Color","Red"); } }}WebForm1.aspx.cs
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><HeadID= "Head1"runat= "Server"> <title>Sub-page</title></Head><Body> <formID= "Form1"runat= "Server"> <Asp:buttonID= "Button1"runat= "Server"Text= "Refresh parent page local"OnClick= "Button1_Click" /> </form></Body></HTML>webform2.aspx
usingSystem;namespacewebdemo{ Public Partial classWebForm2:System.Web.UI.Page {protected voidPage_Load (Objectsender, EventArgs e) { } protected voidButton1_Click (Objectsender, EventArgs e) {Response.Write ("<script language= ' javascript ' >window.opener.document.getelementbyid (' Button1 '). Click (); </script >"); } }}WebForm2.aspx.cs
Download Demo Source
Rookie solve the "child page off Refresh parent page Local" issue of the course
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
