In my previous post I have provided couple of examples to explain how to show a dialog box using showModalDialog javascript function. With that, I also explain how to return value from child window to parent window using returnValue attribute. Now in this post, I will explain Javascript hack to return multiple values from child window. In this hack, we will return an class instance with multiple values already populated in child window.
Our core requirement here is that when user click on a button in parent form, application should open a child dialog box. In this child dialog box, user will enter some values and click on submit button to close the window. Javascript will thereafter populate all entered values in child window to the controls in parent page.
First create a project with two web forms
Parent.aspx
Child.aspx
Parent.aspx will have two text box controls and one “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>
Parent.aspx.cs
private void Page_Load(object sender, System.EventArgs e) { buttonAdd.Attributes.Add("onclick", "return AddBook();"); }
Now we come to child window. This page will have two text box control 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.
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 fields.
Now in Child.aspx, when user click on the submit button, we first create instance of Book entity which has two fields book_id, book_name. We populate fields value of this instance with respective values from controls and then we assign this instance to returnValue of the window object. This is the most interesting part of this snippet. We are actually type casting returnValue property of the window to our entity. After casting returnValue, we are simply close the child window.
As returnValue property has cast to book entity now, we simply need to get field values from this returnValue property and assign those values to respective controls.
You will also noticed, that there is no post back while fetching values in child window and populating those values in control in parent page.
Hi!
Thanks for your reply. Please suggest how we can implement the above coding using multiselect listbox instead of textbox?? Using javascript.
Thanks and regards,
AP.
You can create a comma separated variable and store all selected list items in that, and later you can return it to parent window.
<script language=javascript>
function getSelectedBooks()
{
var i = 0;
var books;
books = ”;
for (i = 0 ; i < document.getElementById(“listBoxBook”).options.length; i++)
{
if (document.getElementById(“listBoxBook”).options[i].selected)
{
books += document.getElementById(“listBoxBook”).options[i].value + “,”;
}
}
books=books.substring(0, books.length-1);
window.returnValue = books;
}
</script>
Now in parent window you can split returned variable in order to get each individual items.
var returnVal = window.showModalDialog(“Child.aspx”);
var bookArray = returnVal.split(“,”);
var i;
for (i=0; i<bookArray.length; i++)
alert(bookArray[i]);
Hi Firoz!
Thanks for your reply.
I still have some more javascript related problem:
Problem 1: Whenever I select values in ‘listbox2′ (Webform2)and click on ‘button2′ then ‘listbox3′ should databind() values from sql server . I want to use SqlDataAdapter for databinding ‘listbox3′ using javascript. How should I implement this using javascript?
Problem 2: I want to return selected values in ‘listbox2′ and selected values in ‘listbox3′ back to webform1. Please suggest how both values can be returned back using javascript.
Thanks and regards,
ap.
Hi!
My previous query is attached below:
I have implemented the below mentioned implementation . ‘listbox1′ on ‘webform1′ shows all the values from ‘webform2′. I have implemented it using javascript. I would like to know that to implement validation on ‘webform1′, I would require the values of ‘listbox1′ ,which are on the client-side , to move to the server-side . I think sending a querystring will be fine but how to implement it using javascript and code-behind(C#)?
Your suggestion will be appreciated.
Thanks and regards,
ap.
My previous query:
” I am stuck with a problem. I am working with Visual Studio.NET 2003 in C#.
Scenario:
Webform1:
I have a webform (say webform1) on which many textboxes,dropdownlists etc are present. One of them is a listbox(listbox1) control which is blank . By the side of it there is a button (Button1). The user should fill up some textboxes etc (which are above the listbox1) before clicking the ‘Button1′. After clicking the ‘Button1′ , a ‘webform2′ opens.
Webform2:
In ‘webform2′, there are two listboxes: ‘listbox2′ and ‘listbox3′ and 2 buttons: ‘button2′ and ‘button3′ .
Now, when the user chooses values in ‘listbox2′ and presses ‘button2′ , ‘listbox3′ should fill up with values. When the user chooses values in ‘listbox3′ and then clicks ‘button3′ then ‘webform2′ should close and the values selected in ‘listbox2′ and ‘listbox3′ should be combined as :
listbox2 value(listbox3 value)
and should be displayed in ‘listbox1′ in ‘webform1′. Here, care should be taken so that ‘webform1′ doesn’t lose values previously entered by user.”
Thanks and regards,
ap.
Hii,
i am having a textbox and a button in parent window.on clicking the button a child window should open.
in child window we are having a treeview and a button.
on cliking the button all the checked nodes should be added to the textbox in parent window.
Need your help immediately.
Thanks.