ASP.NET contains some controls which makes adding AJAX features to your application rather easy. For example, Microsoft has provided us with the UpdatePanel. The UpdatePanel control allows you to partially render individual portions of your pages without initiating a full postback. The UpdatePanel control is great in many ways, but seems to be quite a bandwidth hog. Since the control sends ViewState and other information along with it, it can roundtrip a lot of information to the server when you may only need to update a small amount of text in a label.
So how can you avoid all sending and receiving all of that unnecessary data? In comes the hero, Page Methods!
What are Page Methods you ask? Page Methods are a way to expose server side ASP.NET code to your client script via a JavaScript proxy. All of the complex communication code required to do this is abstracted away and you are left with one simple JavaScript proxy method to invoke.
So why should you use Page Methods rather than the UpdatePanel? Page Methods can possibly save you a large amount of bandwidth which can mean faster response times for visitors on slower connections. Instead of returning a large chunk of data, we can return precisely what we need to display to the user. Unfortunately Page Methods are more involved than simply dropping a control on a page, but for performance and bandwidth sensitive situations, they may be the right tool.
Let’s go through a quick example of Page Methods. All pages that use Page Methods must include a ScriptManager. A ScriptManager can be added to your page like so:
[code language=’xhtml’]
[/code]
Note that we must set the EnablePageMethods property of this control to true in order to use Page Methods.
Next we can add our HTML markup to our page. The following markup will create a blank label and a button which will call the Page Method:
[code language=’xhtml’]
[/code]
Next, we will define a JavaScript method to call the Page Method as well as two additional JavaScript methods to act as callbacks for success or failure of the Page Method. Add the following JavaScript to your page:
[code language=’javascript’]
function getDate() {
PageMethods.GetDate( onGetDateSucceeded, onGetDateFailed );
}
function onGetDateSucceeded( thisResult ) {
// Set the label appropriately
var thisLabel = $get( “lblDateTimePageMethods” );
thisLabel.innerHTML = thisResult;
}
function onGetDateFailed( thisError ) {
// Alert the user to the error
alert( thisError );
}
[/code]
The getDate() method is invoked when the user clicks the “Get Date” button. Inside we call the PageMethods.GetDate method which is essentially saying to call the GetDate method in our code behind. It takes two parameters which are callback methods for when the server side code finishes processing.
The onGetDateSucceeded() and onGetDateFailed() methods will be invoked when server side code succeeds or fails respectively. Since our server side method will return a string, the onGetDateSucceeded() method will expect a parameter.
Finally, we need to create the actual server side code which will send the requested data back to our page. The following code will do exactly as we need:
[code language=’c#’]
using System;
using System.Web.Services;
using System.Web.Script.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
}
[/code]
Note that the method must be decorated with a WebMethod attribute and also must be static in order for it to be exposed as a Page Method.
It’s time to build and run our project. If all has gone well, you should see something like the following:
Go ahead and click the “Get Date” button to fill in the label with current date and time from the server. If the Page Method worked, you should see something like the following:
