Call PageMethod/WebMethod Using Jquery in ASP.Net

June 13, 2011

Normally as a ASP.Net developer, when its required to call a PageMethod or WebMethod from Client side always we prefer to use ASP.NET AJAX’s page methods. I discovered that you can call page methods via jQuery. In fact, it turns out that you can even do it without involving the ScriptManager at all.

In this post, I will explain exactly what is and isn’t necessary in order to use page methods. Then, I’ll show you how to use jQuery to call a page method without using the ScriptManager.

Lets Start then!!!!

The very first step you have to do is download Jquery File and add it to your project. You can download form here.

Add reference of “jquery-1.2.3.min.js” file to your page from where you want to call the server method.

Now i will explain you what you have to do when you want to call server method withount an argument, with a single argument and with multiple arguments.

I will provide you sample for each.

To make it very simple i have create a common javascript method, which you can place in master page so that the same may be use to call a server method from any page.

function CallServerMethod(PageName, PageMethodName, para, onSuccess)
{
$.ajax({
type: “POST”,

//Page Name (in which the method should be called) and method name
//url: “Default.aspx/CheckDateTime”,
url: PageName + “/” + PageMethodName,
// If you want to pass parameter or data to server side function you can try line
data: “{” + para + “}”,
//else If you don’t want to pass any value to server side function leave the data to blank line below
//data: “{}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: onSuccess,
error: function(response)
{
alert(response.d);
}
});
}

Now Let say if you have three methods in your page. One with no argument, One with single argument and one with multiple arguments. As Shown in below.

[System.Web.Services.WebMethod()]
public static string GetName()
{
return “Return From Server: VIMAL”;
}

[System.Web.Services.WebMethod()]
public static string GetNameSingleArgu(string FirstName)
{
return “Return From Server: ” + FirstName;
}

[System.Web.Services.WebMethod()]
public static string GetNameMultipleArgu(string FirstName,string LastName)
{
return “Return From Server: ” + FirstName + ” ” + LastName;
}

Now to Call a Server Method without any argument, You just have to write the following Javascript Code:

function GetNameFromServer()
{
CallServerMethod(‘Default.aspx’,’GetName’,”,CallSuccessGetName);
}

function CallSuccessGetName(ReturnValue)
{
alert(ReturnValue.d);
}

If you are thinking about ReturnValue.d, be sure to visit post about what it is, why it’s there, and why you may not need it in your version of ASP.NET.

Simple!!! Very fist argument will be your Page/WebService Name and Second one will be Method Name. Last parameter is function name which you want to call upon success return from server method.

Third parameter is parameter values that you want to pass to the server method. To call server method with single argument you have to write the javascript code as below:

function GetNameFromServerWithSingleArgument()
{
var FirstName = “VIMAL”;
CallServerMethod(‘Default.aspx’,’GetNameSingleArgu’,”‘FirstName’:'” + FirstName + “‘”,CallSuccessGetName);
}

See carefully the format of third parameter is. It would be like this ‘ParameterName’:’ParameterValue’,’SecondParameterName’:’SecondParameterValue’…..

To Call a server method with multiple arguments do the following:

function GetNameFromServerWithMultipleArgument()
{
var FirstName = “VIMAL”;
var LastName = “PANCHAL”;
CallServerMethod(‘Default.aspx’,’GetNameMultipleArgu’,”‘FirstName’:'” + FirstName + “‘,’LastName’:'” + LastName + “‘”,CallSuccessGetName);
}

As you can see, there’s no ScriptManager required, much less EnablePageMethods.

That’s it from my side. I am attaching the sample code for your reference, which will also show you the way to call method from Web Service.

CallServerMethodUsingJquery

Note: Please rename above file from callservermethodusingjquery.doc to callservermethodusingjquery.zip.

If you have any doubt or issue feel free to contact me by commenting out here… 🙂

Enjoy Coding!!!!