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

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

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

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

<script type="text/javascript">
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>

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="https://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
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
Previous articleAsp.net Passing &(ampersand) in QueryString Parameter Value
Next articleAsp.net Repeater Control With DataPager Example
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

sixteen − 3 =