There is lot of methods for passing data from one page to another page, but here I am explaining,
How to pass more than one values from one page to another page using java-script?
I have created one example for showing this process, here is code-
Source page code (SourcePage.aspx)-
This is client side Function-
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function TransferData() {
var value= new Object();
value.item1 = $('input[id$=txtItem1]').val();
value.item2 = $('input[id$=txtItem2]').val();
showModalDialog('SecondPage.aspx', value);
return false;
}
</script>
In above JavaScript code, I have created one function called- TransferData(). In this function, first I have created one var type as object using this line-
var value= new Object();
Now, using JQuery I am getting control's values and assigning to "value" variable, here "item1" and "item2" are dynamic properties for value variable.
value.item1 = $('input[id$=txtItem1]').val();
value.item2 = $('input[id$=txtItem2]').val();
After that using showDialog() , I am passing value variable to next page.
showModalDialog('SecondPage.aspx', value);
All these value can be accessed in next page using same properties.
Body Part-
<div>
<table align="center">
<tr>
<td>
Value1
</td>
<td>
<asp:TextBox ID="txtItem1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Value2
</td>
<td>
<asp:TextBox ID="txtItem2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btnSend" runat="server" Text="Pass Data" OnClientClick="return TransferData();" />
</td>
</tr>
</table>
</div>
Now to pass data of this page to another page, I have called TransferData() function in onClientClick() event of Button.
Now SecondPage code (SecondPage.aspx)-
This is client side Function-
<script type="text/javascript">
function FetchValues() {
var value= window.dialogArguments;
if (value!= null) {
var item1 = value.item1 ;
var item2 = value.item2;
alert('item1 =' + item1 + ', item2 =' + item2 );
}
return false;
}
</script>
To get passes data from source page, I have written one client side function FetchValues(). In this function, I am getting passed data variable using this code-
var value= window.dialogArguments;
Now to get values, first I am checking for null and then accessing value like this-
if (value!= null) {
var item1 = value.item1 ;
var item2 = value.item2;
alert('item1 =' + item1 + ', item2 =' + item2 );
}
Body Part-
<body onload="FetchValues();">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
I have called FetchValues() function in onload() event of body, based on our need this function can be called anywhere.
Note-
In this code I have used JQuery, so don't forget to include JQuery plug-in in your page.
Thanks
simple and useful
ReplyDelete