Saturday, 4 January 2014

How to call server side methods using Ajax Call?

Description:

In this article, I will explain how to call server side methods using Jquery.

We can call server side methods using JQuery Ajax.

Ajax allows you to load data in the background and updates on the webpage without refreshing the page.

Ajax used to create fast and dynamic web pages.

The user can continue to interact with the web page while the page requests information from the server with Ajax in the background.

Syntax for Ajax Call:

$.ajax({
            type: "POST",
            url: "AjaxCall.aspx/CallServerSideMethod",
            data: "{'args': '" + arguments + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
            },
            error: function() {
            }
        });

Type - Type of the request. Default is GET. Possible types are GET, POST, and PUT.

Url - Redirecting the page to which the request is sent

Data - Passing parameters for the methods. It should be key/value pairs.

DataType - Type of data which is returned from the server. Possible data types are xml, json, script, text and html.

Success - This function will call if the request succeeds.

Error - This function will call if the request fails.

AJAX – Example Program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Sample Ajax Call</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnAjaxCall').click(function () {
                var arguments = "www.jqueryjohn.com";

                $.ajax({
                    type: "POST",
                    url: "Ajaxcall.aspx/CallServerSideMethod",
                    data: "{'args': '" + arguments + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                        return false;
                    },
                    error: function () {
                        alert("error");
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lbltext" runat="server" Text="Click the button to make Ajax Call"></asp:Label>
        <asp:Button ID="btnAjaxCall" runat="server" Text="Make Ajax Call" />
        <br />
    </div>
    </form>
</body>
</html>

Code Behind:

Two things are very important while we creating ajax call

1. Method should be declared as WebMethod
2. Method should be static

[System.Web.Services.WebMethod]
public static string CallServerSideMethod(string args)
{
      return "Welcome to " + args + " ";
}


Calling server side method with AJAX, Invoke Server Methods From Client Side Using jQuery AJAX in ASP.NET, How to make Ajax Call using Jquery, Simple Ajax Call using Jquery, Calling server side method from client side using Jquery, Syntax for Ajax Call in Jquery.
at

3 comments: