How to pass a QueryString variable to jQuery Ajax

Question

I have Default.aspx

<asp:Button ID="showOrderbtn" runat="server" Text="ShowOrder"
            onclick="showOrderbtn_Click"/>

And in Default.aspx.cs

protected void showOrderbtn_Click(object sender, EventArgs e)
{
    var d = txtSearchCustomerByID.Value;
    Response.Redirect("Default2.aspx?id=" + d);
}

Here, I am having Customer Id in a textfield

Now, How can I pass "id" in jQuery Ajax in Default2.aspx.

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "Default2.aspx/showOrders",
        data: {ID:ID},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: Onsuccess,
        error: Onerror
    });
});

I need to have "id" in ready function of jQuery passed from Default.aspx.cs

I implemented showOrders in Default2.aspx.cs.

Thank You!!

Answer 1

You can use below script for getting and setting query string values:

<script type="text/javascript">
        // Create a common method for getting querystring Parameter value from jQuery
        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        $(document).ready(function () {
            var queryStringValue = getUrlVars()["id"];//Pass your Querystring parameter
            $.ajax({
                type: "GET",
                url: "Default2.aspx/showOrders",
                data: { ID: queryStringValue },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (successData) { },
                error: function (errorData) { }
            });
        });
    </script>

Hope it helps you.

Thanks

Answer 2

Why don't we pass the query string to web method and just the redirect to the page you want in aspx page .Lets have a look !!!

In *.aspx

<script>
        function getParameterByName(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        }

        $(function() {
            //q=QueryString Name
            var id = getParameterByName('q');
            console.log(id);
            //if (id === null) {
            //     id = "test";
            //  }
            var data = JSON.stringify({ ID: id });
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "*.aspx/showOrders",
                    data: data,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(data) {
                        var d = data.d;
                        window.location = "Default2.aspx?id=" + d;
                    }
            });
            });
        });
    </script>

and in *.aspx.cs

[WebMethod]
public static String showOrders(String ID)
{
    //Do some work an logic here
    return ID;
}

and .aspx page Complete page

    <div>
        <asp:Button ID="showOrderbtn" runat="server" Text="ShowOrder"
             ClientIDMode="Static"/>
    </div>
    <script>
        function getParameterByName(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        }

        $(function() {

            $('#showOrderbtn').on('click', function(e) {
                    e.preventDefault();
                    alert('In button click');
                    var id = getParameterByName('q');
                    console.log(id);
                    if (id === null) {
                        id = "test";
                    }
                    var data = JSON.stringify({ ID: id });
                    $.ajax({
                        type: "POST",
                        url: "IframeWithPowerBi.aspx/showOrders",
                        data: data,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            var d = data.d;
                            window.location = "Default2.aspx?id=" + d;
                        }
            });


        });
        });
    </script>