Microsoft.NET

……………………………………………….Expertise in .NET Technologies

Retrieving Query String Values in ASP.NET and Javascript

Posted by Ravi Varma Thumati on October 26, 2009

In World Wide Web, a query string is a part of a URL that contains data to be passed to web applications (http://en.wikipedia.org/wiki/Query_string).

The query string is composed of a series of field – value pair. Below is the pattern of query string:

field1=value1&field2=value2&field3=value3

An URL that contains query string can be depicted as follow:

http://test.com/tag?name=alma&role=user
The URL and query string separated by a question mark (?). Query string consist of two parts (field and value), and each of pair separated by ampersand (&). So the example above consists of two query strings which are name and type with value of each field ‘alma’ and ‘user’ respectively.

We can retrieve the query string values programmatically and used that values. Now we will learn how to get the query string values in ASP.NET and Javascript.

Retrieving Query Strings in ASP.NET

Retrieving query strings in ASP.NET is quite simple, what we need is just the following line of code:

Page.Request.QueryString[queryStringField];
or
Page.Request.QueryString[indexOfQueryString];

So If we need to retrieve the value of name field from this URL: http://test.com/tag?name=alma&role=user
Just do this inside of your ASP.NET code: Page.Request.QueryString[“name”] or Page.Request.QueryString[0]. Lets look at how it work in simple source of code (Test.aspx):

<%@ Page Language=”C#” %>
<html>
<head>
<title>Query Strings in ASP.NET: Page 1</title>
<script language=”C#” runat=”server”>
void GetQrStr(object sender, EventArgs e)
{
// change the Response.Redirect parameter with your own location.
Page.Response.Redirect(”/…/Test2.aspx?name=alma&role=user”);
}
</script>
</head>
<body>
<form runat=”server”>
<asp:Button id=”btn” onclick=”GetQrStr” text=”Test Query Strings” runat=”server” />
</form>
</body>
</html>

Test.aspx will produce a button that will redirect to Test2.aspx when it clicked. This is code for Test2.aspx:

<%@ Page Language=”C#”%>

<html>
<head>
<title>Query Strings in ASP.NET: Page 2</title>
<script language=”C#” runat=”server”>
</script>
</head>
<body>
<%
// retrieves query string values
string name = Page.Request.QueryString[“name”];
string role = Page.Request.QueryString[“role”];

Page.Response.Write(”<h1>Name: “+name+”, Role: “+role+”</h1>”);
%>
</body>
</html>

In Test2.aspx we can get the values of ‘name’ and ‘role’ query strings then use both values as we need.

Retrieving Query Strings in Javascript

Javascript can be used for retrieves query string values too. We need the following code to get query string pairs (field & value) using Javascript:

window.location.search

The above code will return string started with ampersand in the URL (ampersand included). So if we run the above code against the following URL: http://localhost:8088/postings/QrStr/testjs2.htm?name=alma&role=user
The return value is ?name=alma&role=user

To understand the concept better I have write two simple HTML pages that show how to get query string values using Javascript. This is the first file (testqrstr.htm):

<html>
<head>
<title>Test Query Strings: Page 1</title>
<script lang=”javascript” type=”text/javascript”>
function testQueryStrings()
{
// change the window.location with your own.
window.location = “/…/testjs2.htm?name=alma&role=user”;
}
</script>
</head>
<body>
<input type=”button” id=”btn” value=”Test Query Strings” onclick=”testQueryStrings()” />
</body>
</html>

The output produced by testjs.htm is similar like the output of Test.aspx, when we click the button it will bring us to testjs2.htm (of course with the specified query strings!). Here testjs.htm:

<html>
<head>
<title>Test Query Strings: Page 2</title>
<script lang=”javascript” type=”text/javascript”>
var qrStr = window.location.search;
var spQrStr = qrStr.substring(1);
var arrQrStr = new Array();
// splits each of pair
var arr = spQrStr.split(’&’);

for (var i=0;i<arr.length;i++){
// splits each of field-value pair
var index = arr[i].indexOf(’=’);
var key = arr[i].substring(0,index);
var val = arr[i].substring(index+1);

// saves each of field-value pair in an array variable
arrQrStr[key] = val;
}

document.write(”<h1>Name parameter: “+arrQrStr[“name”]+”. Role parameter: “+arrQrStr[“role”]+”</h1>”);
</script>
</head>
<body>
</body>
</html>

What I was did in testjs2.htm just retrieve the query strings (through window.location.search), save each of field – value pair in an array variable named arrQrStr and echo the content of arrQrStr variable.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: