专栏首页c#开发者How to pass multiple values from child widow

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 条评论
登录 后参与评论

相关文章

  • 实现MSMQ消息加密的安全实践

    消息应用程序发送方对消息进行加密后发送到目标计算机的消息队列中,然后由目标计算机上的应用程序接收消息队列中的消息进行解密。消息加密旨在防止在传输过程中有人未经授...

    阿新
  • 利用radio实现Datagrid的单选

    在datagrid中,我们可能会需要实现这种功能——列的单选,本身datagrid提供了select命令可以实现这种功能。另为也可以利用HTM...

    阿新
  • web开发web form,mvc,Silverlight比较优缺点

    最近一段时间比较闲,所以顺便尝试去了解一些新东西,虽然不做开发好多年,但最始终还是觉得做开发(coding)来的最轻松,也最拿手,做项目经理真的很烦,看来我还...

    阿新
  • asp.net与asp的session共享 及 asp的请求拦截

    asp.net 与 asp 的session是无法直接共享的(底层的处理dll也不一样),要想互通session,只能用变通的办法: 一、asp.net -> ...

    菩提树下的杨过
  • TensorWatch:用于数据科学和机器学习的调试和可视化工具

    TensorWatch是一个调试和可视化工具,专为Microsoft Research的深度学习和强化学习而设计。它适用于Jupyter Notebook,可显...

    代码医生工作室
  • 【Flutter 专题】02 图解 Mac 环境下安装配置环境

    和尚前两天整理了一篇 Flutter 01:图解 Windows 环境下安装配置环境,今天整理一下在 Mac 环境下安装配置 Flutter。实际操...

    阿策小和尚
  • 你知道android的MessageQueue.IdleHandler吗?

    商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处。

    WeTest质量开放平台团队
  • 从 JavaScript 到 TypeScript

    TypeScript 并不是一个完全新的语言, 它是 JavaScript 的超集,为 JavaScript 的生态增加了类型机制,并最终将代码编译为纯粹的 J...

    一个会写诗的程序员
  • 从实战角度解读数据科学

    原文:What is hardcore data science—in practice来源:https://www.oreilly.com/ideas/wha...

    小莹莹
  • LeetCode 算法 | 如何拆分数组?

    今天给大家分享的 LeetCode 算法题是和数组相关,关于如何拆分数组的,来一起夯实一下算法内功。

    好好学java

扫码关注云+社区

领取腾讯云代金券