Overview
In my previous post, I showed how you can expose an .asmx web service to AJAX JavaScript code running on the client. In addition to .asmx Web Services, AJAX can also consume 'standard' methods in .ASPX Web Forms. This allows the programmer to directly leverage the functionality implemented in the code-behind page, without the overhead of a full page postback.
In this example, we will create a simulated stock quote application. The application will allow the user to enter a stock symbol, and click a 'Retrieve Quote' button. The client script called by the button will invoke a method in the code-behind of the Web Page, which returns the current price of the stock to the caller.
Implementation Walkthrough
First, we need to create a new Web Application Project (or, if you are so inclined, a new 'Web Site' project). For this example, I called the project 'AjaxStockQuote'. After the project is created, we again need to copy the ASP.Net AJAX Microsoft.Web.Extensions assembly to the /bin directory, and set a reference to it. For details please refer to my previous post.
Again, we need to make the same web.config changes as we did for the AjaxAuditing project
Next, we add a new Web Form named StockQuote.aspx to the project. This form will contain our simple user interface, and the code behind file for this page will contain our method that we will call directly from the client.
In order to be callable from the client, a page method needs to meet the following two conditions:
- It needs to be a public, static method
- It needs to be decorated with the [WebMethod] attribute. Because of this, we need to make sure that we include a using statement for System.Web.Services.
The method itself is very simple. We use a random generator to return a stock price, regardless of the ticker symbol passed-in. But, if you would set a breakpoint in the method, you would notice that the method is being called with the correct parameter. The complete code for StockQuote.aspx.cs is shown below:
The Html for the UI of our file is shown below:
Our button invokes the CallWebService() JavaScript method, which will invoke our page method. We also have a <div> element with Id 'idResult'. The contents (innerText) of this div will be set with the result of our page method invocation.
As before, we need to make sure that we include an <asp:ScriptManager> element as the first element after the <form> tag. This time, we do not <ScriptReference> sub-element, since we are not calling a Web Service, but rather on of our 'own' page methods:
Next, let's take a look at the CallWebService() client JavaScript. Whenever you expose one or more page methods with the [WebMethod] attribute, the ASP.Net AJAX will create a static PageMethods variable, which can be used to invoke the exposed methods as follows:
PageMethods.<Method Name>([<method param(s)>], [<methodToInvokeUponCompletion>]);
Where:
- <Method Name> is the name of the method to be invoked.
- <method Params> are the parameters to the method, separated by commas
- <methodToInvokeUponCompletion>: This method will be invoked upon completion of the invoked method. The return value of the invoked method will be passed in as the argument to this completion method.
The full implementation is shown below:
The implementation uses standard DOM methods to extract and set Html values.
That is really all there is to it. When you run the page and enter a quote, the result area will show the result as shown below:
