Calling methods in a codebehind function (PageMethods) from client side using ajax.net
Hi,
Everyone using ajax.net will be familiar with
the updatepanels. In addition another well known way of
utilizing the rich ajax.net library is calling web service
methods or methods from the code behind file from the client
side. Recently i came across a situation in my project where
i wanted to call methods from code behind (i have been using
updatepanels but in some situation all i was doing was
getting few values from the db and i felt not using the
updatepanel would be a better option rather calling the my
code behind function using pagemethods feature would be more
appropriate). Though there is a good deal of information on
the internet on update panels and calling web services i
found it difficult to reach a good enough article showing me
how to call a function from the codebehind file. Finally
though :-) i was able to call the code behind function. i am
going to demonstrate the same in this blog.
Before
starting let me indicate there could be many reasons for
calling code behind methods from client side using ajax.net
.....in my case i wanted to use existing functionality in my
code behind and we were not using any webservices .
Here i am going to demonstrate a simple application that
calls a code behind method
to start first we
create an ajax enabled website. Then in our page we add the
heart of ajax.net -- the ScriptManager control and set the
EnablePageMethods property as true
<ajax:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
We also place a div and input buttons on our
form
<div id="div1">
</div>
<input type="button" value="Call Page Method With No Parameters" onclick="CallPageMethod()" />
<input type="button" value="Call Page Method With Parameters" onclick="CallParametersPageMethod()" />
As the text indicates on call a function without parameters and the other calls a function having parameters
The code behind function are as below[System.Web.Services.WebMethod()]
public static string MyFirstPageMethod()
{
return "Welcome to the world of AJAX.NET " ;
}
[System.Web.Services.WebMethod()]
public static string MyFirstParameterPageMethod(String strVal)
{
return "Welcome to the world of AJAX.NET , the value you passed is : " + strVal ;
}
To call a page method it must be static and you have to mark
it with the WebMethod attribute. The first function doesnot
takes parameter while the second function takes a string
value as parameter. both return a string value.
The
javascript function are as below
<script language="javascript">
{
PageMethods.MyFirstPageMethod(onSucceeded,onFailed);
}
function
CallParametersPageMethod()
{
PageMethods.MyFirstParameterPageMethod("This is a Demo",onSucceeded,onFailed);
}
{
$get('div1').innerHTML=result;
}
function
onFailed(error,userContext,methodName)
{
alert("An error occurred")
}
The CallPageMethod method calls the parameterless function
MyFirstPageMethod from codebehind and the
CallParametersPageMethod calls the code behind function
MyFirstParameterPageMethod and passes a string as
parameter
We call the codebehind method as
PageMethods.MethodName();
The OnSucceeded
parameter indicates the javascript function to be called
when the call has succeeded and the result parameter has the
result stored in it in our case the string returned from the
code behind file.
The OnFailed parameter
indicates the javascript function to be called when error
occurs.
In case the code behind function has no
parameters then we pass the onSucceeded and OnFailed
parameters only.
To pass a parameter to code
behind we pass them in the same order as the code behind
function and at the end we add the onsucceeded and
onfailed parameters as in the
CallParametersPageMethod javascript function.
The
return value is displayed in the div.
I have
attached the complete code of this.
Hope this is
helpful to you all.