Home AJAX Call Server-side Function Using jQuery Ajax Call

Call Server-side Function Using jQuery Ajax Call

1737
0

In my previous tutorials, I’d explained ajax introduction with example, how to call server-side method from javascript, how to call javascript function from code-behind and more cracking tutorials on Ajax, Asp.net, JavaScript and jQuery here.

Now here in this tutorial, I’ll explain how to call server-side function using jquery ajax call from .aspx page as well as how to call code-behind method in c# or vb.net with example code.

To call code-behind function or method with parameters from jquery ajax, we need to use following function on and bind it on button click event using jquery:

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            //first get all parameters if any
            var FirstName = $('#txtFirstName').val(),
                LastName = $('#txtLastName').val();
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                //url: "yourpagename.aspx/yourmethodnamewithoutbracesandparameters"
                url: "CallMethodUsingJson.aspx/callFunction",
                //Be carefull about single quotation marks while parsing parameters
                //If function have no parameters, parse blank "data" for eg, data: "{ }",
                data: "{'FirstName':'" + FirstName + "', 'LastName':'" + LastName + "'}",
                success: function (success) {
                    //called on ajax call success
                    alert("Success: " + success.d);
                },
                //call on ajax call failure
                error: function (xhr, textStatus, error) {
                    //called on ajax call error
                    alert("Error: " + error);
                }
            });
        });
    });
</script>

Call Server-side Function using jQuery Ajax Call – [.aspx]

Following is the complete HTML Markup code that I used to call server-side function using jquery ajax call for my .aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Call code-behind methods using json jquery example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                //first get all parameters if any
                var FirstName = $('#txtFirstName').val(),
                    LastName = $('#txtLastName').val();
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    //url: "yourpagename.aspx/yourmethodnamewithoutbracesandparameters"
                    url: "CallMethodUsingJson.aspx/callFunction",
                    //Be carefull about single quotation marks while parsing parameters
                    //If function have no parameters, parse blank "data" for eg, data: "{ }",
                    data: "{'FirstName':'" + FirstName + "', 'LastName':'" + LastName + "'}",
                    success: function (success) {
                        //called on ajax call success
                        alert("Success: " + success.d);
                    },
                    //call on ajax call failure
                    error: function (xhr, textStatus, error) {
                        //called on ajax call error
                        alert("Error: " + error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h4>Call code-behind methods using json</h4>
            FirstName:
            <asp:TextBox ID="txtFirstName" runat="server" ClientIDMode="Static" />
            LastName:
            <asp:TextBox ID="txtLastName" runat="server" ClientIDMode="Static" />
            <asp:Button ID="btnSubmit" Text="Submit" runat="server" ClientIDMode="Static"
                OnClientClick="return false;" />
        </div>
    </form>
</body>
</html>

Call Code-behind Function Using jQuery Ajax Call – [C#]

First add following namespace:

using System.Web.Services;

then add the following method to your aspx.cs page:

[WebMethod]
public static string callFunction(string FirstName, string LastName) {
    return "Your name is " + FirstName + " " + LastName + "";
}

Call Code-behind Function Using jQuery Ajax Call – [Vb.net]

First add following namespace:

Imports System.Web.Services

then add the following method to your aspx.vb page:

<WebMethod()>
Public Shared Function callFunction(ByVal FirstName As String, ByVal LastName As String) As String
    Return "Your name is " & FirstName & " " & LastName & ""
End Function
Note: You must need to make server method as static [WebMethod] as shown in above example code.

Example Result

Call Server-side Function Using jQuery Ajax Call
Call Server-side Function Using jQuery Ajax Call

Download Example

Git Repo

Previous articleCall Server-side Function Using JavaScript PageMethods
Next articleBind Asp.net DropDownList Title or Tooltip From Code-behind
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

fifteen − 9 =