Call Server Side Code from jQuery Ajax method with example


         We already know the magic that JQuery does with CSS and DOM. Well it can actually do more than that. Sometimes you want to update small portion of your webpage with the data coming from the server, without having to reload the whole page. JQUERY combined with AJAX can do that.
        Consider a scenario, where you want to display the data coming from the server on your page, when a button is clicked. Let us implement this simple jQuery Ajax example step by step.

Step 1: 
        Download JQuery Library from and copy the files to one of your project folders as below. I have added minified version of JQuery here, you can add the full version if you want.

<html xmlns="">
<head runat="server">
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jqueryScript.js" type="text/javascript"></script>

Step 2: 
         Create a paragraph element and also a button with the text “click me to show info from server” and with an OnclientClick event as below. I named OnclientClick function as showInfo (), which I am going to define it later. We are going to call the server side method on click of this button and append the data coming as a response to the <p > element.

    <form id="form1" runat="server">
          <asp:Button ID="btnclick" runat ="server" text="click me to show info from server"                             OnClientClick="showInfo();return false;" />

Step 3: 
          Define a method on the server side which actually sends the message to the client.
Open Home .aspx.cs and define a “public static” method with “webmethod” attribute. The reason for these specifications is, to make the function callable from the client script.
Note: If you miss any one of these, your client script cannot call server method.

See the code below :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class Home : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    public static string sendInfo()
        return "this information is coming from server";

You need to import “Sytem.Web.Services” namespace in order to use “WebMethod” attribute.
Now we made the server side method available to get called from our client side script. The above function is returning a string saying “this information is coming from a server”. To make this string appear on the screen when the button is clicked, let us start scripting our JQuery-Ajax method in showInfo () method.

Step 3:

        So to define showInfo () method, let us create a separate JavaScript file, and add it’s reference to the .aspx ,just as you did for JQuery library file as below.

<html xmlns="">
<head runat="server">
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jqueryScript.js" type="text/javascript"></script>

Step 4:
         The syntax of $.ajax () method to call a server side method goes as below
$.ajax ({propertName: value, propertyName: value ...})
Open the .js file and define the showInfo () method as shown below.

function showInfo() {
        type: "POST",
        url: "Home.aspx/sendInfo",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {

function OnSuccess(response) {

The properties meanings are explained below:

type:  This always specifies the type of HTTP request, whether it is POST or GET.

url: This property specifies the URL to send the request to. In the above example we are sending the request to Home.aspx‘s send Info () method. So other way of specifying the syntax is pagename/method name.

data: This specifies the data that is being sent to the server. Since we are not passing any data in the above scenario, this property has been set empty.

contentType: This specifies the type of data being sent to the server using data Property.

dataType: This is the data type being expected from the server as a response.

success: This property specifies the function to be run, when the request succeeds. In the above scenario “OnSuccess” is the method that gets executed on the success of the request, where we are finding the <P> element and appending the response to it.

failure: This property specifies the function to be run, when the request fails. In the above scenario “the anonymous gets executed on the failure of the request, which alerts the response that we got from the server. 

Step 5: 
         When we run this code we get the following out put as shown below.

On click of this button you see the message being returned from the server side method as below, without reloading the whole page.

Thats it... ! Simple right.. Hope this tutorial helps you to understand how to call server method and get the data using jQuery Ajax method.

No comments:
Write comments

Popular Posts