您的位置：首页 > 产品设计 > UI/UE

How to pass multiple values from child widow

2009-02-15 18:52 453 查看
In my previouspost which was relating to implementing dialog box in web based application,I have provided some examples to popping up a dialog box using showModalDialogjavascript function. In that post, I have written about returning a value fromchild window to parent window using returnValue attribute. In this post, I willtry to explain a hack of returning multiple values from child window.In this hack, we are returning an instance of the class which is alreadypopulated with multiple field values in child window. So indirectly we areactually returning multiple values which are bind to an object and we returnthis object to parent window.Our basic requirement here is that when user click on a button in parentform, application shouldl open a child dialog box. In this child dialog box,user will enters some values and click on submit button. Application willthereafter close the child window and populate all entered values in parentcontrols.First create a project with two webformsParent.aspxChild.aspxParent.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 submitbutton. On clicking on submit button, application will return entered value toparent 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();returnfalse;}</script></HEAD><bodyMS_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:TextBoxid="textboxBookName" style="Z-INDEX: 101; LEFT: 104px; POSITION: absolute; TOP:48px"runat="server"></asp:TextBox><asp:Buttonid="buttonSubmit" style="Z-INDEX: 102; LEFT: 104px; POSITION: absolute; TOP:80px"runat="server" Text="Submit"></asp:Button><asp:Labelid="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", "returnReturnBook()");}
To reduce the complexity of code, I have removed some part of the code. Youcan download whole application anytime which is attached at end of thearticle.In code, we are not doing any thing interesting in Parent.aspx page. Here weare 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 bookfields.Now in Child.aspx, when user clicks on the submit button, we first createinstance of our entity Book which is having two fields book_id, book_name. Aftercreating an instance we populate its fields with respective values from controlsand then we assign this entity to returnValue of window object. This is the mostinteresting part of the application. We are actually type casting thereturnValue property of the window to our entity. After casting rturnValue, weare closing that child window.As returnValue property has been cast into book entity now, we simply need toget field values from this returnValue property and assign those values to theirrespective control.You will also noticed while running this application, that there is no postback while fetching values in child window and then populating those in parentform.DownloadAttachment
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航