Introduction to ASP.NET Web Forms and Gaia Ajax

Modified: 2011/05/23 19:58 by stians - Uncategorized
Edit

Prerequisites

  1. Install Visual Studio
  2. Install Gaia Ajax.
    1. download a 30-days trial or
    2. purchase a license

Edit

Introduction

Gaia is an ASP.NET Server Control library that abstracts away JavaScript and Ajax. It allows you to write all your web applications in managed code. Some benefits include performance, code model and ease of use. Many controls inherit from the ASP.NET base controls giving you only a small learning curve to get started. Gaia Ajax is compatible with .NET Framework 2.0, 3.0 and 3.5 and Mono. It also features Visual Studio Design Time Support, a built-in, nice default Theme and everything from basic to advanced widgets ( Window, Calendar, TabControl, TreeView, etc )

Edit

Relevant Pages

  1. Key Features in Gaia
  2. About Gaia
  3. Considerations when choosing an ajax framework
  4. Read more about ASP.NET Web Forms at www.asp.net

Edit

Sample Code

The sample code below demonstrate all you need to know to get started with the components. This example only updates a Label on the page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Gaia.WebWidgets" TagPrefix="gaia" Namespace="Gaia.WebWidgets" %>



Ajax Sample

There are three important things in the above code. First you have the Page directive which says something about your page like what language the codebehind file is in, which file implements the codebehind class and what the class name is of your codebehind class and so on. The second important thing is the Register directive which for the above scenario "imports" Gaia.WebWidgets.dll and uses the gaia prefix for giving you access to all WebControls in the "Gaia.WebWidgets" namespace. Already now you can type in "<gaia:" and get intellisense help from Visual Studio for all the Ajax Controls in the Gaia core.

The third and most important thing to understand is the declarative syntax of the Gaia Ajax Button which looks like this:



This declares at the place you are within your HTML a Gaia.WebWidgets.Button which will have the ID of "btn" and the Text of "Click me". Assuming you now have a codebehind file called Default.aspx.cs containing a System.Web.Page inheriting class called "_Default" you can now already run this and the output will look something like this:

First Application in Gaia

Of course it won't do anything useful since we have no logic in it at all, but it renders its output.

Most of the Gaia Ajax WebControls inherit from their ASP.NET counterparts, which means that every single property you have in the System.Web.UI.WebControls.Button will also be available to you in a Gaia Ajax Button. And you can use most of its properties, methods and events on the Gaia Button in any event handler.

.NET have a very beautiful event/delegate system which is a true event implementation which makes it easy for your objects to signal interest in events raised by other objects. ASP.NET is a pure event based GUI system which means that when you "Click" the button above, then an Event will be raised which you can "subscribe" to in your codebehind file in C#. To subscribe to the "Click" event of the above button and set the Text property of a Gaia Label you would normally do something like this;

Edit

Working Code Sample

Edit

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Gaia.WebWidgets" TagPrefix="gaia" Namespace="Gaia.WebWidgets" %>



Ajax Sample



Edit

C# Codebehind

using System;

public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { }

protected void btn_Click(object sender, EventArgs e) { lbl.Text = "Hello Ajax World 2.0"; } }

Edit

VB.NET Codebehind

Public Class _Default Inherits System.Web.UI.Page

Protected Overrides Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub

Protected Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs) lbl.Text = "Hello Ajax World 2.0" End Sub

End Class

Now if you compile and run the above application and then click the Button it will display "Hello Ajax World 2.0" in your Ajax Label. For those acquainted with ASP.NET AJAX you will notice that first of all there is no ScriptManager, no UpdatePanels and no required WebServices. In Gaia you can update any widget any place on the page from any Gaia Event Handler.

Also if you look at the request and the response with e.g. FireBug, Fiddler or some similar sniffer tool you will notice the compact, secure and efficient data transfer between the client and server.

Edit

The HTTP Request and Response dissected

Edit

HTTP Request to the server

GaiaCallback=true&btn=Click me&_GAIA_FILES=670143809%241623831675%24574948095%242060931379%24-292782845 %24-1257833369%24-1746062492&_EVENTVALIDATION=%2FwEWAgLb2K%2BZDwKSoqqWDy5qphZGVxq2ILnQH65uU7MgWEMp&_VIEWSTATE =%2FwEPDwULLTIwMjA3NTk0MzEPZBYCAgMPZBYEAgEPDxYCHgtIYXNSZW5kZXJlZGdkZAIDDw8WAh8AZ2RkZBAKnl80pWgpTvyWiRBK %2BusY%2FqVO
Edit

HTTP Response from the server

$G('lbl').setText('Hello Ajax World 2.0'); $FChange('__VIEWSTATE', 43, 'EHgtIYXNSZW5kZXJlZGceBFRleHQFFEhlbGxvIEFqYXggV29ybGQgMi4wZGQCAw8PFgIfAGdkZGSL1pk b0d1wQuK4M9lMGeOIWhPkMA==');Gaia.Control.setUpdateControl(null, true);


Edit

Important Topics to fully leverage Gaia Ajax in ASP.NET Development

  1. ViewState In Gaia Ajax
  2. Page Life Cycle Explained

ScrewTurn Wiki version 2.0.33. Some of the icons created by FamFamFam.