ASP.NET / C# - How to pop up a page with a listbox / multi-select control and send the selected IDs back to the parent page

Question

Hello,

I want to make a pop-up page that contains a listbox-type (multiselect) control which will return the selected IDs to the page that initiated the pop-up.

This is an ASP.NET web application / C# 3.5 / Latest jQuery.

I understand how to make the pop-up page with the corresponding controls, but I am unsure about the best way to approach sending an array of item IDs back to the parent page.

Is there a way I can leverage JSON, or some other technology to get these item IDs back to the parent page? At this point in time, I am only familiar with using session variables / querystrings / calls to web services to pass items from page-to-page.

The one-dimension array will most likely be either ints or strings, but there can possibly be over 40 items selected from the pop-up page.

High-level concepts only needed. I can research the exact implementation, once I know what I am looking for.

Thank you so much!

Answer 1

You can use jQuery UI's dialog and keep the listbox on the page. Then, you would access the selected values in the same way as if they were a control on the page. The only thing to keep in mind is that once you've created the dialog, you'll have to add it back as a child of the form. (See this post)

This is added overhead if the users will rarely use this popup functionality, but it's a lot cleaner from a development and maintenance point of view. Also, it's only one or two extra controls and 10-20 lines of javascript.

I've spent hours tracing a web of popups passing javascript around between controls, pages, and parent pages (iframes, ugh), and it's a lot easier when you're just hiding/showing a div on the same page.

Answer 2

I did something that you wrote about 1 month ago. The way that I choose based on using javascript without json, but you can do it. Here is some code, that will help you Popup.ascx

`

function SubmitChangnes(id) {
if (window.opener && !window.opener.closed)
        {
            var value = document.getElementById("hiddenid").value;
            window.close();
            window.opener.addPerson(document.getElementById("hiddenid").value, document.getElementById("TextBox2").value);
        }
    }

`

When you press submit button on Popup page, it call SubmitChanges, that close popup window and call function in parent window. In your case you can send json object to parent window function

Answer 3

Variation on DanTheMan's answer:

function returnSelected(form) {
    if (window.opener && !window.opener.closed) {
        $('#selectList :selected').each(function(i, selected) {
            window.opener.$("#list")
                .append('<li>' + $(selected).text() + '</li>');
        });
    }
}