JavaScript, jQuery, jQuery AJAX

jQuery Ajax in Action with ASP.Net aspx Page

Most of the time , We call our custom WebServices/REST Services/Third Party REST APIs from any jQuery AJAX based HTTP Verb . But we can also call direct ASP.Net Form Page( which is aspx page ) using jQuery AJAX .

Here is how we can call ASPX page from another ASPX page’s AJAX Method.

For this example , I have used two ASPX page –

1.AjaxCheckPage.aspx ::: From this page I am gonna call another ASPX Page
2.jQueryAjaxData.aspx ::: This Page will be called by jQuery AJAX

HTML Markup of my AjaxCheckPage.aspx is like below :

<input type="button" id="ajaxButton" value="Load Data using jQuery Ajax" />   

     <div id="divResult"></div>

Ajax calling code of this Page is —

    <script language="javascript" type="text/javascript">

        $("#ajaxButton").click(function () {

            $.ajax({

                type: "POST",
                url: "jQueryAjaxData.aspx",
                data: "a=2&b=3",
                success: function (data) {
                    $("#divResult").text(data);
                }

            });

        });
    
    </script>

So Now , am doing like – If any Data comes from jQueryAjaxData.aspx , that means after successful , am binding the data to the DIV :

Now lets go another Page jQueryAjaxData.aspx from which the Data is gonna come .

protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Form["a"] != null && Request.Form["b"] != null)
            {
                int a = int.Parse(Request.Form["a"]);
                int b = int.Parse(Request.Form["b"]);
                int sum = a + b;
                
                Response.Write("The Sum is : " + sum);
            }
        }

jQuery Ajax in Action with ASP.Net aspx Page

jQuery Ajax in Action with ASP.Net aspx Page

So you can see , when I click the button then It request a POST to jQueryAjaxData.aspx page and am also passing Form Data as you can see it inside the picture above .

So , this is how , we can call ASPX page from jQuery AJAX POST .

Cheers 🙂

Standard

Leave a Reply

Your email address will not be published. Required fields are marked *