Ajax Control Extensions for ASP.NET with Gaia Ajax 3.5

by Jan Blomquist 21. February 2009 20:05
Retro Tv

To lessen the learning curve of creating custom control extensions for Gaia Ajax, we've added some ItemTemplates to Visual Studio both for VB.NET and C#.

Some people have commented that Gaia Ajax doesn't offer a good client side story; This is simply not true. Gaia Ajax offers a plethora of ways for you to write both the client and server layer. Connecting the parts together through our Ajax machinery is an option, not a core requrement. 

Instead of writing a long blog about this, we've published a video tutorial instead (approx. 28 minutes) that you can find in our Gaiaware TV center. The video is available for download or online viewing (Flash)

In this video we're covering how to create a simple control extension with a thin javascript file available. It's the purpose of this tutorial to mostly be concerned about connecting the client and server parts together with the Gaia Ajax machinery.

Quick Agenda overview

  1. Creating the Project and adding the control
  2. Discussing the anatomy of a Gaia Control
  3. Serializing Property changes to the client
  4. Sending method calls to the client
  5. Calling the server from the client and dispatching an event

Overview of the code written in this video

C# Code

   1:  /* Gaia Ajax HelloGaia Template for Simple Extensions */
   2:   
   3:  using System.Web.UI;
   4:  using Gaia.WebWidgets;
   5:   
   6:  [assembly: WebResource("Gaiaware.CustomExtensionControls.HelloGaia.js", "text/javascript")]
   7:   
   8:  namespace Gaiaware.CustomExtensionControls
   9:  {
  10:      using System;
  11:      using Gaia.WebWidgets.HtmlFormatting;
  12:   
  13:      /// <summary>
  14:      /// Gaia Ajax HelloGaia 
  15:      /// </summary>
  16:      public class HelloGaia : GaiaControl, IAjaxControl
  17:      {
  18:          public event EventHandler Clicked;
  19:   
  20:          [Method]
  21:          internal string ClickedMethod()
  22:          {
  23:              if (Clicked != null)
  24:                  Clicked(this, new EventArgs());
  25:   
  26:              return string.Empty;
  27:          }
  28:   
  29:          protected override void IncludeScriptFiles()
  30:          {
  31:              base.IncludeScriptFiles();
  32:   
  33:              // Include Attached Javascript file
  34:              Manager.Instance.AddInclusionOfFileFromResource("Gaiaware.CustomExtensionControls.HelloGaia.js", 
  35:                  typeof(HelloGaia), "Gaiaware.HelloGaia.browserFinishedLoading", false);
  36:   
  37:          }
  38:   
  39:          public void SayHello()
  40:          {
  41:              _sayHello = true;
  42:          }
  43:   
  44:          private bool _sayHello;
  45:   
  46:          [AjaxSerializable("sayHello")]
  47:          private bool SayHelloMethod
  48:          {
  49:              get { return _sayHello; }
  50:          }
  51:   
  52:   
  53:          [AjaxSerializable("setCssClass")]
  54:          public string CssClass
  55:          {
  56:              get { return ViewState["CssClass"] == null ? "" : ViewState["CssClass"] + ""; }
  57:              set { ViewState["CssClass"] = value; }
  58:          }
  59:   
  60:          protected override void RenderControlHtml(XhtmlTagFactory create)
  61:          {
  62:              using (Tag root = create.Div(ClientID))
  63:              {
  64:                  root.WriteContent("Hello Gaia");
  65:              }
  66:          }
  67:   
  68:          #region IAjaxControl Members
  69:   
  70:          string IAjaxControl.GetScript()
  71:          {
  72:              // Register the Control ClientSide
  73:              return new RegisterControl("Gaiaware.HelloGaia", ClientID).ToString();
  74:          }
  75:   
  76:          #endregion
  77:      }
  78:  }

JavaScript

   1:  /* Gaia Ajax Extension */
   2:   
   3:  // Create root namespace
   4:  if( !window.Gaiaware )
   5:    Gaiaware = Class.create();
   6:   
   7:  // Create the Extension Control
   8:  Gaiaware.HelloGaia = Class.create(Gaia.Control, {
   9:   
  10:      // Constructor
  11:      initialize: function(element, options) {
  12:          this.initializeHelloGaia(element, options);
  13:      },
  14:   
  15:      initializeHelloGaia: function(element, options) {
  16:          // Calling base class constructor
  17:          this.initializeControl(element, options);
  18:   
  19:          Element.observe($(element), 'click', this._onClick.bind(this));
  20:      },
  21:   
  22:      _onClick: function(evt) {
  23:          Gaia.Control.callControlMethod.bind(this)('ClickedMethod', null, null, this.element.id);
  24:      },
  25:   
  26:      setCssClass: function(value) {
  27:          $(this.element).className = value;
  28:          return this;
  29:      },
  30:   
  31:      sayHello: function(value) {
  32:          alert('Hello');
  33:          return this;
  34:      },
  35:   
  36:      // Destructor
  37:      destroy: function() {
  38:          // TODO: Put destruction code here
  39:      }
  40:   
  41:  });
  42:   
  43:  Gaiaware.HelloGaia.browserFinishedLoading = true;

If you like the video tutorials we're creating and find them useful, please give us some feedback on it. Are we touching base?

Until next time Smile 

Tags:

Tutorials

Comments

Comments are closed

Powered by BlogEngine.NET 1.4.5.0
Theme by Mads Kristensen