.NET AJAX callbacks to ASPX Pages: Pagemethods, Webmethods, ajax callbacks

ASP.NET AJAX callbacks to web service are becoming very popular and unavoidable these days. The feel that the user gets when only a part of the page is updated without even hindering the UI is the advantage that the callbacks offer. The wait for the full page to be posted back and results to appear is reduced thereby keeping a rich user experience. In some situations you would not want to expose the arguments and the methods it supports to the public through the ASMX file. This will require you to move the logic to specific ASPX files or inside the inherited base class. Specifically, this is the most important reason which, I feel, would require you to move web methods to ASPX pages.

Both ASP.NET AJAX Extensions and ASP.NET 3.5 support AJAX callbacks to the web methods placed in ASPX pages or the inherited base class. The following are the steps involved, and we will use a fictitious routine "GetEmployees" to exemplify what we are doing.

The first step is to expose GetEmployees as a web method.

1: public partial class Employees : System.Web.UI.Page
2: {
3: [WebMethod]
4: [ScriptMethod]
5: public static List<Employees> GetEmployees(string dept)
6: {
7:   // logic to get the Employee list
8: }

1:
2:
3:
4:
5:
6:
7:
8:

Select all Open in new window

Important points to be noted :

1. The method needs to be decorated with [WebMethod]
2. The method needs to be decorated with [ScriptMethod] to enable callback
3. The method MUST be static

Go to ScriptManager tag and set the ScriptManager.EnablePageMethods property to true. This will make all the web methods on this page visible to the JavaScript client. Without enabling the EnablePageMethods property the webmethods will not be available in the client side. So always pay a keen attention to enable it.

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

1:

Select all Open in new window

Finally, Change the JavaScript code to call the method through the PageMethods object instead of the Web Service.The transport of data to the client side can be in XML, JSON, String etc. I would recommend using JSON because it is light weight, fast and can be implemented with ease. When I say transport of data it is actually the result from the GetEmployees() function which we have marked as the WebMethod. when using JSON also pay a little care to the eval() which is known to cause XSS issues.

1: function GetEmployees ()
2: {
3:     PageMethods. GetEmployees(dept ,OnSucceeded);
4: }
5:
6: function OnSucceeded (result)
7: {
8:     // logic to display the result
9: }

1:
2:
3:
4:
5:
6:
7:
8:
9:

Select all Open in new window

The Original article was published in my site . Happy coding :)

.NET AJAX callbacks to ASPX Pages

Pagemethods

Webmethods

ajax callbacks

Asynchronous Javascript and XML (AJAX)

About The Author

Comments

Add your Comment

Top AJAX Experts