Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Using the Ajax.NET Framework : Page 2

What developer wants to spend hours manually writing Ajax plumbing when the Ajax.NET framework does this for free?


advertisement
A Basic Example
The following steps will guide you through creating your first Ajax.NET Framework application. While this example may seem basic in nature, it highlights the necessary steps to get your site up and running with the framework.

Hello World Application
The first example will implement a simplistic "Hello World" application. To begin, you may choose to download the sample code.

If you have yet to download the Ajax.NET Framework, please download it now. After you download the package, extract the contents into a folder that you can easily access.

The final product of this first sample will feature a link that uses the Ajax.NET Framework to retrieve a message from the server. This message is sent to a JavaScript alert box to notify the user. Figure 1 shows how the message looks.

 
Figure 1: A Simple Message: The Hello World application displays a message to the user.
Step 1: Create a Web Project and Reference Ajax.DLL
First, create a new Web project in Visual Studio 2003 to host your application. In your new project, right-click on References and select Add Reference. Navigate to the Ajax.dll file and set a reference in your project to the Ajax.NET Framework.

Step 2: Add the HttpHandler in Web.config
Next update your web.config with a new HttpHandler. Adding this handler will allow requests sent back to the application to be interrogated to see if they are designated as "Ajax.NET" requests. If the requests require processing from the Ajax.NET Framework, the request is caught at this step and processed by the framework.

You can easily add the entry to your web.config using the following code snippet. Place the httpHandlers node directly after the opening element of the system.web node as shown below.

<system.web> <httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax. PageHandlerFactory, Ajax" /> </httpHandlers> ... </system.web>

Step 3: Register Page as an "Ajax Type"
The next step signals to the application that the individual page you are working on must be processed through the Ajax.NET Framework. In the Page_Load event method you will add the following code.

public class WebForm1 : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { Ajax.Utility.RegisterTypeForAjax (typeof(WebForm1)); } }

In this instance the class name is WebForm1. Notice that you pass in the class name of the page to the method RegisterTypeForAjax using the typeof method.

Step 4: Create Your Method
When you create the method, decorate it with the AjaxMethod Attribute to create a method that will return data to the browser.



[Ajax.AjaxMethod()] public string SayHi() { return "Hello World!"; }

Notice the use of the Ajax.AjaxMethod attribute. Applying the attribute to this method will signal to the application that the appropriate JavaScript must be created to allow client-side calls of this method. Other than the attribute, this method is structured and behaves just as any other method you would normally create.

Step 5: Write HTML to Call the Code-behind Method
Create some HTML that allows the user to initiate the call to the server. This code will render a link on the page. When the user clicks this link, the browser will contact the server and run the SayHi method. This example defines a callback method so when a response is sent back from the server, the SayHi_CallBack method runs. The SayHi_CallBack defines a response argument. The value of this response is sent to a JavaScript alert box to send a message to the user.

Add the code in the following snippet somewhere between the BODY tags in your HTML document.

<a href="javascript:void(0);" onclick="WebForm1.SayHi( SayHi_CallBack);">Click Here</a>

Make sure to not include the parenthesis at the end of the method name when defining your callback in the originating method. Add the code in the following snippet within the HEAD tag of your document.

... <head> <script type="text/javascript"> function SayHi_CallBack(response) { alert(response.value); } </script> </head> ...

How Does this All Work?
When the page is rendered to the browser, a number of JavaScript elements are dynamically created to support the page. References to the Ajax.NET JavaScript library files are automatically added to the rendered page. Also created at this time is a JavaScript proxy that acts as the data transfer object between the client and server.

When a user clicks the "Click Here" link, the designated method is called on the server. The server does its processing and then flags the system that a response is ready. When the browser recognizes a response from the server, the callback method is invoked and the response (with the interface of the proxy) is passed as an argument.

In this case, the code-behind method SayHi returns a string so the proxy's value property is simply the string value returned by the method.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap