Gaia Ajax 4.0 is in the nightly!

by Stian Solberg 18. June 2013 11:03

Gaia Ajax 4.0We have been spending a lot of time the last months wrapping up what will be the upcoming 4.0-release.

It is easy to grab the latest bits:

To get a summary of what has changed, take a look at front page of nightly samples.

We'd love to get your feedback, please use the forum.

Kind regards
The Gaiaware team



Gaiaware is a Microsoft Silver Partner

by Stian Solberg 14. August 2012 12:05

We're happy to announce that Microsoft have granted us the status as a Silver Independent Software Vendor (ISV). For us, this is a nice reflection of our ongoing efforts of building a high quality software tool like Gaia Ajax. The proven result for our customers is increased productivity and quality when building complex web applications on the Microsoft stack. The partnership is based on positive feedback from customers with successful web applications developed using Gaia Ajax.

Using Flickr API with ASP.NET, Gaia Ajax and JSON

by Kariem 4. December 2010 00:39

As we go through this simple tutorial you will be introduced to some of the features of the Gaia Ajax Framework. This tutorial is ideal for those who are new to Gaia. We will build a simple app that searches for images with a specific tag on Flickr, reads and parses the JSON response and loads the images on the page.

Search Flickr

Setting The Stage

You can start with a regular ASP.NET Website (or web project) and add references to the Gaia dlls. We just announced a public beta release of Gaia Ajax 3.7, you can read about it and download the dlls and smaples from there. Then register the Gaia Controls either at the page level:

   1:  <%@ Register 
   2:      Assembly="Gaia.WebWidgets" 
   3:      Namespace="Gaia.WebWidgets"
   4:      TagPrefix="gaia" %>
   6:  <%@ Register 
   7:      Assembly="Gaia.WebWidgets.Extensions"
   8:      Namespace="Gaia.WebWidgets.Extensions" 
   9:      TagPrefix="gaia" %>


or globally for your entire app in web.config:

   1:  <system.web>
   2:   <pages>
   3:     <controls>
   4:       <add assembly="Gaia.WebWidgets" 
   5:            namespace="Gaia.WebWidgets" 
   6:            tagPrefix="gaia" />
   7:       <add assembly="Gaia.WebWidgets.Extensions"     
   8:            namespace="Gaia.WebWidgets.Extensions" 
   9:            tagPrefix="gaia" />
  10:     </controls>
  11:   </pages>
  12:  </system.web>

Gaia Controls

After that we will add a Gaia TextBox, Gaia Button and a Gaia Panel to the page: 

   1:  <gaia:TextBox runat="server" ID="searchFlickrTextBox" />
   2:  <gaia:Button 
   3:        runat="server" 
   4:        ID="searchFlickrButton" 
   5:        Text="Search Flickr" 
   6:        OnClick="searchFlickrButton_Click" />
   7:  <gaia:Panel 
   8:        runat="server" 
   9:        ID="flickrPhotosPanel" 
  10:        CssClass="flickr-images-container" /> 


These Gaia controls extend their ASP.NET counterparts to give you Ajax functionality out-of-the-box. We will use the Gaia Panel as a container for the images we will load on the page. By handling the Click event of the Gaia Button we can start to write the functionality.

We use the Property SearchTag to store the search text entered by the user in the ViewState. Then we clear the Controls collection of the container Panel and call LoadFlickrImages:

   1:  protected void searchFlickrButton_Click(object sender, EventArgs e)
   2:  {
   3:      SearchTag = searchFlickrTextBox.Text;
   4:      flickrPhotosPanel.Controls.Clear();
   5:      LoadFlickrImages();
   6:  }


We need to store some information in the ViewState in order to recreate the images on subsequent postbacks. Since we will add the images dynamically to the page, it is our responsibility (not ASP.NET's) to keep them "alive" between postbacks. We need to persist the search tag and the list of images and in Page_Load we can recreate the Image controls on each postback by calling LoadFlickrImages:


   1:  private List<FlickrImage> Images
   2:  {
   3:      get
   4:      {
   5:          if (ViewState["images"] == null)
   6:              ViewState["images"] = new List<FlickrImage>();
   7:          return (List<FlickrImage>) ViewState["images"];
   8:      }
   9:  }
  11:  private string SearchTag
  12:  {
  13:      get { return (string)(ViewState["searchtag"] ?? string.Empty); }
  14:      set { ViewState["searchtag"] = value; }
  15:  }
  17:  protected void Page_Load(object sender, EventArgs e)
  18:  {
  19:      if (IsPostBack && !string.IsNullOrEmpty(SearchTag) && Images.Count > 0)
  20:          LoadFlickrImages();
  21:  }


The LoadFlickrImages method is where the magic happens, so let's dive into it.


Communicating With Flickr

We start by calling another method, GetResponseJsonString, to ummm, get the response JSON string Smile.

   1:  var jsonString = GetResponseJsonString();


So let's look into that method first. We start by creating a Post HttpWebRequest object to communicate with the Flickr service:

   1:  var webRequest = (HttpWebRequest)WebRequest
   2:      .Create(string.Format(FlickrServiceUrl, SearchTag));
   3:     webRequest.Method = "POST";
   4:     webRequest.KeepAlive = false;


The service URL looks like this:


For a provided tag this would return JSON similar to the following:

   1:  ({
   2:   "title": "...",
   3:   "link": "...",
   4:   ...
   5:   "items": [
   6:      {
   7:         "title": "...",
   8:         "link": "...",
   9:         "media": {"m":"..."},
  10:         ... 
  11:      },
  12:      {
  13:         "title": "...",
  14:         "link": "...",
  15:         "media": {"m":"..."},
  16:         ... 
  17:      },
  18:      ...
  19:   ]
  20:  })


Then we will read the response stream into a string:

   1:  string jsonString;
   2:  using (var flickrResponse = webRequest.GetResponse() as HttpWebResponse)
   3:  {
   4:       if (flickrResponse == null)
   5:           return string.Empty;
   6:       // Get the response stream to read the response
   7:       using (var responseStream = flickrResponse.GetResponseStream())
   8:       {
   9:           if (responseStream == null)
  10:               return string.Empty;
  11:           // Read the response
  12:           using (var reader = new StreamReader(responseStream))
  13:           {
  14:               jsonString = reader.ReadToEnd();
  15:           }
  16:       }
  17:  }


Notice that the returned JSON above is wrapped in parentheses, so we need to remove those and return the JSON string back to the caller, LoadFlickrImages:

   1:  jsonString = jsonString.Remove(jsonString.IndexOf("("), 1);
   2:  return jsonString.Remove(jsonString.LastIndexOf(")"), 1);


Back in LoadFlickrImages we parse the returned JSON string using JSON.NET:

   1:  var responseJson = JObject.Parse(jsonString);


Then using linq to JSON, also part of JSON.NET, we can extract the useful information we want about each Image. For example here we extract the Title, the URL of the image's page on Flickr (Link) and the URL of the actual image thumbnail (Media).


   1:  var images = from item in responseJson["items"].Children()
   2:               select new FlickrImage 
   3:               {
   4:                   Title = (string)item["title"],
   5:                   Link = (string)item["link"],
   6:                   Media = (string)item["media"]["m"]
   7:               };


Then we need to update the generic list of images (List<FlickrImage>) that we keep in the ViewState:

   1:  Images.Clear();
   2:  Images.AddRange(images);


After that we can iterate over it and create a Gaia Image control for each one:

   1:  foreach (var image in Images)
   2:  {
   3:      var imageControl = new Image
   4:      {
   5:          ImageUrl = image.Media,
   6:          AlternateText = image.Title,
   7:          CssClass = "flickr-image"
   8:      };
   9:      imageControl.Aspects.Add(new AspectHoverable());
  10:      imageControl.Effects.Add(
  11:          AspectHoverable.EffectEventMouseOver, 
  12:          new EffectPulsate(1));
  14:      flickrPhotosPanel.Controls.Add(imageControl);
  15:  }


Let's have a closer look at this code. Here we create the Gaia Image control and set its CssClass property. This CSS class "flickr-image" sets the margin style property on the images so that they would have a nice space between them when they are loaded on the page:

   1:  var imageControl = new Image
   2:  {
   3:      ImageUrl = image.Media,
   4:      AlternateText = image.Title,
   5:      CssClass = "flickr-image"
   6:  };


Then, we add a little effect that fires when the user hovers over the image:

   1:  imageControl.Aspects.Add(new AspectHoverable());
   2:  imageControl.Effects.Add(
   3:      AspectHoverable.EffectEventMouseOver, 
   4:      new EffectPulsate(1));

Aspects and Effects

This introduces us to two interesting features of Gaia, Aspects and Effects. Aspects are little pieces of functionality that you can add to Gaia controls. For example, if you need to make a Label clickable you can add an AspectClickable to its Aspects collection and this would give you a server-side event that you can handle when the Label is clicked. Effects are simply animations that you can apply on a Gaia control. 


   1:  imageControl.Aspects.Add(new AspectHoverable());


Here we are adding an AspectHoverable to the Image control. Doing this we have the opportunity to handle server-side events that fire when the user hovers over an image or away from it. In other words this way you can handle client-side events like OnMouseOver and OnMouseOut on the server using regular ASP.NET server-side events. This, of course, happens without needing to worry about client-side details or to write any Javascript. 


However, that is not the purpose behind adding AspectHoverable to the Image control. Looking at the other line we can see why:

   1:  imageControl.Effects.Add(
   2:      AspectHoverable.EffectEventMouseOver, 
   3:      new EffectPulsate(1));


We are adding an EffectPulsate to the Effects collection of the Image control. However, here we are also using what we call an effect event. These allow you to combine the use of both Aspects and Effects to have the Effects (which run on the client-side) fire in response to a client-side event like OnMouseOver in our case here. So unless you have explicitly chosen to handle server-side events for AspectHoverable, this will be purely client-side. And the best part is that you are able to achieve this without writing any Javascript.



Then we add the Image control to the Gaia Panel that is used as a container for the images:

   1:  flickrPhotosPanel.Controls.Add(imageControl);


This brings us to one of the most intelligent features of Gaia, DRIMR. DRIMR almost eliminates the need for partial rendering. Usually here we would have needed to re-render the Panel and it's child controls (the images) to the client, since we have changed the Controls collection of the Panel. However, Gaia, with DRIMR, is smart enough to know that the client-side hierarchy almost doesn't change, so it will get re-used instead of being destroyed and rebuilt. You will specially notice this on the second time (and subsequent times) you use the app. You can almost see that the images are changing without the client-side hierarchy being destroyed and rebuilt. You don't need to worry about learning anything new or doing anything yourself to get this amazing benefit. If you are using Gaia, DRIMR is doing what it's supposed to behind the scenes.



As you can see using Gaia Ajax you can basically rely on the knowledge you already have about ASP.NET to automatically get Ajax functionality and much more. You are also able to tap into client-side events and handle them using regular server-side events and you can even have pure client-side Effects. All that can be achieved without writing any Javascript or worrying about any client-side details. 


by Jan Blomquist 10. February 2010 09:54


MVC (Model View Controller) is an architectural pattern and in many ways the preferred approach for layering your application. ASP.NET MVC is Microsoft's solution to a set of common challenges that face web developers today. Some of these problems are: -

ASP.NET MVC "forces" the developer to model their application according to their MVC architecture and brings greater control and granularity over markup. Because of this, ASP.NET Ajax (or jQuery for that matter) becomes easier to use since you no longer need to deal with for example autogenerated IDs (ie: ctl101_panelContainer_GridView1) which can be hard to use in client-side ajax applications.

Throwing the baby out with the bath water

Another alleged "benefit" of ASP.NET MVC is that the WebForms model is thrown out, so concepts like ViewState, Postbacks and fully templated event driven server controls doesn't exist anymore. This can be a good thing for an html/css/javascript ninja who wants the pedal to the metal and don't like too many abstractions, however I would argue that MVC on top of the WebForms model is far more superior and in this blog we are going to outline the structure of such an application.

An example of a successful ASP.NET MVC implementation today is StackOverflow -one of the most frequently visited websites for professional developers online today. The development of this project is a small group of developers (3?) who work day to day on the project and have deep intrinsic knowledge of it's inner workings. 

ASP.NET MVC might be the right choice for you depending on your requirements, but creating ANY ASP.NET application today without utilizing some form of MVC seems outrageous IMHO. I would put forth the following postulate derived from this claim:

A well designed ASP.NET WebForms application is an MVC application

Let's take a closer look at how you would assemble such an MVC application using the WebForms model. Don't forget the following regarding design patterns: "A a design pattern is not a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations" - Wikipedia


We've created a small application that utilizes the MVC pattern on top of the WebForms model today. Currently it's published at one of our build servers.

When you open the sample you can click the (Click here to get the details]) button to expand various code listings and some code explainations. Let's walk through the application structure together. It's a simple list of Tasks that can be filtered by date and contact person. Since the whole idea is to separate the business code/logic from each UI/View I've created a few models and multiple views. The model is basically just a contract (interface) which defines the operations which the controller needs in order to function. Each View must implement the contract so the controller can do it's work. You have full freedom to architect your models as you find suitable and I would recommend you to favor composition over inheritance .


Here's the code for the IActivityModel

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebApps.MVC.Models
   2:  {
   3:      /// <summary>
   4:      /// This is the model that "glues" together the filter and results and is the
   5:      /// main input to the Controller which then works against this model
   6:      /// </summary>
   7:      public interface IActivityModel
   8:      {
   9:          IActivityFilter Filter { get;}
  10:          IActivityList ViewResults { get;} 
  11:      }
  12:  }

 In order to reuse the Filter I've created it as a separate model. Then I went ahead and created a model which will be used to viewed the results based on the filter. This is the IActivityList model which can be seen here:

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebApps.MVC.Models
   2:  {
   3:      using System.Collections.Generic;
   4:      using Utilities;
   6:      /// <summary>
   7:      /// Model that allows binding of results to a View
   8:      /// </summary>
   9:      public interface IActivityList
  10:      {
  11:          void View(IEnumerable<CalendarItem> data);
  12:      }
  13:  }

As you can see, the only operation currently needed is the View method which takes an IEnumerable in order to bind the data. By using such a low common denominator, we can bind to almost anything for presentation, even a custom scheduler component if one were to require such functionality.


The sample has defined 3 views (Repeater, GridView and Listbox) + 1 Mock View used in UnitTests. The codebehind file for the GridView View can be seen here:

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebApps.MVC.Views
   2:  {
   3:      using System.Web.UI;
   4:      using System.Collections.Generic;
   5:      using Models;
   6:      using Utilities;
   8:      public partial class ActivityListGridView : UserControl, IActivityList
   9:      {
  10:          void IActivityList.View(IEnumerable<CalendarItem> data)
  11:          {
  12:              zGrid.DataSource = data;
  13:              zGrid.DataBind();
  14:          }
  16:      }
  17:  }

In this case we created a UserControl, but it could also have been a server control or an arbitrary class also. It just doesn't matter when modelling after the MVC pattern.

Some have argued that you loose control over markup with the WebForms model and that is true when using powerful components like (GridView, Scheduler, Window, TabControl, etc), but it doesn't have to. Here's a code excerpt from the RepeaterView and as you can see this will give you full control over rendered markup:

Markup (ASPX/.aspx)

   1:  <%@ Control 
   2:      Language="C#" 
   3:      AutoEventWireup="true" 
   4:      CodeBehind="ActivityListRepeater.ascx.cs" 
   5:      Inherits="Gaia.WebWidgets.Samples.Combinations.WebApps.MVC.Views.ActivityListRepeater" %>
   7:  <gaia:Panel ID="w" runat="server">
   8:      <ul style="border: 1px solid #999; margin: 5px 5px 5px 0px;">
   9:          <asp:Repeater ID="zView" runat="server">
  10:              <ItemTemplate>           
  11:                     <gaia:Label ID="f" runat="server"><li></gaia:Label>
  12:                     <gaia:Label ID="dt" runat="server" Text='<%# Eval("ActivityDate", "{0:ddd dd. MMM}")%>' />
  13:                     <gaia:Label ID="p" Font-Bold="true" runat="server" Text=' <%# Eval("ContactPerson")%>' />
  14:                     <gaia:Label ID="t" ForeColor="red" runat="server" Text='<%# Eval("ActivityName")%>' />
  15:                     <gaia:Label ID="l" runat="server" /></li>
  16:              </ItemTemplate>
  17:          </asp:Repeater>
  18:      </ul>
  19:  </gaia:Panel>

And really? Are abstractions like Window, Scheduler, Grid bad? I would'n want to develop without my reusable server controls!

The C in MVC - Controllers

Ok - we have defined the model and seen the code for some views. Let's examine the Controller and see how that works.

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebApps.MVC.Controllers
   2:  {
   3:      using System;
   4:      using System.Collections.Generic;
   5:      using Utilities;
   6:      using Data;
   7:      using Models;
   9:      /// <summary>
  10:      /// This is the Controller in the MVC pattern and it acts as the "hub" and is responsible for
  11:      /// working on the models and implementing business rules, DAL communication, etc
  12:      /// </summary>
  13:      public class ActivityController : ControllerBase
  14:      {
  15:          private readonly IActivityModel _activityModel;
  17:          public ActivityController(IActivityModel activityModel)
  18:          {
  19:              _activityModel = activityModel;
  20:          }
  22:          public override void Initialize()
  23:          {
  24:              _activityModel.Filter.BindPersons(ActivityDataLayer.GetContacts());
  25:              _activityModel.Filter.When = DateTime.Now.Date;
  27:              ViewChanged();
  28:          }
  30:          IEnumerable<CalendarItem> GetItems()
  31:          {
  32:              return ActivityDataLayer.GetByDateAndPerson(_activityModel.Filter.When, _activityModel.Filter.SelectedPerson);
  33:          }
  35:          public override void ViewChanged()
  36:          {
  37:              _activityModel.ViewResults.View(GetItems());
  38:          }
  40:      }
  41:  }

Another model From the code you can see that we take a model as input parameter to the constructor. This model will be the View itself. In the initialize method we set default values for the DateTime filter and populate the list of available ContactPersons from which the UI can select a person. The IActivityFilter also denotes the SelectedPerson so we should have sufficient information to perform a Filter operation and retrieve data.

Notice the call to the View method on the model where the data is passed in. This takes place in the ViewChanged() operation which can be invoked from the UI too. For example in the SelectedIndexChanged event of the dropdownlist. Ok, so now you have seen the three layers in the MVC architecture. The benefits we have seen so far is

  • Disconnected UI from business logic.
  • UI/Client could easily have been something else (Mobile, WinForms, etc)
  • Removed code from the UI where it might introduce "spaghetti code"
  • Stricter adherence to contract lessens error likeliness

Unit Testing

Ok, but how would you go about and test this stuff? We could have tested this in multiple ways, but the easiest is probably to create mock objects that represent the Views and then pass these MockModels as input parameters to the Controller. Here's a few "dummy" examples of some unit tests. I've just faked the unit test framework and you can swap this out with your favorite unit testing framework. 

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebApps.MVC.Tests
   2:  {
   3:      using System;
   4:      using Controllers;
   5:      using Data;
   7:      /// <summary>
   8:      /// This is just a "dummy" test-suite to demonstrate that it's easy to write
   9:      /// TDD - Test Driven Development against an MVC application
  10:      /// </summary>
  11:      public class ActivityTests
  12:      {
  13:          public void Test_ActivityController_TestInitialize()
  14:          {
  15:              ActivityModelMock mock = new ActivityModelMock();
  16:              new ActivityController(mock).Initialize();
  18:              bool dateInitialized = mock.Filter.When == DateTime.Now.Date;
  19:              DummyAssert.IsTrue(dateInitialized);
  20:          }
  22:          public void Test_ActivityController_TestFilter()
  23:          {
  24:              ActivityModelMock mock = new ActivityModelMock();
  25:              new ActivityController(mock).Initialize();
  27:              ActivityListMock view = mock.ViewResults as ActivityListMock;
  29:              bool sameData = ActivityDataLayer.GetByDateAndPerson(
  30:                  mock.Filter.When, mock.Filter.SelectedPerson).Count== view.CalendarItems.Count;
  31:              DummyAssert.IsTrue(sameData, "Different data based on same filter");
  32:          }
  34:          public void Test_ActivityController_TestMockObject()
  35:          {
  36:              ActivityModelMock mock = new ActivityModelMock();
  37:              new ActivityController(mock).Initialize();
  39:              ActivityListMock view = mock.ViewResults as ActivityListMock;
  40:              DummyAssert.IsTrue(view != null, "Unable to get test implementation");
  41:          }
  43:      }
  44:  }

Suddenly we've created a robust architecture based on the principles of MVC. Also we've taken advantage of all the good things that come for free in Gaia Ajax and we've built on top of the powerful WebForms model on ASP.NET. And we've made our code highly testable and reusable.

Routing / Dynamic Loading

What more could there be? Well, since you're asking we could have implemented dynamic loading of views (routing?) based on some scheme (url, page, configuration, etc) and in fact this sample automatically loads the available Views dynamically and populates the DropDownList with all the Views that implement the model that we are looking for. This functionality is implemented on the page level and allows you to switch out UI/View on-the-fly. Just click here and  try it out for yourself.

Other ASP.NET MVC drawbacks

An author behind one of the ASP.NET MVC books (Jeff Putz) points out some of the ASP.NET MVC drawbacks on his blog

  1. It also lacks the kind of UX encapsulation that we get with Webforms. For example, I have a template based image gallery control that I've used time and time again. The markup that appears in each cell of the table can be anything I want, and I can tell it to leave a "hole" for a template containing an advertisement. All I do is drop it on a Webform and fill in the templates and it automagically works. This kind of reuse isn't in the strictest sense possible in MVC if you're adhering to the design pattern.
  2. The magic of having a simulated stateful form is also gone, with no postback mechanism. The entire event model is thrown out.
  3. Views feel a little like spaghetti code from old ASP (the scripting platform that used the tragic VBscript)
  4. And the biggest concern I have is that developers won't be thinking about security the way they should. It's already possible in Webforms (or any other platform) to put together an HTTP request with the right information to simulate a legitimate user action and do naughty things when the right preventative code is not in place, but it's even easier in MVC. A URL like "/cats/kill/42" is probably intended to execute cat.Lives-- and it's easy to guess. A lot more care has to be taken to validate data and enforce security.

At the moment I don't see any reason to abandon the WebForms model in favor of ASP.NET MVC, generally because we've had MVC for a long time already, but more specifically for the reasons outlined above and in particular because of simulated Windows Forms development experience brought by the WebForms model. I can respect that many developers don't see this from my point of view if they are using jquery/ ajax and similar client-side technologies. The MVC architecture on top of the WebForms model becomes truly aparent with the right tooling and proper abstractions -like Gaia Ajax. The same would go for related techologies like (Google Web Toolkit)


The following quote from Jeff Atwoods blog pretty much summarizes my feelings about the ASP.NET MVC stuff:

"As we work with ASP.NET MVC on Stack Overflow, I find myself violently thrust back into the bad old days of tag soup that I remember from my tenure as a classic ASP developer in the late 90's. If you're not careful bordering on manically fastidious in constructing your Views, you'll end up with a giant mish-mash of HTML, Javascript, and server-side code. Classic tag soup; difficult to read, difficult to maintain."

If you want to comment on the blog, please use our forums at

Async loading with Non-blocking UI in ASP.NET with Gaia Ajax

by Jan Blomquist 18. January 2010 14:40


We've just published a new sample that demonstrates how to create a web page that loads items as they become available and doesn't block the UI. That means you can fully use the Web Application while another thread is spinning on the server doing the hard work.

Click here to view the sample from our nightly published samples application:

Or you can pickup a nightly drop here:

The idea behind this is not new, but Gaia Ajax makes this so simple to implement and so fast thanks to the automatic diff/merge capabilities of the DRIMR technology which was introduced in Gaia Ajax 3.6. Click here to view a view about Gaia Ajax DRIMR
Sometimes Web Applications are dropped in favor of traditional Desktop applications because of performance requirements. It's not viable to create web applications that requires long time before responding. However, many functions still require lots of processsing before they can return data at all. The ideal way to solve this is the following

  1. Serve up the UI instantly.
  2. Allow the user to start the time consuming task
  3. Deliver the data for consumption in the UI as it becomes available -leaving the application operational. 

Creating the UI for this kind of application is hard enough as it requires you to dig into multi-threading and it's many pitfalls. Creating the UI as a Web Application becomes almost unthinkable as it adds yet another layer of complexity that makes the project run the risk of blowing up. That being said, any sane person reverts to the good old locally installed application with it's drawbacks to solve the problem.

Does it really have to be like that? I will argue in this blog that it's just as easy -or easier? to create a scalable, robust, multi-threaded web application in ASP.NET that doesn't block the UI -than to revert to writing desktop applications.

The reason is partially because ASP.NET is multi-threaded in itself. Each web request is tied to a Worker thread that lives throughout the duration of that page lifecycle. The process of running the lifecycle and generating the control tree is very in-expensive. In Gaia Ajax, the lifecycle running time is even chopped an additional 30%. Almost always the most expensive operation is your I/O threads. These threads often deal with files, databases, webservices and anything else which is not (in-process). I/O is so dramatically more expensive (realtive to worker threads) that Microsoft introduced the Async pattern in ASP.NET 2.0

"The problem with the ASYNC pattern is still that no WebPage is being delivered before all I/O threads are finished with their work". I argue that another option is to serve the WebPage with few or no I/O threads at all. The delivery time of the web application becomes instant.

Does that make any sense?
These I/O calls where there for a reason wheren't they? -Yes, and I am not saying that they are not going to be executed. I am simply saying that you can deliver the results over ajax by using a diff/merge strategy. In Gaia Ajax 3.6 you get automatic diff/merge for free! :-) Also the A in Ajax stands for asynchronous so they don't block the UI either.

But isn't multithreading Evil?
Yes it's evil and if you can avoid it -so you should. However, in .NET we've gotten lots of tools, code, patterns and various ways of dealing with the issue of concurrency. Modern CPU's are not scaling in terms of higher clock speed, but more cores (Link to Intel 48 cores). The LINQ to Parallells project  is now going shipped as part of .NET Framework 4.0. Instead of being afraid of the beast, I think it's time we deal with it and create the next generation of modern web applications utilizing all these cores available to us.

Ok, so how does this relate to Gaia Ajax?
Gaia makes this paradigm easy to implement with no javascript, no bloat and only the state changes are merged down to the client. Also Gaia implements an ajax request queue which only dispatches 1 ajax request at a time allowing for no concurrency issues there. You still have to deal with concurrency, race conditions, etc in your web application, but like I said that's a lot easier with all the stuff that's available to us there.

The following code snippets outline how this simple example was written. It contains 1 aspx file with a button, datagrid and timer and in the codebehind we toggle enabled and visibility properties and kick off the work which goes on in the BackgroundWorkerTask.cs file. The sample was written to be minimalistic and simple and serves more as a proof-of-concept than production ready code. The code is available in the sample too, but I'll paste it in here for your convenience.

Markup (ASPX/.aspx)

   2:  <gaia:Button 
   3:      ID="zButton" 
   4:      runat="server" 
   5:      Text="Start Async Operation" 
   6:      OnClick="zButton_Click" />
   8:  <gaia:Image 
   9:      ID="zImageLoader" 
  10:      ImageUrl="ajax-loader.gif" 
  11:      runat="server" 
  12:      Visible="false" />
  14:  <gaia:GridView 
  15:      runat="server" 
  16:      ID="zGrid" 
  17:      Width="100%"
  18:      AutoGenerateColumns="false"
  19:      CssClass="async-grid">
  20:          <RowStyle CssClass="itemEven" />
  21:          <AlternatingRowStyle CssClass="itemOdd" />
  22:          <Columns>
  23:              <gaia:BoundField 
  24:                  HeaderText="Time" 
  25:                  DataField="ActivityDate" 
  26:                  DataFormatString="{0:HH:mm}" />
  28:              <gaia:BoundField 
  29:                  HeaderText="Name" 
  30:                  ItemStyle-Width="50%"
  31:                  DataField="ActivityName" />
  33:              <gaia:BoundField 
  34:                  HeaderText="Contact" 
  35:                  ItemStyle-Width="25%"
  36:                  DataField="ContactPerson" />
  37:          Columns>
  38:  gaia:GridView>
  40:  <gaia:Timer 
  41:      ID="zTimer" 
  42:      runat="server" 
  43:      Milliseconds="1000"
  44:      OnTick="zTimer_Tick" 
  45:      Enabled="false" >
  46:  gaia:Timer>

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebUtilities.AsyncLoading
   2:  {
   3:      using System;
   4:      using UI;
   5:      using Utilities;
   6:      using WebWidgets.Effects;
   8:      public partial class Default : SamplePage
   9:      {
  10:          const string CollapsedText = "Click here for more details ...";
  11:          const string ExpandedText = "Click here to hide again";
  13:          protected void Page_Init(object sender, EventArgs e)
  14:          {
  15:              SetTimerPollingBasedOnNetworkLatency();
  16:              zViewResponse.Text = CollapsedText;
  17:          }
  19:          protected void Page_Load(object sender, EventArgs e)
  20:          {
  21:              if (!IsPostBack) BackgroundTask = null;
  22:          }
  24:          protected void zButton_Click(object sender, EventArgs e)
  25:          {
  26:              if (BackgroundTask.IsRunning) return;
  27:              BackgroundTask.Data.Clear(); 
  28:              BackgroundTask.RunTask();
  29:              ActivateUiTaskRunning();
  30:              DataBindGridViewToProcessedItems();
  31:          }
  33:          protected void zTimer_Tick(object sender, EventArgs e)
  34:          {
  35:              DataBindGridViewToProcessedItems();
  36:              if (!BackgroundTask.IsRunning) DeactiveUiTaskRunning();
  37:          }
  39:          private void DataBindGridViewToProcessedItems()
  40:          {
  41:              zGrid.DataSource = BackgroundTask.Data;
  42:              zGrid.DataBind();
  43:          }
  45:          private void SetTimerPollingBasedOnNetworkLatency()
  46:          {
  47:              zTimer.Milliseconds = WebUtility.IsLocalhost ? 500 : 1000;
  48:          }
  50:          private void DeactiveUiTaskRunning()
  51:          {
  52:              zImageLoader.Visible = false;
  53:              zTimer.Enabled = false;
  54:              zButton.Enabled = true;
  55:          }
  57:          private void ActivateUiTaskRunning()
  58:          {
  59:              zTimer.Enabled = true;
  60:              zButton.Enabled = false;
  61:              zImageLoader.Visible = true;
  62:          }
  64:          private CustomBackgroundWorker BackgroundTask
  65:          {
  66:              get
  67:              {
  68:                  return Session["worker"] as CustomBackgroundWorker ??
  69:                      (Session["worker"] = new CustomBackgroundWorker()) 
  70:                      as CustomBackgroundWorker;
  71:              }
  72:              set { Session["worker"] = value; }
  73:          }
  75:          protected void zViewResponse_Click(object sender, EventArgs e)
  76:          {
  77:              /* some effects for show-off */
  79:              bool show = zViewResponse.Text == CollapsedText;
  80:              zViewResponse.Text = show ? ExpandedText : CollapsedText;
  82:              if (show)
  83:                  zCodeResponse.Effects.Add(
  84:                      new EffectParallel(
  85:                          new EffectMorph("width: 650px; height: 450px;", 0.5M),
  86:                              new EffectAppear(0.5M)));
  87:              else
  88:                  zCodeResponse.Effects.Add(
  89:                      new EffectParallel(
  90:                          new EffectMorph("width: 0px; height: 0px;", 0.5M),
  91:                              new EffectFade(0.5M)));
  92:          }
  93:      }
  94:  }

Codebehind (C#/.cs)

   1:  namespace Gaia.WebWidgets.Samples.Combinations.WebUtilities.AsyncLoading
   2:  {
   3:      using System;
   4:      using System.Collections.Generic;
   5:      using System.Threading;
   6:      using Utilities;
   8:      public class CustomBackgroundWorker
   9:      {
  10:          private bool _isRunning;
  11:          public bool IsRunning
  12:          {
  13:              get { return _isRunning; }
  14:          }
  16:          public void RunTask()
  17:          {
  18:              lock (this)
  19:              {
  20:                  if (_isRunning)
  21:                      throw new InvalidOperationException("The task is already running!");
  23:                  _isRunning = true;
  24:                  new Thread(DoWork).Start();
  25:              }
  26:          }
  28:          private ICollection _data;
  29:          public ICollection Data
  30:          {
  31:              get { return _data ?? (_data = new List()); }
  32:          }
  34:          void DoWork()
  35:          {
  36:              try
  37:              {
  38:                  for (int i = 0; i < 15; i++)
  39:                  {
  40:                      lock (Data)
  41:                          foreach (CalendarItem item in CalendarController.CreatItems(new Random().Next(1, 3)))
  42:                              Data.Add(item);
  44:                      Thread.Sleep(new Random().Next(300, 2000)); // Random Sleep to simulate variance
  45:                  }
  46:              }
  47:              catch  { /* Task failed (suppress exceptions in demo) */ }
  48:              finally { _isRunning = false; }
  49:          }
  50:      }
  51:  }

Though simple in nature -the async sample demonstrates a truly powerful concept which could give your web applications a boost you'd never thought possible. So give it a spin and if you like it, please drop us a message by email or use our forums :


Gaia Ajax 3.6 Final Release

by Jan Blomquist 24. November 2009 12:37


After some thousand hours of both eurekas and hard work, the "safe-to-put-in-production" bits of Gaia Ajax 3.6 is finally ready to be routed through your NIC and assembled on your harddrive. In this blog I will tell you the 3W+1H: Why, What, How & Where.


Ideally the product should speak for itself, but endow me a few bytes of your browser memory to unravel the architectural spirit behind the product. Gaia was built with the following ideas in mind:

  • Simplicity
  • Code reuse in a managed language of choice
  • Focus on highly reusable & versatile building blocks
  • It was designed to be your favorite toolbox which just works across all your web projects

"Philosophically speaking it's not so much about the controls that you find there, but more about the controls which you don't find".

This abstract idea can be a little difficult to comprehend at first, but you will become a better developer once you really get it. We humans find it hard to visualize on the non-existent, the history that never took place. A lot of one-size-fits-all components sometimes solves too much (often you need < 1%). Your job title quickly gets deduced to Professional Property Configurator and your products end up looking like everything else (we know! because we see it all the time) and where is the differentiator in that? Don't get me wrong -sometimes these are desireable means to an admirable goal, just don't forget the old gipsy curse: "May you get what you want and want what you get".

What do you get with Gaia Ajax 3.6?

3.6 contains an abundance of new "stuff". In reality, too much to cover here -so permittez-moi to show you what we believe are the most important updates for you.

DRIMR (Did you say D-R-I-M-R?)

DRIMR is an acronym for Dynamic Removals, Inserts, Moves and Replacements. DRIMR conceals all ajax complexity, shields the developer from exposure to low level details and is a common characteristic shared by all Gaia controls. It converges the Ajax umbrella into a beautiful and optimized solution for ASP.NET. In many of our demanding samples, No Re-Rendering takes place at all, except the initial load. This means:
  1. You can move a control between Control Collections and we'll just move the control in the Browser too :-)
  2. You can remove a control and replace it with a new control and if they are of the same type we will reuse that instance in the Browser and only emit the state changes. A great example is paging/sorting in the GridView: Only the Text property of the Labels get's serialized.
  3. You can remove a control entirely and we'll just issue a RemoveControlCommand to the Browser, not touching anything else.
  4. It also means a lot more to you, but we'll just have to expand information on this topic as we go.
DRIMR is such a powerful concept that you might not truly believe or understand what I am saying here, so I encourage you to check out for yourself. We hope DRIMR will inspire a whole new breed of web applications written purely in managed code that doesn't utilize unnecessary re-rendering strategies at all and we depend on you to create these masterpieces. The alternative route being a spaghetti of technologies blended together in a grey mass, colorless and with no distinguishable beauty. And you know how we feel about that now?

Interestingly DRIMR represents only a tiny fraction (1/107) of the tracker items that were solved for the 3.6 release. Imagine how many new features the 3.6 release contains? Other single items include: (>120++) New Samples, GridView, ImageMap, New Effect API, Validation Controls and numerous other features/enhancements.

120++ Samples

Lightbox and Carousel SampleOur brand new samples framework was written from scratch and each sample is now broken into a neatly organized folder structure. Many of the samples were written with extensibility in mind and should be easily customizable and integrated in your own appz. You also get a local copy of the samples when you install Gaia Ajax. Alternatively you can browse our samples online which we hopefully have mirrored somewhere near you:
Ajax GridView

Ajax GridView (for ASP.NET "Ninja" developers)

GridView is the prodigy of our DRIMR technology featuring

  • Dynamic inserts of rows/columns
  • Automatic removals,
  • Sorting and paging
  • + All other features available in the ASP.NET GridView (because it IS the ASP.NET GridView).

Example: If you select a row, Gaia detects that only a CssClass change took place, so that's the only thing Gaia "wires over". This in turn delivers a GridView with an amazing performance that you can use out of the box or upgrade your existing ASP.NET GridView. Instantly turn rows into edit mode, insert ANY control and get JSON-like serialization of data through familiar DataBind() operations in the codebehind. You can use WebServices if you want, but you don't have to, any collection will do just fine.

A potpourri of other interesting features

To economize on your precious time, allow me to just list up some additional things we hope you will enjoy in this release:
  1. New class based Effect API which allows
    1. Run multiple effects in parallel
    2. Run multiple effects in a queue
    3. Client side only effects
    4. Attaching to special control events (ie. Appear/Close)
    5. Lots of usage options
  2. Full IE6 support
    1. Css compatible
    2. Modal windows
    3. Samples Website 100% written for IE6
  3. Brand new controls
    1. ImageMap
    2. ValidatorControls
    3. BrowserHistory
    4. GridView
  4. Gaia Ajax 3.6 contains a total of 41 Server Controls. That's less than $5 pr/control! Let us know if you can write them cheaper, because then -You are hired! 
  5. AspectBinding to Events, Properties and methods. This means more native events are exposed on controls directly and the Modal property is back on Window. The TextBox for example now has:
    1. OnMouseOver
    2. OnMouseOut
    3. OnBlur
    4. OnFocus
    5. OnDoubleClick
    6. OnSelect
    7. + The rest which you already know
  6. Amazing new Drag&Drop capabilities. Dragging can now occur at the document level, circumventing stacking contexts, overflows and other obstacles when items are being dragged around. It also supports
    1. Ghosting
    2. Shallow Copies
    3. Custom CssClasses during Drag&Drop
  7. General Performance optimizations and JavaScript refactorings.
  8. The Nested Windows sample demonstrates how you can make the impossible possible with Gaia Ajax. In this sample we can add "unlimited" levels of modality recursively to nested Windows with roughly 20 lines of C# code!
  9. I've said it before and I'll say it again. Par example: the chess game does not perform re-rendering at all. All pieces are "physically" moved in the browser, captured pieces are replaced and non-valid moves slides the control back where it came from, and the best part: It's all written in 100% pure .NET managed code on the server. No Biz Exposed!

Here's a snippet of the server response during a piece capture:
   1:  Gaia.CRP('f7_black-pawn-f7','f3_white-queen-f3',1);
   2:  $G('f3_white-queen-3')
   3:  .setImageUrl('img/white_queen.png')
   4:  .setID('f7_white-queen-f7');

If you are still in doubt? Check out yourself and unleash the developer animal inside you! I don't have the stamina to continue this list so let me just quote one of our recent customers here: "Gaia is the best investment we've done in a LONG time!" -ConnectIT, Norway


The 3.6 codename has been "fairytale" and was partially inspired by the MGP winner Alexander Rybak's song with the same name. We decided on that name just two months before the MGP final in Moscow due to a gut feeling that Alex would bring medals and honor home to Norway. I think Gemini reveals the publish date :-)

Development of Gaia Ajax is inspired from a mix of agile/bazaar techniques. Core development is mostly in-house, but external contributers are welcome to participate in the open forums/wiki/etc. Today many such contributions exist, including a full Outlook-like Scheduler written by Pavol. For a list of all extensions go here. The project enjoys a tight customer/community feedback loop with an instant report-confirm-fix-test-build-publish loop with our fully automated build system.

Other characteristics of the project include a high degree of transparency & Public Access to:


We've focused on backwards compatibility and for most cases you can do a binary upgrade by just replacing the dlls. ForceAnUpdate() is still hanging around, but should be safe in most scenarios to remove where Gaia only controls are in use. Doing so will result in vast speed improvements and reduced payload for ajax callbacks. for both the client and server, whereas DRIMR does not!

Note: Upgrade fails if you're doing a full custom implementation of IAjaxControl. However, inheriting directly from Gaia controls is considered safe.

Retracted Feature(s)

The alpha/beta release contained a selection of four new skins. These skins did not qualify our QA phase and unfortunately was removed. The skins are available in the SVN repositories under /gaia-ajax-skins/branches/ and they might be released in the future when quality is improved. However, we have plans to release more skins in the near future and these will be made available as a free add-on to the 3.6 release or in a future service pack to 3.6. We'll come back with more information regarding this in a few weeks.


Where to go from here? Well, that depends a great deal on where you are heading? If you are totally sold at this point (we certainly hope so), just pickup the SKU most suitable for you here: 

The installer is digitally signed (verifies authority) and integrates nicely with VS.NET 2005 & 2008 and you get a shortcut to a locally installed copy of the samples on your start menu. Opening the Samples in VS allows you to dissect the code and see for yourself how quickly you can build similar high quality code effortlessly.

Then I would suggest the following reading:
Here are a few selected samples which demonstrates some of the unique features of Gaia Ajax:


We hope you are going to love Gaia Ajax as much as we do. Also keep in mind that we truly want you to be successful with Gaia and that we are there for you when you need us. Don't hesitate to use email, forums, twitter, phone or any other surface we are exposed through.

Best Regards,
The Team behind Gaia Ajax

Gaia Ajax 3.6 Beta now available!

by Stian Solberg 21. October 2009 16:00

We're moving fast towards a final release. Current code is more and more stable, but we'd like the final release to be top quality and that's why we are releasing a beta.

Work done between Alpha and Beta:

Links and downloads

Get Free Download Gaia Ajax 3.6 Beta
Includes Visual Studio Integration and 100++ Samples

Changelog-Gaia-Ajax-3-6-Beta.pdf (106.52 kb)
Click here for Tar.gz binaries + source - for open source projects
Click here
if you are a subscription customer (requires login)


Comments and feedback are very welcome at our forum. Enjoy the new bits!

Kind regards
The Gaiaware Team

Time's up! Gaia Ajax 3.6 Alpha Released!

by Jan Blomquist 13. September 2009 21:01

Thank you for your patience and continued belief in our product. It is our vision to bring you the finest quality for ajax development on the ASP.NET platform. The 3.6 version comes with practical innovation previously unavailable to ASP.NET developers. Hopefully it will bring "goosebumps" similar to the ones we had the first time Microsoft unveiled ASP.NET almost a decade ago. 

"3.6 is backwards compatible and introduces a paradigm shift called adaptive rendering"

Links and downloads

  • Click here to download Gaia Ajax 3.6 "alpha"
    Exe with Visual Studio Integration 30 day trial

  • Click here to download Gaia Ajax 3.6 "alpha" - Tar.gz binaries + source - for open source projects
  • Click here to download Gaia Ajax 3.6 "alpha" commercial (requires subscription) 

Highlights from the Gaia Ajax 3.6 release

1. Adaptive Rendering
Adaptive Rendering is a mind-blowing concept that enables dynamic insertion, removal, moving and replacement of individual controls. The concept has far reaching implications and is the breakthrough technology that will make you hunger for Gaia as the building blocks for your UI layer

  • Click here for a sample that demonstrates dynamic inserts and removals of controls and compare it to the usage of traditional partial rendering
  • Click here for a sample of the chess game featuring dynamic control moves
  • Click here for a sample of our "PageFlakes" sample that also features dynamic moves
  • Click here to check out a sample that demonstrates all features of adaptive rendering, including control replacements via databinding
Jan Blomquist has written an extensive review of Adaptive Rendering on his personal blog.

2. Ajax GridView
The Gaia Ajax GridView is a premier example of adaptive rendering as it enables the worlds most advanced GridView for ASP.NET without much code at all. The GridView still supports all the operations like ( filtering, sorting, selection, deletions, updates, etc ) and it's all ajaxified thanks to adaptive rendering.  

  • Click here for a sample that demonstrates the Gaia Ajax GridView in action

3. 100++ new Samples!
In the package you will find a total of 128 samples ranging from minimalistic ones to extensive, almost full applications in themselves. This is all packaged into a new samples framework that simplifies navigation, code view, VB.NET code availability, etc. 

Note: The samples are now utilizing the WAP project type


Summer Offer and what's coming in Gaia Ajax 3.6?

by Stian Solberg 23. July 2009 13:21

In good Gaiaware tradition we're spreading a refreshing summer breeze:

One Developer License of Gaia Ajax 3.5 "Themis" + One Developer License on the upcoming 3.6 (read more below on what's coming) for as little as $145. It also includes 2 x 1 month of support, 1 month of email support from purchase date on 3.5, as well as 1 month of support on 3.6 from release date.

Buy Now - Save 63% Today!
Expires 31st of July

What's coming in Gaia Ajax 3.6?

We have been working on 3.6 for a while already. It will be a great new step in the Gaia experience, making it even easier and more fun to create the next generation web applications. Here's what we're adding:

  • Aspect Binding
    Now you can add behaviours and events declarative to the Gaia controls. Want to set your Gaia Window modal? Just add the property Modal="True" and it is done! Subscribe to events like OnClick, OnDoubleClick, OnBlur, OnFocused, OnMouseOver, OnMouseOut, OnSelect ++ and your ASP.NET web application will never be the same.
  • New Gaia Effect library
    Faster and more effect options to choose from. Enjoy parallel and queued effects.
  • New Gaia History control
    Make friends with the browser navigation in your Ajax app.
  • New skins coming
    Office, IGaia, Portal and Social
  • New and richer GMap control
    We have spent some time on our Google Maps integration. Zoom, catch click events, add InfoWindows and pan to new coordinates. Finally Google Maps is for everyone!
  • New Gaia Ajax ImageMap control
    Just like the ASP.NET ImageMap control.
  • Advanced keyboard mapping
    Add keyboard integration to your web application. Another reason to go from desktop to web...
  • More features and events to Calendar and DateTimePicker
    We have added properties like FirstDayOfWeek and VisibleDate, and events like  OnCalendarDayClicking and OnDayRender
  • Core: Smaller JavaScript footprint
    In the work with revamping the Gaia Effects, we have moved out of the core.
Want to test early? Take a look at the code? Get the source code, test a nightly build
Have a nice summer!
Best regards
The Gaiaware Team


How To Create An Async Ajax Google Search with ASP.NET And Gaia Ajax

by Stian Solberg 26. May 2009 06:30

Recently we decided to add a searching feature for the different sites we run on main site, blogs, forum, tracker, docs and API reference. We wanted to be able to search each site separately and still have all the results presented in a intuitive way. And of course, it should be built using Gaia Ajax, so it could be quickly developed (our customers say they increase the productivity by 30-50% on the ASP.NET platform when using Gaia Ajax) and give a responsive and ajaxified user experience.

Async Search with ASP.NET Ajax

We have purchased a Google Site Search subscription so we don't have to reinvent the wheel again and make our own site spider. The Google Site Search gives us the search results in XML, and we can parse and present them in any way we would like.

The challenge: multiple search sources with ASP.NET

Since we wanted to present the results from each sub site in separate sections, we needed to overcome some limitations of what Google Site Search gives us. E.g. you can return max 20 results per search. Since we wanted to separate the results in each sub domain (e.g. we needed to use the useful "site:" parameter in a Google query. That meant that we needed to fire off 5-6 Google searches for each search we executed on our own page. Our immediate concern was how long time it would take to perform so many Google searches, return them, parse them and present them on our ASP.NET page.