In my previous
Post which was relating to implementing dialog box in web based application,
I have provided some examples to popping up a dialog box using showmodaldialog
JavaScript function. In that post, I have written about returning a value from
Child Window to parent window using returnvalue attribute. In this post, I will
Try to explain a hack of returning multiple values from Child Window.
In this hack, we are returning an instance of the class which is already
Populated with Multiple Field Values in Child Window. So indirectly we are
Actually returning multiple values which are bind to an object and we return
This object to parent window.
Our basic requirement here is that when user click on a button in parent
Form, application shouldl open a child dialog box. In this child dialog box,
User will enters some values and click on submit button. application will
Thereafter close the Child Window and populate all entered values in parent
Controls.
First create a project with two web
Forms
Parent. aspx
Child. aspx
Parent. aspx will have two text box control and one â €add 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:textbox id="textboxBookID" style="Z-INDEX: 100;
LEFT: 104px; POSITION: absolute; TOP:
56px"
runat="server"></asp:textbox><asp:label id="Label2"
style="Z-INDEX: 105; LEFT: 16px; POSITION: absolute; TOP: 88px"
runat="server">Book Name :</asp:label><asp:textbox
id="textboxBookName" style="Z-INDEX: 101; LEFT: 104px; POSITION: absolute; TOP:
88px"
runat="server"></asp:textbox><asp:button id="buttonAdd"
style="Z-INDEX: 102; LEFT: 104px; POSITION: absolute; TOP:
24px"
runat="server" Text="Add Book"></asp:button>
<asp:Label
id="Label1" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px"
runat="server">Book ID
:</asp:Label></form>
</body>
Parent. aspx. CSprivate 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 and a submit
Button. On clicking on submit button, application will return entered value
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:TextBox id="textboxBookID" style="Z-INDEX: 100;
LEFT: 104px; POSITION: absolute; TOP:
16px"
runat="server"></asp:TextBox>
<asp:Label id="Label2"
style="Z-INDEX: 105; LEFT: 16px; POSITION: absolute; TOP: 48px"
runat="server">Book Name :</asp:Label>
<asp:TextBox
id="textboxBookName" style="Z-INDEX: 101; LEFT: 104px; POSITION: absolute; TOP:
48px"
runat="server"></asp:TextBox>
<asp:Button
id="buttonSubmit" style="Z-INDEX: 102; LEFT: 104px; POSITION: absolute; TOP:
80px"
runat="server" Text="Submit"></asp:Button>
<asp:Label
id="Label1" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 16px"
runat="server">Book ID
:</asp:Label>
</form>
</body>
Child. aspx. CSprivate void Page_Load(object sender,
System.EventArgs e)
{
buttonSubmit.Attributes.Add("onclick", "return
ReturnBook()");
}
To reduce the complexity of code, I have removed some part of the code. You
Can download whole application anytime which is attached at end of
Article.
In code, we are not doing any thing interesting in parent. ASPX page. Here we
Are simply adding an attribute for â € your onclick â € event on â €add add book â € button.
Clicking on this button will open a dialog box where user will enters the book
Fields.
Now in child. aspx, when user clicks on the submit button, we first create
Instance of our entity book which is having two fields book_id, book_name. After
Creating an instance we populate its fields with respective values from controls
And then we assign this entity to returnvalue of window object. This is the most
Interesting part of the application. We are actually type casting
Returnvalue property of the window to our entity. After casting rturnvalue, we
Are Closing that child window.
As returnvalue property has been cast into book entity now, we simply need
Get field values from this returnvalue property and assign those values to their
Respective control.
You will also noticed while running this application, that there is no post
Back while fetching values in child window and then populating those in parent
Form.
Download
Attachment
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
