AJAX using ASP.Net PageMethods

Most of developers are quite familiar with update panels but not so familiar with page methods concept. So what are Page methods?

Page methods are nothing but web methods (web service) that resides inside the code behind of ASP.NET page. And using AJAX you can call these page methods from JavaScript.

Let’s take one example and you will be clear on how we can implement AJAX using Page Methods.

Place one label and a button on page. And task is to increment the value in label every time button is clicked. Your ASPX page looks as shown below…

<asp:ScriptManager ID="ScriptManager1" runat="server"

EnablePageMethods="true" />

<script language="javascript">

function UpdateCounter() {

PageMethods.GetUpdatedCounter(OnSucceeded, OnFailed);

}

function OnSucceeded(result) {

$get('Label1').innerHTML = result;

}

function OnFailed(error) {

$get('Label1').innerHTML = "0";

}

script>

<asp:Label runat="server" ID="Label1" Text="100" /><br />

<input type="button" id="Button2" value="Click Me"

onclick="UpdateCounter();" />

See carefully scriptmanager tag above. It’s using EnablePageMethods property which instructs scriptmanager to look for page methods in code behind.

Also while calling page method PageMethods.GetUpdatedCounter there are two parameters passed to it OnSucceeded & OnFailed. These parameters are nothing but javascript functions. First parameter/function will be called when page method call succeeds and second parameter indicates method which needs to be invoked when page method call fails for some reason. These functions are called as Call Back Methods. There is no naming standard across these call back methods, and you can give any name for these methods.

There is one parameter to OnScceeded method, which is “result”. This is nothing but any return value from page method. In this case, our page method will be returning an incremented number and it will be passed to OnScceeded automatically. Rest of code above is simple Html and Javascript.

Now we have to write one function in code behind which will actually do the incremental mathematics for us.

[WebMethod]

public static int GetUpdatedCounter()

{

return int(Label1.Text)++;

}

Notice here two important things to note. First the function is decorated with WebMethod attribute. Needless to say it makes function a web method. Second is static keyword in the method declaration. Page methods are Static because they are independent of the page instance. They are simply independent web methods which are hosted inside code behind instead of a separate webservice.

That’s it, compile the code and run it and you will be amazed to see how quickly you get the response. I recommend you to do this example on your own and you will be clear on the how things are happening. Same thing can be implemented using Update Panels but Page Method approach is faster and efficient than Update Panels.

In coming post i will why PageMethods are better than UpdatePanels. Till then enjoy coding..;-)