CODEWITHSUNDEEP
javascripthtmlasp.net-mvc
EnterTheCode
EnterTheCode

Reputation: 494

How can one page access a popup window's form data?

Scenario

I have web page, let's call it Window #1, that contains a list of people including their name and email.

There will be a button on this page that user can click to open a new window (Window #2). The user will click the button, and a new window will open and the user will add additional people.

When they are finished adding users in Window #2, they would click "Save." Instead of using a POST to send this form back to the server, I want update the original page and model (Window #1) with the information entered in Window #2.

I'm looking for explanation of how you could solve this solution using combination of the MVC framework and/or JavaScript.

Current Knowledge

I'm fairly new to ASP.NET MVC and JavaScript, so I'm not sure whether this task is possible and what it would entail. I attempted to perform a window.open for Window #2, but then Window #1 doesn't have access to Window #2 and vice versa. I considered partial views as well, but I wasn't sure how that structuring would work.

I've attempted to research this situation, but I'm not entirely sure that my terminology is correct and thus I wasn't able to find much information regarding the topic.

Any help would be greatly appreciated!

Upvotes: 0

Views: 242

Answers (2)

EnterTheCode
EnterTheCode

Reputation: 494

The child window can reference the parent window. The child window can then reference the DOM of the parent by using window.opener. An example from w3schools:

// Open a new window
var myWindow = window.open("", "myWindow", "width=200, height=100");

// Write some text in the new window
myWindow.document.write("<p>This is 'myWindow'</p>");     

// Write some text in the window that created the new window            
myWindow.opener.document.write("<p>This is the source window!</p>");

Selectors can be used to modify the parent's DOM in the manner requested from the initial question.

Upvotes: 1

Bruno
Bruno

Reputation: 563

You could do the initial load of Window#1 using a traditional MVC Get method. You could also use bootstrap modal for Window#2. You would then use JQuery's post method to send the new users to a Post method in your MVC controller. This method would ideally return something like a JSON objec with an updated list of users. You would then rebuild the list in your DOM when JQuery's Post method returns.

Alternatively, you could look into something like Knockout.js instead of using JQuery's Post method and manually rebuilding the user list. Knockout lends itself very well to scenarios like this.

Upvotes: 1

Related Questions