Call Server Side Code by JavaScript using Ajax.NET Framework

Download source - 187.75 KB

Introduction

Lots of times, we need to call server side code using JavaScript (it means Ajax call) and without postback. There are lots of technologies that are available for that. Some people use Ajax.dll to perform this operation. But now, when Ajax.NET framework is available, there is no need to use a third party DLL for Ajax call.

Background

There is no need to use any third party DLL for Ajax Call. Simply add the reference of System.Web.Extensions.

Using the Code

Set the EnablePageMethods="true" in Script Manager
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<script language="javascript" type="text/javascript">
<!--

// Javascript function
function CallSum() 
{
//Get the controls
var txt1 = $get("txt1");
var txt2 = $get("txt2");
var txtresult = $get("txtSum");

//Call server side function
PageMethods.Sum(txt1.value,txt2.value,OnCallSumComplete,OnCallSumError,txtresult);

//Server side function gets the 2 arguments arg1 and arg2. 
//We are passing txt1.value and txt2.value
//for that. OnCallSumComplete is callback function for complete successfully. 
//OnCallSumError is callback
//function on error. txtresult is usercontext parameter.

//OnCallSumComplete,OnCallSumError,txtresult are optional parameters.

//If server side code executed successfully, then OnCallSumComplete will call.
//If server side code do not executed successfully, then OnCallSumError will call.
}

// Callback function on complete
// First argument is always "result" if server side code returns void 
// then this value will be null
// Second argument is usercontext control pass at the time of call
// Third argument is methodName (server side function name) 
// In this example the methodName will be "Sum"
function OnCallSumComplete(result,txtresult,methodName)
{
//Show the result in txtresult
txtresult.value = result;
}

// Callback function on error
// Callback function on complete
// First argument is always "error" if server side code throws any exception
// Second argument is usercontext control pass at the time of call
// Third argument is methodName (server side function name) 
// In this example the methodName will be "Sum"
function OnCallSumError(error,userContext,methodName)
{
if(error !== null) 
{
alert(error.get_message());
}
}
// -->
</script>
 
Server Side Code:
 
/// <summary>
/// Server side function Sum
/// </summary>
/// <param name="arg1">arg1</param>
/// <param name="arg2">arg2</param>
/// <returns>result(sum)</returns>
[System.Web.Services.WebMethod]
public static int Sum(int arg1, int arg2)
{
//On server side we can do anything, like we can access the Session.
//We can do database access operation. Without postback.
try
{
return arg1 + arg2;
}
catch(Exception ex)
{
throw ex;
}
}