Call Non-Static Server Side Methods via Microsoft’s AJAX
There are two simple ways to implement and utilize the out-of-the-box AJAX framework from Microsoft. One requires the server-side method to be static, while the other way does not require the static method.
Download the code for this solution here.
Call Server Side Method via PageMethod Object (Static Server-Side Method)
If you have spent any time with AJAX.NET, you know there are simple ways to make asynchronous calls from client-side JavaScript to server-side methods. You simply have to do the following
1. In the Code Behind / Code File:
a. Decorate your server method with a WebMethod parameter.
b. Make your server method static.
///<summary>
/// Called from AJAX
///</summary>
[System.Web.Services.WebMethod(BufferResponse = true)]
Protected static String MyServerSideMethod(String args)
{
return "This is my test";
}
2. In the ASPX page:
a. Include a ScriptManager and set the EnablePageMethods="true".
b. Call your server method using the PageMethods object. Pass in the arguments (if you have any), the method to call on a successful call (if you want to), the method to call on a failed call (if you want to), the ID of any HTML object to update on return (if any)
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true">
</asp:ScriptManager>
<script type="text/javascript">
function CallMyServerSideMethod()
{
PageMethods.MyServerSideMethod("These would be my args", CallMySuccessMethod, CallMyFailedMethod, dest);
//You could also call this as follows:
// PageMethods.MyServerSideMethod("These would be my args", null, null, null);
}
//Gets called if the AJAX call succeeds
function CallMySuccessMethod(result, destCtrl, context)
{
//Now get our data. Any errors have already been thrown in the failure function.
alert(result);
//if we passed in some destination HTML object ID, we can grab it and update it as necessary
//var dest = document.getElementById(destCtrl);
//dest.value = result;
}
//Gets called if the AJAX call fails or has an error
function CallMyFailedMethod(res, destCtrl, context)
{
alert("There was a problem calling MyServerSideMethod " + res.get_message());
//alert("Stack Trace: " + res.get_stackTrace() + "/r/n" + "Error: " + res.get_message() + "/r/n" + "Status Code: " + res.get_statusCode() + "/r/n" + "Exception Type: " + res.get_exceptionType() + "/r/n" + "Timed Out: " + res.get_timedOut());
}
</script>
The only big issue with the above scenario is that the server side method has to be static. This is due to the fact that the call isn’t a true call to the entire page lifecycle. In essence, the PageMethod is a call to an object that gets created as a pseudo WebService. In many situations, this is just fine and you can easily make your server-side/code-behind method static. However, there are times when you can’t. So, what do you do in those situations? What do you do when you need to call a non-static server side method via AJAX? As it turns out, you still have options.
Call Server Side via AJAX without a Static Method
If you need to use Microsoft’s out-of-the-box AJAX and yet need to call a non-static server method, you can implement the
ICallbackEventHandler. This interface gives you the ability to wire-up any control and/or page to receive callback events. More information can be found here:
http://msdn.microsoft.com/en-us/library/system.web.ui.icallbackeventhandler.aspx. The images below are coded to the steps outlined in the following list:
1. In the Code Behind / Code File:
a) Have your page inherit the ICallbackEventHandler.
b) Write a method to create and register the client function that will call methods of the ICallbackEventHandler. This will create and write out the JavaScript function that will get called by your page in order to make the actual call back to the server.
c) Implement the actual methods for the ICallbackEventHandler. The two methods to implement are ICallbackEventHandler.GetCallbackResult and ICallbackEventHandler.RaiseCallbackEvent.
d) Call your non-static server method within the ICallbackEventHandler.RaiseCallbackEvent.
e) Return your value (if there is one) within the ICallbackEventHandler.GetCallbackResult. Note, you will most probably need a “global” member variable for your page class so that both the GetCallbackResult and RaiseCallbackEvent can read/write the same data.
2. Write the call to the JavaScript function that you “wrote” in 1.b above.
Code Outline of Above Steps (click image for larger image):
Where each JavaScript method call gets created/referenced (click image for larger image):
That is all there is to it. You now have a page that uses Microsoft’s out-out-of-the box AJAX. I added an example solution in case you wanted to see the actual code.