How to pass multiple values from child widow?

In my previous post, I provided couple of examples to explained how you can show a dialog box using showModalDialog javascript function. I also explained how you can return value from child window to parent window using returnValue attribute.

In this post, I will explain a Javascript hack to return multiple values from child window. For this hack, we will return an class instance with multiple values already populated in child window. Our main use case is that when user click on a button in the parent form, application should open a child dialog box. In this child dialog box, user will then provide some values and click on submit button. Javascript will then close the child window and populate all entered values in child window in the parent page.

First let's create a project with two web forms

Parent.aspx 
Child.aspx

Parent.aspx will have two text box controls and a "Add Book" button. Clicking on this button will open a dialog box. Here is the code:

Parent.aspx
<script>
function AddBook()
{
    var returnVal = window.showModalDialog("Child.aspx", null, "dialogHeight:150px;dialogWidth:300px; center:yes;help:no;resizable:no;status:no;")
    document.getElementById("textboxBookID").value = returnVal.book_id;
    document.getElementById("textboxBookName").value = returnVal.book_name;
    return false;
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
    <asp:Label id="Label1" runat="server">Book ID :</asp:Label>
    <asp:textbox id="textboxBookID" runat="server"></asp:textbox>
    
    <asp:label id="Label2" runat="server">Book Name :</asp:label>
    <asp:textbox id="textboxBookName" runat="server"></asp:textbox>
    
    <asp:button id="buttonAdd" runat="server" Text="Add Book"></asp:button>
</form>
</body>

Book ID : Book Name :

Parent.aspx.cs
private void Page_Load(object sender, System.EventArgs e)
{
    buttonAdd.Attributes.Add("onclick", "return AddBook();");
}

Now for the child window. This page will have two text box controls and a submit button. On clicking on submit button, application will return entered value to parent form.

Child.aspx
<script>
function Books()
{
    var book_id = "";
    var book_name = "";
}

function ReturnBook()
{
var Books = new Object();
Books.book_id = document.getElementById("textboxBookID").value;
Books.book_name = document.getElementById("textboxBookName").value;
window.returnValue = Books;
window.close();
return false;
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" runat="server">Book ID :</asp:Label>
<asp:TextBox id="textboxBookID" runat="server"></asp:TextBox>

<asp:Label id="Label2" runat="server">Book Name :</asp:Label>
<asp:TextBox id="textboxBookName" runat="server"></asp:TextBox>

<asp:Button id="buttonSubmit" runat="server" Text="Submit"></asp:Button>
</form>
</body>

Child.aspx.cs
private void Page_Load(object sender, System.EventArgs e)
{
    buttonSubmit.Attributes.Add("onclick", "return ReturnBook()");
}

To reduce the complexity of the code, I have removed some part of the code. You can download whole application attached at the end of the article.

In above sample application, we are not doing anything interesting in Parent.aspx page, we we are simply adding an attribute "onclick" to the "Add Book" button to call a Javascript function. This Javascript function is responsible to open a dialog box where user will enter book information.

Now in Child.aspx page, when user click on the submit button, we are first creating instance of Book entity object which has two fields book_id, book_name. We then populate the instance with respective values from controls and then we assign this instance to returnValue of the window object. This is the most interesting line in the snippet. We are actually type casting returnValue property of the window to our entity. After casting returnValue, we are simply closing the child window.

As returnValue property has cast to book entity now, we just get the field values from this returnValue property and assign those values to respective controls.

Note that there is no post back while fetching values in child window or populating those values to the control in the parent page.

Download Attachment