With this article, I will tell you about sending data to another page using jQuery with QueryString in ASP.NET 5. The page PassDataJQueryQueryString.aspx (Source Page), this is the page from where we want to send the data (value). The page consists of an TextBox for Name ,TextBox for Qualification and DropDownList for Technology whose values we need to send to the other page ( In this tutorial I named it: DestinationPage.aspx).
Source Page(PassDataJQueryQueryString.aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Sending Data to Another Page Using jQuery with QueryString in ASP.NET 5</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSubmit").click(function () {
var url = "DestinationPage.aspx?name=" + encodeURIComponent($("#txtName").val()) + "&Qualification=" + encodeURIComponent($("#txtQualification").val()) + "&technology=" + encodeURIComponent($("#ddlTechnology").val());
window.location.href = url;
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Qualification
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtQualification" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Technology
</td>
<td>
:
</td>
<td>
<asp:DropDownList ID="ddlTechnology" runat="server">
<asp:ListItem Value=".NET" Text=".NET">
</asp:ListItem>
<asp:ListItem Value="Java" Text="Java">
</asp:ListItem>
<asp:ListItem Value="PHP" Text="PHP">
</asp:ListItem>
<asp:ListItem Value="SAP" Text="SAP">
</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Destination Page(DestinationPage.aspx):
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
var getData = new Array();
$(function () {
if (getData.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
getData [key] = value;
}
}
}
if (getData["name"] != null && getData["Qualification"] != null && getData["technology"] != null) {
var data = "<u>Values in Previous Page</u><br /><br />";
var name;
name = getData["name"];
$("#lblName").html(name);
var qualification;
qualification = getData["Qualification"];
$("#lblQualification").html(qualification);
var technology;
technology = getData["technology"];
$("#lblTechnology").html(technology);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<asp:Label ID="lblName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
Qualification
</td>
<td>
:
</td>
<td>
<asp:Label ID="lblQualification" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
Technology
</td>
<td>
:
</td>
<td>
<asp:Label ID="lblTechnology" runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
And this is the output:
