南卓铜([email protected])

Cuyahoga is a powerful and well designed Web-based Content Management System. In current version, however, there is not yet Ajax supported. This brief article will show you how we can implement an Ajax based delayed content loading for its module.

The project I am doing will achieve Asian water news from an external website, Global Water News. To do this, I developed a set of classes to download content from external page and then parse them. However, in a synchronous way, the content downloading and parsing process is rather slow, consequently affecting the display of our homepage.  A delayed loading of this part of content will be ideal for circumventing this problem. 

Figure below shows the schema we developed for Cuyahoga framework.

See www.asian-gwadi.org homepage for online demonstration.

1. Enable Ajax support

Download latest ASP.net Ajax toolkit for framework 2.0 and install it. Add reference to System.Web.Extensions in Web project.

Open a brand new Ajax based web project. This will generate necessary configuration for Ajax support in a Web project.  Merge web.config created in this new project to Cuyahoga’s root web.config.

2. Add a Cuyahoga module for your purpose

AsianWaterNewsModule is just derived on ModuleBase and simple leave everything blank.

AsianWaterNewsControl.ascx is the user control working together with the module. It’s based on BaseModuleControl. It simply defines the container where we will populate data later.

AsianWaterNewsControl_Under.ascx is the underlying user control who download data from external web page, parse them and then fill up a repeater control.

AsianWaterNewsFristPage.cs, WaterItem.cs, and WaterNewsPageContent.cs are business logic codes to help AsianWaterNewsContol_Under control to realize its functionality.

AsianWaterNewsService.asmx define a web service, which renders the underlying user control, AsianWaterNewsControl_Under.ascx, to HTML codes. The output of this web services is expected to populate the placeholder contained in Cuyahoga user control, i.e., AsianWaterNewsControl.ascx.

Default.js and jquery-1.2.2.min.js are essential callback javascripts to be called in client side.

Install directory contains sql scripts for database structure.

3. Procedure

When a module is loaded by Cuyahoga framework, user controls derived upon BaseModuleControl (here is AsianWaterNewsControl.ascx ) will be asked to display themselves. In AsianWaterNewsControl.ascx , Ajax script manager was instantiated to wrap webservices as well as to register necessary javascripts. Javascripts were then downloaded to client together with other HTML. The page were displayed.  At the same time, callback javascripts were activated to call web service (here AsianWaterNewsService.asmx), which returns HTML representation of underlying user control (here, AsianWaterNewsControl_Under.ascx) actually retrieving data from external web pages. Then a div placeholder in  AsianWaterNewsControl.ascx will be populated with data retrieved.

See my previous post to get understand how to realize delayed content loading. For English original article, see here.

Download source codes of the AsianWaterNewsModule project.

Note, CSS and images should be defined in the template currently applied to your site. I did not include those stuff in the source code package.

See http://www.asian-gwadi.org/ for the operational demo.