Home > .net 3.5, AJAX, c#, JavaScript, Microsoft, Visual Studio 2008, Volta > AJAXing in .NET – #3 – Live Volta and Script#

AJAXing in .NET – #3 – Live Volta and Script#

January 8, 2008

This is the third and final part of the series looking at several “AJAXing” technologies for .NET—ranging from “old school” JavaScript to new, VERY alpha technologies like Volta.

Post 1:

  • Example #1 – Plain ASP.NET Page with PostBacks
  • Example #2 – ASP.NET AJAX with UpdatePanels

Post 2:

  • Example #3 – Standard HTML and JavaScript
  • Example #4 – ASP.NET AJAX Framework and JavaScript

Post 3 (this post):

  • Example #5 – Nikhil Kothari’s Script#
  • Example #6 – Microsoft Labs Live Volta

This post, to be totally honest, will be short.  Why?  After FAR too long of dinking with them, I simply can’t get either solution to work.  Here’s where I’m at NOW.  Once I get these working, I’ll better evaluate them against current JavaScript solutions.  That said, the sheer idea of learning a language to avoid writing a language seems odd at best…

#4. Microsoft Live Labs Volta

I previewed Microsoft Live Labs Voltron Volta back in December and was quite impressed—a Microsoft-designed solution for creating type-safe JavaScript within C#.  I wasn’t thrilled with the special project layouts or 45K of compiled Volta code that attached to each project; however, it’s in … alpha, I expected that.

In our Volta code-behind, we have the following logic. 

public partial class VoltaPage1 : Page

{

 

Select photoList;

Image photoPreview;

 

public VoltaPage1()

{

InitializeComponent();

photoList.Change +=

new HtmlEventHandler(photoList_Change);

}

 

void photoList_Change()

{

photoPreview.Style.Display = “block”;

       photoPreview.Src =  “Images/” + photoList.Value;

}

 

partial void InitializeComponent()

{

photoList =

Document.GetById<Select>(“PhotoList”);

photoPreview =

Document.GetById<Image>(“PhotoPreview”);

}

}

That compiles, is easy to read, and type safe.  Neato.  The HTML code is identical to our prior examples, so a simple copy and paste from there.  That saves some time.

The problem?

It appears that Volta doesn’t appreciate resources that are not embedded.  I’ve posted up to the Volta community groups and will slowly work through either a) rectifying what the correct code should be or b) accepting that this is “outside the scope” of the current Volta design.  I can’t fathom having hundreds of embedded resources in a project—for simple graphics.

Finally, it appears the problem that Henry discussed in my last post also exists in Volta—Document.GetById isn’t case sensitive at all. :(  Thanks Henry for the heads-up to keep that in mind!

[Update: 10 January 2008 : Danny van Velzen’s explaination in the forums helped out a lot.  At this time, as expected, the CTP simply doesn’t support anything besides embedded resources; however, has logged the request as a future work item.  *cheer*  To work around this problem, he recommended a post-build event, which is basically a batch command.  I’ve tried that out and this example works like a champ!

The only gotcha is figuring out where to copy the files to and what correlates to the “root” of your application.  It’s not the root of our bin\Debug or bin\Output.  It’s the Volta directory underneath.  With that information, you can write up a quick event:

xcopy /i /y “$(ProjectDir)Images” “$(TargetDir)Volta\Images”

Given this simply copies the images for this prototype project; however, you could use these events to copy pages, .css, or anything that you didn’t feel like “embedding” into your project.  As I noted on the Volta communities post—I’m looking forward to this maturing and having this functionality built into the compiler.🙂

With this updated information, I can finally compare implementation with our other options..

  • HTML Code: 9, Code Behind: 5 with whitespace and method names.
  • To me, this code is just as simple to read as JavaScript—maybe a bit easier because it’s strongly typed and hooks up event handlers just like .NET code.
  • All tests come back clean—and Volta supports FireFox debugging out-of-the-box, which is great because I have come to prefer FireBug over the IE Developer Toolbar.
  • Pitfalls are, at this time, the fact it’s VERY alpha and still in development.  Most of the DOM appears to be ready to go, however, issues like the embedded resources make this impractical for production use at this time.  In addition, Volta requires a special project type for its tier-splitting—you can’t just drop some Volta/JavaScript into a project and go.  That’s a HUGE drawback to me.  I’d love to see the technology integrated into the existing web platform so I could program JavaScript like this against Web Forms, MVC, or whatever.

#5. Script# 0.4.5.0

The latest build of Script#, 0.4.5.0, appears to have a few glitches in the Scriptlet editor (cutting out the top and bottom lines, throwing compile errors when they don’t exist, etc) and after blowing through about a dozen project—it just won’t compile.  Period. 

Here’s the code for the class.  It looks right, from what I have as examples, but blows up that I have extra “}” (which is a known bug apparently) and believes that my IDisposable doesn’t exist, though I see it right there.😦

using System;

using System.DHTML;

using ScriptFX;

using ScriptFX.UI;

 

public class Viewer : IDisposable

{

    private SelectElement _photoList;

    private ImageElement _photoPreview;

    private DOMEventHandler _photoListOnChangeHandler;

 

    public Viewer()

    {

        _photoListOnChangeHandler =

new DOMEventHandler(PhotoListOnChange);

        _photoList =

(SelectElement)Document.GetElementById(“PhotoList”);

        _photoList.AttachEvent(“onchange”, _photoListOnChangeHandler);

    }

 

    public void PhotoListOnChange()

    {

        _photoList =

(SelectElement)Document.GetElementById(“PhotoList”);

        _photoPreview =

(ImageElement)Document.GetElementById(“PhotoPreview”);

 

        _photoPreview.Src = “Images/” + _photoList.Value;

    }

 

    public void Dispose()

    {

        if (_photoListOnChangeHandler != null)

        {

            _photoList =

(SelectElement)Document.GetElementById(“PhotoList”);

            _photoList.DetachEvent(“onchange”, _photoListOnChangeHandler);

 

            _photoListOnChangeHandler = null;

        }

    }

}

I’m going to keep working with it (because the prototypes I have gotten working have worked well, but also don’t seem to work under 0.4.5.0) and I’ll update this post when I have more information.  If anyone out there is a Script# expert and has 0.4.5.0 up and going with VS2008, email me, please.🙂.

%d bloggers like this: