ASP.net AJAX has got nice bridging between your server side and client side technologies. Using the ASP.net AJAX you can easily call a method in a page. The restriction here is that, the methods your are trying to call should be static and public.

This feature(calling server side static method) is not enabled by default, so you have to manually enable this and it is very very simple; just set the "EnablePageMethods" property of the "ScriptManager" to true like this

 

 

 

 

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

After this, create a public static method in your asp.net page and decorate it with WebMethod(System.Web.Services.dll) and ScriptMethod(System.Web.Extensions.dll) attributes. For example I have created a static method called "GetTime()" which returns current time as string.

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

        }

        [WebMethod]
        [ScriptMethod]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }
    }

Now you have configured everything correctly and I will show you how to call this method from the client side.

Earlier you have set the "EnablePageMethods" property of "ScriptManager" to true, as a result of that a new object called "PageMethods" is created by the ScriptManager when the page is rendered. This object has all the public static methods in that page. So that you call the server side method like PageMethods.[ServerSideMethodName]. When calling this methods from client side you have to provide a callback function because here all the call scriptmanager made will be asynchronous, and this callback method will get the returned result.

Below is the sample code 

	function callServerMethod()
        {
            PageMethods.GetTime(callBackMethod);
        }

        function callBackMethod(result)
        {
            alert(result);
        }

Complete aspx page looks like this 

<body>     <form id="form1" runat="server">       <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">      </asp:ScriptManager>      <div>          <a href="javascript:callServerMethod()" >Call Server method</a>      </div>      <script language="javascript" type="text/javascript">      //<![CDATA[          function callServerMethod()          {              PageMethods.GetTime(callBackMethod);          }          function callBackMethod(result)          {              alert(result);          }      //]]>      </script>      </form>
</body>

Extra bits

In the above code you can see that I have placed link, when user click on that link a message is shown with the server time. So behind an asynchronous request is send to the server in this format (http://[sitename]/[MethodName]). Server in turn returns the result as JSON back to the client. Here is a screen shot from the firebug

image

image

There is optimization we have do here - you can see that, by default the request is a POST request, but in our case a POST request is heavy because we could have achieved the same using a GET request ( Difference between POST and GET ).

In order to change this request in to a GET request, we need to do a minor tweaking in the server side, set "UseHttpGet=true" parameter for the "ScriptMethod" attribute.

	[WebMethod]
        [ScriptMethod(UseHttpGet=true)]
        public static string GetTime()
        {
            return DateTime.Now.ToLongTimeString();
        }

After this you can see that, request is changed to a GET request

image

kick it on DotNetKicks.com