We’ve already been through AJAX calls using simple web pages and HTTP Handlers. But there’s still more ways to request data from the server. Today we’ll take a look at how to do so using server methods.

ASP.NET allows you to define methods in the code-behind of an ASPX page. This is very helpful in situations where you want to expose some specific server side functionality such as data retrieval for a specific page. If you need to make the operation available to multiple different .aspx pages it’s a better idea to use a web service so your pages can share the functionality. We’ll see how to use web services in the next post.

Please note that page methods must be declared as static, meaning a page method is completely self-contained, and no page controls are accessible through the page method. For example, if you have a textbox on the web form, there is no way the page method can get or set its value. Consequently any changes with regards to the controls have no affect on the page method. It is stateless and it does not carry any of the view-state data typically carried around by an ASP.NET page.

Ok, so we’ll set up the HTML we need to run this test. We’ll use the same one we’ve been using in all our examples:

<body>
    <form id="form1" runat="server">
      <h2>AJAX call test page</h2>
      <button type="button" onclick='ExecuteAJAXCall()'>Get server time</button>
      <br /><br />
      <div id="DataContainer" ></div>
    </form>
</body>

As usual, we’ll draw a button to perform the AJAX call, and an empty DIV to hold the data retrieved from the server. Now, the Javascript call:

<script type="text/javascript">
    function ExecuteAJAXCall() {
        $.ajax({
            type: "POST",
            url: "default.aspx/GetServerTime",
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: 'json',
            success: Callback_AJAXCall
        });
    };

    function Callback_AJAXCall(data) {
        document.getElementById("DataContainer").innerHTML = "The time at the server is: " + data.d;
    };
</script>

Note that the first function is invoked when the button is pressed. This function is in charge of performing the AJAX call by using the jQuery framework. This time, this function has changed a bit from other examples. Page method AJAX calls require more parameters to set up the communication between client and server. We need to set the content type, and send the parameters to the method, even if it is a parameter-less method. Note how we’re calling the method by using the syntax [page name] + “/” + [method name].

When the AJAX call returns, we have the usual function that takes care of painting the result on the screen. Note how we need to use the d property to access the data this time.

Now comes the interesting part. As we saw before, we’re programming a serverside method in the same web page to return the data from the server, so we don’t need any more web pages in our project. To implement this functionality, get to the codebehind part of the web page and write this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace PageMethodAJAXCall
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod] public static string GetServerTime()
        {
            return DateTime.Now.ToString();
        }
    }
}

The secret behind this magic is just the System.Web.Services library we’re importing. This library provides the WebMethod attribute, which can be used in public static methods to indicate they’re to be accessed by remote client calls. Whatever the function returns will be sent to the client. Note how this time we don’t need to serialize the data nor we need to deactivate the cache: everything is taken care of by the Web Services library. You just need to set the WebMethod attribute and return the data you want. Nothing more is required.

I would say this way of performing AJAX calls is the easiest of all. It requires almost no more concepts than what a developer will have from regular programming, and hides much of the complexity. However, it is not the standard way of communicating with the server for controls, plugins and widgets out there, so it is not always possible to use it. But if you’re developing your own web control from scratch or you can tweak the way some other web control requests data, you should consider using this technique. Remember: keep it simple!

As usual, you can take the Visual Studio project from here and take a look at it:

PageMethodAJAXCall.zip

Related posts:

  1. AJAX call using ASP.NET Web Services
  2. AJAX call using an ASP.NET web page
  3. AJAX call using an ASP.NET HTTP Handler
  4. Different ways to use AJAX in ASP.NET
  5. HTML 5 C# Web Sockets server and ASP.NET client implementation