Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET
Article

Optimizing Web Applications with AJAX and Spread

7 Nov 2006CPOL9 min read 58.9K   22   2
FarPoint has developed leadership in the spreadsheet component marketplace with FarPoint Spread for Web Forms which is the high-end spreadsheet product for ASP.NET development. It is AJAX enabled and ATLAS tested.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Image 1

Overview

Integrating AJAX into your next application may solve many problems and give your users the interactivity and speed they are beginning to expect when looking for information on the Web. The use of AJAX in a Web Forms application provides many benefits and improvements. FarPoint recommends understanding AJAX before using it in any application development, especially in spreadsheet application development which has its own unique requirements.

FarPoint has developed leadership in the spreadsheet component marketplace with FarPoint Spread for Web Forms which is the high-end spreadsheet product for ASP.NET development. It is AJAX enabled and ATLAS tested. But they also offer a complete enterprise solution with FarPoint Spread .NET bundle which includes the Web Forms version along with a FarPoint Spread for Windows Forms version. Download the trials now to see how customizable a spreadsheet can be. FarPoint also makes a COM version of the spreadsheet control.

Introduction

While users expect quick response times and numerous interactive controls from Windows applications, it is not always straight-forward to deliver these same performance aspects in Web applications. Restricted by simple browsers on the client and slowed by the limits of client-server communication, Web applications are mostly slower and simpler than their proprietary desktop counterparts. But developers are an ingenious bunch, and they have figured out how to use readily available technology on the Web to provide that same responsiveness. That available technology includes JavaScript , XML, and some underlying HTTP requests used in concert to provide asynchronous communication between the client and the server. So AJAX (Asynchronous JavaScript and XML) provides a fairly simple solution that can speed up client-server communication to allow Web pages to feel more like other applications on the desktop.

As developers begin to realize the diverse ways in which Web technologies can be used for ever more data intensive front ends and applications, technologies such as AJAX will become more prevalent. Integrating AJAX into your next application may solve many problems and give your users the interactivity and speed they are beginning to expect when looking for information on the Web. The use of AJAX in a Web Forms application provides many benefits and improvements. There are also limitations to its use and not all applications benefit from it. FarPoint recommends understanding AJAX before using it in any application development, especially in spreadsheet application development which has its own unique requirements.

AJAX Improves Web Interaction

To see just how responsive Web pages can be using AJAX, you need look no further than Google Maps, and other sites that offer lots of data that can be manipulated with ease through an ordinary Web browser, such as having your text completed while typing here.

AJAX combines a group of technologies to provide smarter client-side pages; it is a type of programming architecture for creating interactive Web applications that can update data on a client page by making direct calls to a server without needing to go to the server for the entire page using HTML, CSS, and JavaScript. By using JavaScript routines as a middleman and special HTTP requests with XML data, AJAX sends only essential data to the server and intelligently replaces data on the client without requiring an entire page of data to be retransmitted back and forth to the server. The use of AJAX is a simple mechanism with powerful results especially with large spreadsheets or grids.

The experience to the end user is dramatic because it improves response time by providing a faster postback. With AJAX, when a browser makes an initial request of a page, the server provides not only the viewable part of the page but also the AJAX routines, really JavaScript functions, that will help with further page processing. This diagram summarizes the process.

Image 2

When additional user interactions are performed, the client can perform some of that processing, handling requests or changes in data with calls to the JavaScript functions. These might handle the changes locally or send abbreviated requests to the server for further processing. The server then can send back data in the form of XML for the AJAX routines to process. This eliminates the need mostly for the entire page to be posted back. With large amounts of data, as in spreadsheet applications, these time savings can be impressive. Of course, this requires more work to be done up front to anticipate the type of interactions that the user may require and how to handle those interactions. The advantage is a better experience of the Web page for the user.

Using AJAX and Spread

Spreadsheet applications can be some of the most data intensive applications with which to work. They can work on large data sets and require many calculations. With components such as Spread for Web Forms, spreadsheet applications can bind to databases with millions of cells of data that must be made available to end users. For a Web application, traditional ways of serving up pages can impose severe restrictions on a spreadsheet application's performance when it is bound to a large data set. Paging or moving around the sheet by the end user can demand system resource typically easily available to Windows applications but limiting Web applications. But with AJAX, those restrictions can be largely hidden from the end user as AJAX can send back to the server only those cells that have changed and updating only those calculations that need recalculating. For paging, only those rows that are displayed need to be fetched from the server.

FarPoint introduced support for AJAX in its latest version of FarPoint Spread for Web Forms. With simple Boolean properties on the FpSpread component class, Spread for Web Forms can be made aware that the application is using AJAX. See the product tour at our web site or available with the product download. The example from that product tour, with a custom toolbar to allow user interactivity, is briefly described here to show how AJAX can improve a spreadsheet application.

Here the user can format the text in an ordinary text cell and see the results immediately. Also, the sum of the numbered cells can be calculated when any of the individual numbers change without having to get the entire sheet from the server.

Image 3

The code for this, on the client side, consists of functions in JavaScript for each of the formatting options in the formatting toolbar. This is possible with AJAX support, which allows the Web page to avoid doing a full postback and instead calling the JavaScript functions that handle the client-side updating. AJAX allows the component to refresh without refreshing the entire page. You can add AJAX support to the FpSpread component by setting the properties described here.

The EnableAjaxCall property of the FpSpread component affects several aspects of the operation of the spreadsheet that makes it more responsive. Built-in functions are enabled that allow for client-side operations such as expanding and collapsing child sheets in a hierarchical display, sorting columns, inserting rows, searching, and filtering. There are also ones for paging, tabbing, and other navigational aids in Spread. These are the most common uses for AJAX in Spread. By using AJAX for expanding a hierarchical display, for example, only the child sheet is needed and retrieved from the server; a full postback of the entire hierarchy is not needed. You do not have to have this property set to True to programmatically call back to Spread through AJAX, but it does enable some of the built-in functionality of Spread.

The ClientAutoCalculation property of the FpSpread component affects how calculations are performed. When this property is true, after a cell value is changed, an AJAX call is made to the FpSpread component. Then the component calculates the formulas and sends the values to the client side. The component then updates the values at the client side. This can save time if the user is only changing a value in a cell or a few cells and only a limited number of formulas need to be recalculated. With this property, the data model is updated and only those cells that are changed as a result are updated on the client. Your AJAX application can speed the operation of handling data and formulas. Here only individual cells are recalculated locally using the client-side JavaScript functions. Only the cells that need to be updated are sent back to the server.

Keeping Expectations Realistic

FarPoint Spread for Web Forms has an object-oriented design and underlying models to facilitate speedy, flexible, and scalable development. But AJAX will not solve all types of problems with performance issues on the client side. For example, applications with hundreds of client-side calculations may not save an appreciable amount of time with AJAX since the calculations in all these cells would still require recalculation when the data changes. With so many calculations, the client side would get bogged down and this would be better handled on the server where calculations can be performed faster with more processor bandwidth.

Also, you would have to handle anything outside of the spreadsheet on the form separately. For example, if you had a message box on the form but outside of Spread that required updating when the spreadsheet changed, client-side code would have to be written to handle that and AJAX would not help in that case. Remember also that if an AJAX callback is made, the Control OnLoad method is not called, as it would with a normal full postback. If you need it to fire, then you would need to make code that calls it and put that code in the onCallBackStart or onCallBackStopped event so that it can be run.

With Spread for Web Forms and AJAX, you can improve a data-intensive application. Once you have the right tools, you will be able to develop applications that may surprise even you.

Finding More Information

FarPoint Spread for Web Forms supports Microsoft Visual Studio .NET 2005. Spread is also available as a Windows Forms component and as a COM control. All versions are runtime royalty free. For more information, see our Web site.

You can easily download a free trial evaluation from the FarPoint website and see for yourself how easy it is to develop an application with spreadsheet capabilities.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Writer FarPoint Technologies, Inc.
United States United States
Bill Albing creates technical documentation with as much automation and content management as possible and is a proponent of XML and structured authoring. With over 15 years experience, he is presently employed at FarPoint Technologies where he creates user-centered and API reference documentation for software products.

Comments and Discussions

 
GeneralFarPoint is not free Pin
winchnet200513-Dec-09 21:38
winchnet200513-Dec-09 21:38 
GeneralAsp.net components Pin
POOR MAN6-Jul-07 2:46
POOR MAN6-Jul-07 2:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.