How to pass multiple values from child widow
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 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.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 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: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.cs
private 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 the article.
In code, we are not doing any thing interesting in Parent.aspx page. Here we are simply adding an attribute for “onclick†event on “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 the 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 to 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.
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix