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()
{
    return "Hello from the server-side World!";
}

3. Modifying the ScriptManager

The “EnablePageMethods” attribute has to be added on the ScriptManager tag.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

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”.

<input onclick="GetMessage()" type="submit" value="Get Message" />

5. Adding the JavaScript code

Let’s add the “GetMessage” JavaScript function, which is going to call our server-side “Message” method.

function GetMessage() {
    PageMethods.Message(OnGetMessageSuccess, OnGetMessageFailure);
}

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) {
    alert(error.get_message());
}

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:

<input type="submit" value="Get Message" onclick="GetMessage();return false;" />

And this would do the trick:

8. Here is the complete source code for your reference

Default.aspx

(Had to replace double quotes (”) with single quote (’) in order to post it correctly.)

<%@ Page Language='C#' AutoEventWireup='true' CodeBehind='Default.aspx.cs' Inherits='AJAXEnabledWebApplication2._Default' %>

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' >
<head runat='server'>
    <title>Page</title>
    <script type='text/javascript'>
        function GetMessage() {
            PageMethods.Message(OnGetMessageSuccess, OnGetMessageFailure);
        }
        function OnGetMessageSuccess(result, userContext, methodName) {
            alert(result);
        }
        function OnGetMessageFailure(error, userContext, methodName) {
            alert(error.get_message());
        }
    </script>
</head>
<body>
    <form id='form1' runat='server'>
    <asp:ScriptManager ID='ScriptManager1' runat='server' EnablePageMethods='true' />
<div>
            <input type='submit' value='Get Message' onclick='GetMessage();return false;' /></div>
</form>
</body>
</html>

Default.aspx.cs

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!

---

Possibly related posts: (automatically generated)

• Calling Flex from JavaScript
• Silverlight and javascript
• Implementing super in JavaScript