AspnetO

We code, that works!

  • Home
  • Asp.net
  • MVC
  • Interview Questions

Get QueryString Value in jQuery from Client-side in Asp.net

By: Mayank Modi | Folls In: Asp.net | Last Updated: Oct 05, 2014

In my previous tutorials, I’d explained passing datatable as storedprocedure parameter in asp.net, get gridview selected row hiddenfield value using jquery, print gridview data on print button click event and other more cracking tutorials on GridView, Asp.net here.

Now here in this tutorial, I’ll explain how to get querystring value from client-side using javascript or jquery function with example code and step by step guide.

I’d already explained how to pass querystring with multiple parameters in asp.net using c# or vb.net here. Now if you want to get querystring value from client-side using JavaScript/jQuery, we need to use one JavaScript function that will get the query string url and split all the query string values that we parsed from previous page.

JavaScript Function To Get QueryString Value

function getParameterValues(key) {
       var pageURL = window.location.search.substring(1);
       var urlQS = pageURL.split('&');
       for (var i = 0; i < urlQS.length; i++) {
               var paramName = urlQS[i].split('=');
               if (paramName[0] == key) {
                       //replace the special char like "+","&" etc from value
                       var value = paramName[1].replace('%20', ' ').replace('%26', '&').replace('+', ' ');
                       return value;
               }
       }
}

And you can get querystring value in specific variable, like this:

var id = getParameterValues('id');
var name = getParameterValues('name');
var desig = getParameterValues('desig');

To test the above script example, I used the following QueryString URL:

http://localhost:4426/Page2.aspx?id=EMP0001&name=Mack John&desig=R&D Expert

Get QueryString Value in jQuery or JavaScript From Client-side – [.aspx]

Below is the sample code to get querystring value that I used for my .aspx page to test this example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
       <title>Get QueryString Value in jQuery or JavaScript Example in Asp.net</title>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
       <script type="text/javascript">
               $(function () {
                       var id = getParameterValues('id');
                       var name = getParameterValues('name');
                       var desig = getParameterValues('desig');
                       $("[id$=lblId]").text(id);
                       $("[id$=lblName]").text(name);
                       $("[id$=lblDesig]").text(desig);
               });

               function getParameterValues(key) {
                       var pageURL = window.location.search.substring(1);
                       var urlQS = pageURL.split('&');
                       for (var i = 0; i < urlQS.length; i++) {
                               var paramName = urlQS[i].split('=');
                               if (paramName[0] == key) {
                                       //replace the special char like "+","&" etc from value
                                       var value = paramName[1].replace('%20', ' ').replace('%26', '&').replace('+', ' ');
                                       return value;
                               }
                       }
               }
       </script>
</head>
<body>
       <form id="form1" runat="server">
       <div>
               <h4>Page2.aspx: Get Employee Details From Previous Page QueryString</h4>
               <b>Employee Id:</b>
               <asp:Label ID="lblId" runat="server" />
               <br />
               <b>Employee Name:</b>
               <asp:Label ID="lblName" runat="server" />
               <br />
               <b>Designation:</b>
               <asp:Label ID="lblDesig" runat="server" />
       </div>
       </form>
</body>
</html>

How to pass Multiple Parameters within QueryString?

You can learn more about how pass multiple parameters within a querystring url here.

How to pass & (ampersand) within QueryString URL?

You can learn more about passing & (ampersand) within querystring parameter value here.

Example Result

Here is the result generated from above example:

Asp.net QueryString URL Example to Pass Multiple Parameters using C# Vb.net

And look at your browser address bar, your query string will looks like this:

http://localhost:4426/Page2.aspx?id=EMP0001&name=Mack%20John&desig=Managing%20Director

Signup Today And Get Latest Tutorials For Free!

Subscribe to us and get free latest tutorials notifications whenever we publish a new contents.

About Mayank Modi

Mayank is a web developer and designer who specializes in back-end as well as front-end development. He's a Founder & Chief Editor of AspnetO. If you'd like to connect with him, follow him on Twitter as @immayankmodi.

Share Your Comments & Feedback Cancel reply

Note: To post any code in comment, use <pre>your code</pre>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social Connections

  • 0 Fans
  • 3,360 Followers
  • 21 Followers
  • 49 Followers
  • 1,559 Subscribers

Top Posts

  • CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
  • Tooltip: Show Hide Hint Help Text Example in CSS3 Transition
  • Parser Error While Deploying Website to Server in Asp.net
  • How to split string into Array of Day, Month, Year in Asp.net Using C# Vb.net
  • Get Selected Text Value from DropDownList in Asp.net using JavaScript

Find by Tags

Ado.net Ajax appSettings Asp.net C# CheckBox CheckBoxList ConnectionStrings Control CSS CSS3 Difference Download DropDownList Export Facebook fadeIn fadeOut fadeTo fadeToggle File File Extension FileUpload Function GridView IIS Interview Questions JavaScript jQuery MVC OOP RadioButtonList RDP Repeater Send Mail Solutions Split SQL Stored Procedure TextBox Upload Validation VB Web.config Web Hosting

The Man Behind AspnetO

Mayank Modi

Hi there,

Myself Mayank Modi, a Software Engineer and a blogger from Surat, India.

I'm welcoming you to my blog - AspnetO, a programmers community blog where we code, that works!

I started AspnetO as a hobby and now we're growing day by day. We're now having 2500+ programmers that get benefits and learn new things about website design and development under our community blog.

Here at AspnetO, I write about Beginners to Advance level of tutorials on programming languages like Asp.net using C# and Vb.net, MVC, SQL Server, JavaScript, jQuery etc. In sort, all about Asp.net website development stuff and sometimes sharing tips and tricks that can help you to grow up your programming skills.

You can get more details about me and my blog at About us page.

Subscribe To Newsletter

Enter your email address to subscribe to this blog and receive notifications of new posts right to your inbox

Join 1000+ other subscribers

Alexa Traffic Rank

Hot on AspnetO

Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 7036 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6067 downloads 39.76 KB
Download This Example
Icon
Gridview Insert Update Delete Example in Asp.net, C#, Vb.net 6061 downloads 39.76 KB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2883 downloads 1.01 MB
Download This Example
Icon
Export gridview all rows or selected rows to word, excel, text, pdf examples 2852 downloads 1.01 MB
Download This Example

Copyright © 2014 - 2019 · All Rights Reserved.

About | Copyrights | Privacy | Terms | Contact | Advertise | Sitemap
Previous Asp.net Passing &(ampersand) in QueryString Parameter Value
Next Asp.net Repeater Control With DataPager Example