Decoding the Web
ASP.NET – How to call a server-side method from client-side JavaScript
Introduction
This is a tutorial on how to call a server-side ASP.NET method from a client-side JavaScript method.
If you are wondering when that could become useful, imagine the following scenario:
A Web Application having an implemented authentication system.
Users log in with their username and password.
At any point the user is able to log out by clicking on the respective “Log Out” button.
On the server-side, the log out action would trigger a cleaning up process of user’s temp data.
However, the user instead of clicking on the “Log Out” button, may simply close the browser window. Now since HTTP is a stateless protocol, the server-side cannot directly detect the user’s action. Therefore the client-side (browser) would have to notify the server that the user is closing the window.
A solution to this problem would be to call a JavaScript function when the client-side “onUnload” event is triggered. The JavaScript function would then be able to call the appropriate server-side method to clean up the data.
The exact required AJAX mechanism to accomplish that kind of communication is described on the “Hello World” project below.
Please note that for the purpose of this tutorial all methods are kept as simple as possible, so that you can easily modify them for your application.
1. Creating a new ASP.NET project
AJAX is required, thus a new “AJAX enabled ASP.NET Web Application” has to be created on Visual Studio 2005 or “ASP.NET Web Application” on 2008.
2. Modifying the server-side code
Every server-side method that is called from the client-side, must be declared as “static”, and also has to be decorated with the [System.Web.Services.WebMethod] tag.
Now let’s create a simple function that returns a string value.
[System.Web.Services.WebMethod] public static string Message()3. Modifying the ScriptManager
The “EnablePageMethods” attribute has to be added on the ScriptManager tag.
4. Adding a simple HTML button
We are going to add a simple HTML button rather than a server-side ASP.NET button control. The “onClick” event is going to be associated with the JavaScript function “GetMessage”.
5. Adding the JavaScript code
Let’s add the “GetMessage” JavaScript function, which is going to call our server-side “Message” method.
The “OnGetMessageSuccess” is the name of the JavaScript function that will be called if the request is successful. Whereas the “OnGetMessageFailure” will be called if an exception is thrown.
So let’s add these two functions:
function OnGetMessageSuccess(result, userContext, methodName) < alert(result); >function OnGetMessageFailure(error, userContext, methodName)
Please note that you can give to the functions any name you wish, as long as they match the PageMethods call parameters.
If there are no errors, the “OnGetMessageSuccess” will show a pop-up window with our server-side “Message” text. Else, the pop-up will have an exception message.
6. Running the Web Application
This is it, we are ready to run our Web Application. Everything seems to be working just fine on Internet Explorer (IE6 and IE7):
However if we run it on Firefox (currently the latest version is 3.0.4) the pop-up will display the following message:
The server method ‘Message’ failed.
7. Fixing the Firefox issue
We just need to modify the button’s onclick event a bit:
And this would do the trick:
8. Here is the complete source code for your reference
(Had to replace double quotes (“) with single quote (‘) in order to post it correctly.)
function GetMessage() < PageMethods.Message(OnGetMessageSuccess, OnGetMessageFailure); >function OnGetMessageSuccess(result, userContext, methodName) < alert(result); >function OnGetMessageFailure(error, userContext, methodName)
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; namespace AJAXEnabledWebApplication2 < public partial class _Default : System.Web.UI.Page < protected void Page_Load(object sender, EventArgs e) < >[System.Web.Services.WebMethod] public static string Message() < return "Hello from the server-side World!"; >> >
Comments are always welcome!
Share:
Like this:
Related
75 Responses
@Wally: Thanks! Add the parameter on the server-side, for example Message(string name). And then on the JavaScript, add the same parameter on the PageMethods call, like PageMethods.Message(name, OnGetMessageSuccess, OnGetMessageFailure)
I’ve been working with an exposed Web Service for a while now… I did not know about that error catching trick. Very cool. Nice article. One thing I cannot find, however, is how to pass a parameter from client-side to client-side… is that possible? (How do I get OtherVariableToPass into the fncJavascriptHandleReturn as OtherVariableToReceive w/o making the WebService send it back?) function fncJavascriptDoSomething()
var OtherVariableToPass = “test”;
WebService.WebMethod(“paramToWebMethod”,fncJavascriptHandleReturn);
> fncJavascriptHandleReturn(WebMethodResults,OtherVariableToReceive)
alert(WebMethodResults);
>
@schmakt: Thanks! I guess that you can have your OtherVariableToPass outside of the functions, so that they can both access it.
yah, that’s what I ended up doing.
*annoyed* that there wasn’t a more direct way. Thanks for the response 🙂
i also heard about ıcallback inerface and ICallbackEventHandler .
they are also doing the same job
wha are the differences?
Hi
This example is calling a static server side method. Is is possible to call a non-static method as static method is not able to access other variables and controls in the page. Cheers
Hi it was a good article i agree but can i return one object from server to client if it is return means how to handle in client side please reply me Thanks vijay
@vijay: Thank you. You could probably pass your object’s data in JSON format, and then process them with Javascript on the client-side.
[…] I did some research and found an article entitled “How to call a server-side method from client-side JavaScript“. […]Great tutorial, thanks 🙂 Why is step 7 necessary ?? Why is Firefox handling the event differently than IE . thanks hendrik
[…] I have see this 3 topics:http://www.dotnetcurry.com/ShowArticle.aspx?ID=109https://decoding.wordpress.com/2008/11/14/aspnet-how-to-call-a-server-side-method-from-client-side-ja…http://weblogs.asp.net/muhanadyounis/archive/2008/12/30/scriptmanager-and-masterpage-pagemethods.aspxAnd just the 3 use MasterPages, I can´t find any article that explain to me an interaction betweeen client side, and server side using MASTERPAGES.My all web site use master page, and i really need to acess from client side using javascript to some functions in server side, the big problem is.. i use MASTERPAGES i read the 3 article and it looks nice.. but doesnt help very much: I have this in MASTER PAGE: