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.

Download Attachment

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HansBug's Lab

2272: [Usaco2011 Feb]Cowlphabet 奶牛文字

2272: [Usaco2011 Feb]Cowlphabet 奶牛文字 Time Limit: 10 Sec  Memory Limit: 128 MB S...

26460
来自专栏大数据学习笔记

Elasticsearch 5.x 安装与配置

Elasticsearch官方建议使用 Oracle的JDK8 1、下载安装 [root@vnode0 opt]# tar -zxvf elasticsearc...

45180
来自专栏鸿的学习笔记

16位顶级数据科学家语录

Chief Data Scientist at The New York Times & Associate Professor of Applied Ma...

9320
来自专栏ml

HDUOJ---(4708)Herding

Herding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (J...

357100
来自专栏ml

zoj3822 Domination(概率dp)

Domination ---- Time Limit: 8 Seconds      Memory Limit: 131072 KB      Specia...

36460
来自专栏张善友的专栏

Microsoft training Kits

Microsoft training kits对于开始学习一门新技术的时候是一个非常好的资料.下面是一些training kits列表: .NET Framew...

20480
来自专栏测试开发架构之路

Social networks and health: Communicable but not infectious

Harvard Men’s Health Watch Poet and pastor John Donne famously proclaimed “No ma...

39480
来自专栏c#开发者

Processing Binary Documents Through BizTalk Via Web Services[转]

Published 21 July 06 08:24 AM | rseroter Just finishing up a two-week BizTalk P...

36240
来自专栏Golang语言社区

(摘抄)GO语言中template的用法

When a web service responds with data or html pages, there is usually a lot of c...

38070
来自专栏大数据学习笔记

Hadoop基础教程-第10章 HBase:Hadoop数据库(10.7 HBase 批量导入)

第10章 HBase:Hadoop数据库 10.7 HBase 批量导入 10.7.1 批量导入数据的方法 向HBase表中导入一条数据可以使用HBase Sh...

26050

扫码关注云+社区

领取腾讯云代金券