Creating AJAX-enabled Mash-ups with C1UpdateSplitter

This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

• Download evaluation version of ComponentOne Studio Enterprise

Introduction

This article describes a sample "mash-up" application that combines data from three different Web services and displays the results using a variety of ComponentOne ASP.NET controls, including C1UpdateSplitter, which extends the functionality of the "Atlas" UpdatePanel by adding dual content panels separated by a resizable splitter bar.

• Download evaluation version of ComponentOne Studio Enterprise

Terminology

Asynchronous JavaScript and XML (AJAX) is a development technique for creating rich, interactive Web applications that feel more like desktop applications, where users are accustomed to immediate responses. In a conventional Web application, user input is sent to the server, which then acts upon the data and responds by sending back an updated Web page in its entirety, a process known as a postback. In an AJAX-enabled application, small amounts of data are exchanged with the server behind the scenes, so that only the affected portions of the page need to be refreshed. To the user, the page seems faster and more responsive.

Microsoft ASP.NET AJAX (formerly code-named "Atlas") is an extension of ASP.NET 2.0 that provides a framework for creating efficient, highly-interactive Web applications that work across the most popular browsers. In particular, the UpdatePanel server control identifies a page region as updatable using partial-page rendering. For more information, including the latest downloads, visit the Microsoft ASP.NET AJAX site.

The term "mash-up" is used to describe Web applications that combine content from multiple sources such as RSS feeds, Web services, or other public interfaces. The sample application depicted in the following illustration uses three distinct Web services, each of which returns different information based on a zip code:

• City and state
• Weather forecasts
• Movie theaters and show times

To the end user, all of the data appears to come from a single source, even though there are three separate data sources "mashed-up" into one application.

About ComponentOne Studio Enterprise

ComponentOne Studio Enterprise is a comprehensive suite of components for developing Windows, Web, and mobile applications. For ASP.NET development, Studio Enterprise includes dozens of controls including a grid, 2D and 3D charts, a report designer/viewer, user interface and input elements, and components for generating popular file formats such as Adobe PDF, Microsoft Excel, and ZIP compression.

The 2006 v2 release of Studio Enterprise introduced support for AJAX in conventional ASP.NET 2.0 (that is, without the "Atlas" extensions). For example, the C1WebGrid control added a CallbackOptions property for specifying which operations should use the AJAX mechanism. For details about the AJAX implementation in specific components, please see this article.

The 2006 v3 release of Studio Enterprise introduced compatibility for the "Atlas" extensions. This means that any ComponentOne ASP.NET component can safely reside within an "Atlas" UpdatePanel and participate in partial-page rendering without any special coding or property settings.

This release also introduced a new product, ComponentOne WebSplitter for ASP.NET, that implements two container controls with resizable panels, similar to the Windows Forms SplitContainer control:

• C1WebSplitter, for conventional ASP.NET 2.0
• C1UpdateSplitter, for ASP.NET AJAX ("Atlas")

C1WebSplitter and C1UpdateSplitter are functionally equivalent. The only difference is that the C1UpdateSplitter control creates and manages an "Atlas" UpdatePanel behind the scenes.

Running the Sample Application

To view the mash-up sample in action, click here.

Enter a zip code into the text box, then click the green circle with the arrow. You should see the following changes:

• The label below the text box now displays the corresponding city and state.
• The Weather box displays today's forecast.
• The topmost grid displays a list of nearby movie theaters.

Now, try interacting with the form as follows:

• Select the Weekly Forecast radio button. Notice that additional weather data and a vertical scroll bar appear, but the grids do not flicker.
• Select a row in the Theater grid. Notice that the other rows do not repaint. The Movie grid is updated based on the selected row.
• Click the dotted image in the vertical splitter bar to collapse the left panel. Click it again to restore the left panel.
• Click the dotted image in the horizontal splitter bar to collapse the top panel. Click it again to restore the top panel.
• Grab either splitter bar outside of its dotted image (you should see a double-arrow cursor instead of a finger), then drag it to a different position. The panels resize accordingly, and their scroll bars are shown or removed as needed to accommodate the inner contents.

Designing the Form

The main visual element of the mash-up application is a C1UpdateSplitter control with vertical orientation. The left panel contains a C1WebTopicBar control, which provides collapsible groups that act as containers for arbitrary content. The right panel contains another C1UpdateSplitter control, this time with horizontal orientation. The top and bottom panels of this inner splitter each contain a C1WebGrid control. The two grids form a master-detail relationship between theaters and movies. The following figure depicts the hierarchy of controls on the form:

The form also contains three non-visual components: a ScriptManager with its PartialRendering property set to True, an ObjectDataSource for binding the master grid to the list of movie theaters, and an UpdateProgress component for displaying animated feedback during partial-page rendering, as shown here.

At design time, C1UpdateSplitter allows you to drag arbitrary components onto either one of its panels. The following figure shows a splitter in its default vertical orientation, with a C1WebTopicBar component added to its left panel.

You can also nest C1UpdateSplitter controls on the design surface. In the next figure, a second C1UpdateSplitter has been added to the right panel of the first splitter. The orientation of the inner splitter was changed to horizontal, and a C1WebGrid component was added to each inner panel.

These five components form the overall structure of the mash-up page. For the outermost (vertical) splitter, C1UpdateSplitter1, the following properties were set:

The SplitterDistance value denotes the initial position of the splitter bar, in pixels. In addition, the following sub-object properties were set for C1UpdateSplitter1:

Note that scroll bars are disabled for the second panel, since scrolling will be handled by the nested horizontal splitter. The CssClass properties reference named styles defined in an inline style sheet in Default.aspx. These styles are used to control the background colors and borders for the splitter bars.

For the innermost (horizontal) splitter, C1UpdateSplitter2, the following properties were set:

Note that the dimensions are specified as 100% instead of absolute units. In addition, the following sub-object properties were set for C1UpdateSplitter2:

Conclusion

When using C1UpdateSplitter, you do not need to write additional code to update the constituent controls within the splitter panels. The mash-up sample handles server-side events for button clicks and grid row selections as if it were a conventional ASP.NET application without AJAX extensions. However, with AJAX, the application is far more fluid and responsive, especially with the added value of the C1UpdateSplitter control.

If you would like to learn more about how the mash-up sample consumes Web services, please see this article, which also contains a link for downloading the source code.