One feature I really like in ASP.NET AJAX is PageMethods. They allow you to call a server side method from JavaScript and even get the return value. This feature has quite a few competitors:

1.    Post backs with/out partial rendering; AKA the UpdatePanel. Throw the control to be updated in the update panel and a post back will be made returning new HTML to replace the contents of the update panel without reloading the entire page. This is the easiest approach but keep in mind you are rebuilding the entire page anyway.

2.    Call-backs; An ASP.NET 2.0 innovation which executes a segment of the page lifecycle in order to retrieve the end result. The information is then passed client-side to update the content without a page reload. Again you need to build all the related controls client side and do client side update.

3.    And we end up to PageMethods. They allow you to call a server side method from a service or page and return its value client side without the page reload. The only disadvantage here is that you must manually update your control values client side.

  I am quite happy with that actually as this is unavoidable if you are interested in implementing AJAX. Let’s see the PageMethods in action. You start with a .NET 3.5 Web Site or AJAX enabled Site in Visual Studio. This will give you a page with a script manager and a web.config with all the required entries. If you don’t have a page with a script manager just add one. Let’s use the following one:

<%@ page language="C#" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head runat="server">

<title></title>

<script language="JavaScript" type="text/JavaScript">

// <!CDATA[

function Button1_onclick()

{

PageMethods.GetDate(success);

}

function success(s)

{

alert(s);

}

// ]]>

</script>

</

head>

<body>

<form id="form1" runat="server">

<div>

<asp:scriptmanager id="ScriptManager1" runat="server" enablepagemethods="True">

</asp:scriptmanager>

<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />

</div>

</form>

</

body>

</html>

  Things to notice on the page is the scriptmanager with enablepagemethods set to true. This should emit the JavaScript code required. to enable PageMethods. We are missing the server side method now. We simply create a method in our Default.aspx.cs file or in a script with runat="server" attribute in the default.aspx page. Here is the code for our example:

[WebMethod]

public static string GetDate()

{

return DateTime.Now.ToString();

}

  The attribute WebMethod is part of System.Web.Extensions.dll in the namespace System.Web.Services. The attribute simply marks the method as callable from remote web clients, for example web browsers. Thats all you need to do to call a Page Method. Let’s take a look at the client-side call. GetDate() is now a method of PageMethods class. The class is generated automatically and is added to the page by the ScriptManager. When you call a method client side you need to specify some additional parameters that do not actually match your method signature. As you noticed from the above example, GetDate takes no parameters but client side we specify one. The additional parameter specifies which function to call when the server side method completed. This is simply because it is an asynchronous postback. Having said that, I am sure you automatically assumed you can specify a method to be called when the call fails. To wrap things up, put any parameters your method needs to have plus at least another one specifying the method to be called when the operation is successful so that you can retrieve the result.

  Some important points to successfully run PageMethods:

1.    Enable page methods with the scriptmanager control.

2.    Your server side method must be static.

3.    The WebMethod must be in the page. Not in a usercontrol or master page.

 

  The above requirements have been driving lots of developers nuts which can’t understand why PageMethods don’t work. If you haven’t done those, you will end up with a "PageMethods is undefined" error message since the ScriptManager does not emit the PageMethods proxy class.

Advertisements