Introduction

Script# is a compiler that generate the Javascript instead of MSIL (Microsoft Intermediate Language) from C# sourcecode. Like GWT (Google Web Toolkit) that can convert the Java code to browser-compliant JavaScript and HTML, Script# is able to convert the C# codes to Javascript (either human-readable format or compact one). It is the best tool for those who hate to write the Javascript in HTML view.

Sourcecode Download : SSharp.zip

Example 1 : Getting Started with Script#

• Download the ScriptSharp.zip from this link.
• Extract it and double-click ScriptSharp.msi to install the Script# (You should note that Script# is currently available for Microsoft Visual Studio 2005. If you wanna use Script# with Visual Studio 2008, please check-out this post.)
• Launch the Microsoft Visual Studio 2005 IDE and let’s create very sample Script# project
  Note: I recommended you to run the VS 2005 IDE as an administrator if you are using Windows Vista series.

  

• Click “Script#-Enabled Web site” Project Template from “New Web Site” dialog (File>New>Web Site)
• We will create one button named “clickMeButton” and the div called “greetingDIV” within
  
  tag.

  <div>
  <input type="button"  id="clickmeButton" value= "Click Me" />
  <br />
  <br />
  <div id="greetingDIV" class="divbox">
  Hello buddy!!
  </div>
  </div>
  

• Go to the design-view and right-click on “Scriptlet” control as picture below
• Select “Edit C# Code” on content menu.
• Paste the following code in Scriptlet Editor

  using System.DHTML;
  using ScriptFX;
  using ScriptFX.UI;public class MyScriptlet : IDisposable {private DOMEventHandler _clickHandler;
  
  private MyScriptlet(ScriptletArguments arguments) {
  _clickHandler = new DOMEventHandler(OnClickMeButton_Click);
  
  DOMElement clickMeButton = Document.GetElementById("clickmeButton");
  clickMeButton.AttachEvent("onclick", _clickHandler);
  }
  
  public static void Main(ScriptletArguments arguments) {
  MyScriptlet scriptlet = new MyScriptlet(arguments);
  
  }
  
  public void Dispose() {
  if (_clickHandler != null) {
  DOMElement okButton = Document.GetElementById("clickmeButton");
  okButton.DetachEvent("onclick", _clickHandler);
  _clickHandler = null;
  }
  }
  
  private void OnClickMeButton_Click() {
  DOMElement divGreeting = Document.GetElementById("greetingDIV");
  divGreeting.Style.Display = "block";
  }
  }
  

  

• Click “Save and Close” on Scriptlet Editor
• Build the web application and Press “F5″ to run the application
• (There is one button on the page.) Click this button.
• “Hello Buddy!” message will be shown as picture below.

That’s.. You just created one script#-enabled webpage. Do you want to know what code Script# generated from your C# code? It’s easy. Just go to “View Source” and you will see the following script which is generated by Script#.

<script type="text/javascript">
//<![CDATA[
window.main = function main() {
Type.createNamespace('Scriptlet');

////////////////////////////////////////////////////////////////////////////////
// Scriptlet.MyScriptlet

Scriptlet.MyScriptlet = function Scriptlet_MyScriptlet(arguments) {
this._clickHandler = Delegate.create(this, this._onClickMeButton_Click);
var clickMeButton = $('clickmeButton');
clickMeButton.attachEvent('onclick', this._clickHandler);
}
Scriptlet.MyScriptlet.main = function Scriptlet_MyScriptlet$main(arguments) {
var scriptlet = new Scriptlet.MyScriptlet(arguments);
}
Scriptlet.MyScriptlet.prototype = {
_clickHandler: null,

dispose: function Scriptlet_MyScriptlet$dispose() {
if (this._clickHandler) {
var okButton = $('clickmeButton');
okButton.detachEvent('onclick', this._clickHandler);
this._clickHandler = null;
}
},

_onClickMeButton_Click: function Scriptlet_MyScriptlet$_onClickMeButton_Click() {
var divGreeting = $('greetingDIV');
divGreeting.style.display = 'block';
}
}

Scriptlet.MyScriptlet.createClass('Scriptlet.MyScriptlet', null, IDisposable);

// ---- Do not remove this footer ----
// Generated using Script# v0.4.2.0 (http://projects.nikhilk.net)
// -----------------------------------

ScriptFX.Application.current.run(Scriptlet.MyScriptlet);
}
ScriptHost.initialize([
'App_Scripts/ssfx.Core.js',
'App_Scripts/ssfx.UI.Forms.js'
]);
//]]>
</script>

Don’t you think that the generated Javascript code looks so similar to your C# code that you wrote in Scriptlet Editor? Yes. This is one of the advantages of using Script#. It can generate the human-readable Javascript that has the same structure as your C# code. If you are not sure how to write the object-oriented code in Javascript, you can just write the code in C# with the rich features such as IntelliSense, refactoring, compile-time and let Script# convert the C# code to the object-oriented Javascript code.

Note: The sample is already attached in this post. Please check-out “Example1.aspx” in zip file.

Okay. We’ve just done one sample with Script#. As the project is in very early stage, I notice that there are a few weak points and bugs in that project while I’m learning. And also, I’m kinda agreed with Dimitri Glazkov regarding on Script# project. (Check-out his post here.) Anyway, let’s learn more about Script# and we’ll see whether we should use it in real project or not.

Example 2 : Script# Ajax

• Create the another Script#-enabled project
• Add the “Generic Handler” to your project and name it “ExampleWebHandler.ashx”
• Paste the following code in “ProcessRequest (HttpContext context)” function.

  context.Response.ContentType = "text/xml";
  context.Response.Write("Hi " + HttpUtility.HtmlEncode(context.Request.QueryString["name"]) + "!"); 

  Note: What this code does is that write the “Hi” after appending the name that came as a parameter in response.
  

• Add one textbox to accept the user inputs, one button to invoke the server-side script and the div for displaying the result

  <div>
  Please Enter your name : &nbsp;&nbsp;
  <input type="text" id="nameTextBox" /> &nbsp;&nbsp;
  <input type="button" id="sayHiButton" value="Say Hi!!"/> <br /><br />
  <div id="result">
  </div>
  </div>
  

• Add the argument to your scriptlet control. (Right-click on Scriptlet control and select “Edit” Arguments. then, Add one member (Name: name and Value: ExampleWebHandler.ashx?name={0}))

  

• then, Click “OK” to close the “ScriptletArgument Collection Editor”
• Paste the following code in “Scriptlet Editor”

  using System;
  using System.DHTML;
  using ScriptFX;
  using ScriptFX.UI;
  using ScriptFX.Net;
  
  public class MyScriptlet : IDisposable {
  
  private string _urlName;
  private DOMEventHandler _clickHandler;
  private XMLHttpRequest _request;
  DOMElement resultDIV = null;
  
  public static void Main(ScriptletArguments arguments) {
  MyScriptlet scriptlet = new MyScriptlet(arguments);
  }
  
  public void Dispose() {
  if (_clickHandler != null) {
  DOMElement okButton = Document.GetElementById("sayHiButton");
  okButton.DetachEvent("onclick", _clickHandler);
  _clickHandler = null;
  }
  if (_request != null) {
  _request.Onreadystatechange = (Callback)Delegate.Null;
  _request.Abort();
  _request = null;
  }
  }
  
  private MyScriptlet(ScriptletArguments arguments) {
  _urlName = arguments.name;
  
  _clickHandler = new DOMEventHandler(OnSayHiButton_Click);
  
  DOMElement clickMeButton = Document.GetElementById("sayHiButton");
  clickMeButton.AttachEvent("onclick", _clickHandler);
  }
  
  private void OnSayHiButton_Click() {
  InputElement nameTextBox = (InputElement)Document.GetElementById("nameTextBox");
  resultDIV = Document.GetElementById("result");
  resultDIV.Style.Display = "block";
  
  _request = new XMLHttpRequest();
  _request.Onreadystatechange = this.OnRequestComplete;
  _request.Open("GET", String.Format(_urlName, nameTextBox.Value.Escape()), /* async */ true);
  _request.Send(null);
  }
  
  private void OnRequestComplete() {
  if (_request.ReadyState == 4) {
  //if (_request.Status == 200) {
  _request.Onreadystatechange = (Callback)Delegate.Null;
  if (resultDIV != null) {
  resultDIV.ClassName ="divbox";
  resultDIV.InnerHTML = _request.ResponseText;
  }
  _request = null;
  // }
  }
  else {
  if (resultDIV != null) resultDIV.InnerHTML = @"<img src=""./images/indicator_technorati.gif"">";
  }
  }
  }
  

  Note: I assumed that you already have some ideas about Ajax before reading this article.

• Build the application and run it. (You will see one textbox and one button as you have added on the page.)
• Type the name you like
• Click “Say Hi!” button. (You will see the result as below with the name that you enter.)

  

This demo is very sample that shows the way how to communicate between Script# code and the Server-side code. You can probably extends the web handler to get the more features as you need for your Script#-enabled application.

Debugging the Script#-enabled application

For IE Users, Go to “Debug->Windows->Script Explorer” or Press “Ctl+Alt+N” while you are running the project. You will see the list of script files that are included in page. Select the script file that you wanna debug and set the breakpoint. You know how to debug the Javascript with Visual Studio 2005, right?

For Firefox Users, Firebug is the best tool for debugging the Javascript.

Yeah. It is so sad to say that you are not able to debug the C# code that you wrote. Instead, you will be debugging the Javascript code which is generated by Script# compiler.. It makes you feel like debugging the MSIL code after writing the C# in IDE even the generated code is so much like the C# code that you wrote and human-readable but it is by-design so we can do nothing.

Conclusion

I’m gonna stop learning the Script# project for today. I’ll read about building the Script# library and Vista Sidebar Gadget and will post them in my blog. For the time being, I do have a few disappointments in using Script#. However, I will look more information about this project and I will share the conclusion with you.. If you are also learning this project like me, please let me know. We can probably discuss more about this project.. Thanks…

More Information about Script# ~

• Script# – Introduction
• Script# Vs. Google GWT: May the Best Ajax Tool Win
• GWT And Now Script#: The Agony of a Thousand Puppies

MS published the full source code to the ASP.NET AJAX product. The client-side JavaScript library has been released under Microsoft Permissive License (Ms-PL). This Javascript library is available to download here. The server-side implementation has been released under Microsoft Reference License (Ms-RL). You can download it here.

More Info : ScottGu’s Blog – ASP.NET AJAX 1.0 Source Code Released

After installing the setup file “ASPAJAXSourceCode.msi”, you can find the sourcecode under the following location.

%programfiles%\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\Source

Problems in compiling the sourcode?
(I know. :) ) Please read this post “Build your own modded System.Web.Extensions.dll“.

ASP.NET AJAX Documentation
Download

You can also download the documentation of ASP.NET Ajax in your machine so that you can read the doc anytime you want from your IIS.

Note: Please read “ReadMe.txt” for setting up.

AJAX Control Toolkit (with Source Code)
Download
View the Toolkit (Live)

[Videos] ASP.NET Ajax
You can find dozens of videos designed for ASP.NET Ajax developers on this page.
http://www.asp.net/learn/videos/default.aspx?tabid=63#ajax

Cool.. isn’t it? :)

Here are the some free animation images for Activity Indicators. Thanks to ScottGu.

AJAX Activity Indicators
http://www.napyfab.com/ajax-indicators/

AJAX Load – Indicator Generator
http://www.ajaxload.info/

Activity Indicators
http://mentalized.net/activity-indicators/

Look at the sample images below~

Ajax comes out wth the several advantages such as the richer user experiense, no-more time for postback and so on… but there are also a ton of weak points behind this… if you wanna be an Ajax <web> developer, you hav to know the gr8 deal of Javascript (ECMA Script), XML, CSS and (Oh.. of course) DHTML/HTML. The most important thing is XML HTTP Request Object…and also, you need to know various kinda browsers (eg: IE, Mozilla-based, Safari, Opera and so on.) because, some pieces of codes (eg: DIV or Layout, Microsoft.XMLHTTP or MSXML2.XMLHTTP and …) which are wokring fine on one kinda brower might not work properly on the other kinda browsers.. And Also, you need to write TOO MUCH of client script codes for ajax application and it’s also very difficult to debug. (P.S: If you were C, C+ or Classic ASP/PHP developer, it might not be too difficult for you.. but if you were .NET guy then you will be in troubles. :-) ).. < Sorry for long introduction.. :).. >

So, We like to have something which is automatically done those tasks for us.. …….
Now, Microsoft hav created gr8 client-side framework called Atlas for Ajax application and this framework has been integrated with ASP.NET 2.0 server-based dev framework..This framework can be downloaded from the following link..

“Atlas” is a free framework for building a new generation of richer, more interactive, highly personalized standards based Web applications.

Atlas: Official Web Site – Microsoft
http://atlas.asp.net/Default.aspx?tabid=47

ScottGu’s Blog
http://weblogs.asp.net/scottgu/archive/2005/06/28/416185.aspx

Get Started with “Atlas”
http://atlas.asp.net/Default.aspx?tabid=47

Life is nice! :P

Regards,
Michael Sync

Notes: ECMA : European Computer Manufacturers Association

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Version 1 ~
http://www.huddletogether.com/projects/lightbox/
Version 2 (Source and Demo) ~
http://www.huddletogether.com/projects/lightbox2/

iBox

Source ~
http://www.ibegin.com/blog/p_ibox.html

Demo ~
http://www.ibegin.com/ibox/ibox-test.html

Thick Box

One box to rule them all..

Source ~
http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all

Demo ~
http://jquery.com/demo/thickbox/

Greybox

Source ~
http://orangoo.com/labs/GreyBox/

Demo ~
http://amix.dk/greybox/demo.html

GreyBox – Redux

Source and Demo ~
http://jquery.com/blog/2006/02/10/greybox-redux/

Yahoo UI Library

The Container family of components is designed to enable developers to create different kinds of content-containing modules on the web. Module and Overlay are the most basic containers, and they can be used directly or extended to build custom containers. Also part of the Container family are four UI controls that extend Module and Overlay: Tooltip, Panel, Dialog, and SimpleDialog.

Source and Demo ~

Yahoo! UI Library: Container
Yahoo! UI Library

UPDATED:ExtJS

Cool and very popular Javascript Library.

Download and Demo : http://extjs.com/
Note: Please let me know if I missed out something. Thanks.

http://www.mathertel.de/AJAXEngine/#view=Home
http://www.mathertel.de/AJAXEngine/#view=Downloads
http://www.mathertel.de/ajax/Aspects%20of%20AJAX_index.htm

Atlas
Atlas is a free framework for building a new generation of richer, more interactive, highly personalized standards based Web applications. This new Web development technology from Microsoft integrates client script libraries with the ASP.NET 2.0 server-based development framework. In addition, Atlas offers you the same type of development platform for client-based Web pages that ASP.NET offers for server-based pages.

http://atlas.asp.net/default.aspx?tabid=47

MagicAjax.NET
MagicAjax.NET is a free open-source framework, designed to make it easier and more intuitive for developers to integrate AJAX technology into their web pages, without replacing the ASP.NET controls and/or writing tons of javascript code. MagicAjax initially appeared as a codeproject article. Now it is hosted on Sourceforge and you can find the latest release at the downloads section.
http://www.magicajax.net/

MonoRail
MonoRail (former Castle on Rails) is a MVC web framework inspired on Action Pack. The Action Pack way of development is extremely productive, very intuitive and easily testable

http://www.castleproject.org

AJAXLib
AJAXLib is a small JavaScript tool that makes working with AJAX applications a little easier.

http://karaszewski.com/tools/ajaxlib/

Dojo
Dojo is the Open Source JavaScript toolkit that helps you build serious applications in less time. It fills in the gaps where JavaScript and browsers don’t go quite far enough, and gives you powerful, portable, lightweight, and tested tools for constructing dynamic interfaces.

http://dojotoolkit.org/

MochiKit
MochiKit.Visual provides visual effects and support functions for visuals.

http://www.mochikit.com

Anthem.NET
Anthem.NET is a free, cross-browser AJAX toolkit for the ASP.NET development environment that works with both ASP.NET 1.1 and 2.0.
http://sourceforge.net/projects/anthem-dot-net

Moo.FX *****
moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, written with prototype.js.
http://moofx.mad4milk.net/#news

Cross-Browser.com
http://www.cross-browser.com/toys/

AJAX Toolbox – AjaxRequest
http://ajaxtoolbox.com/request/

Bajax
Bajax its a very small and simple javascript library to use Ajax on your pages. independent of programming language. You can put dynamic content using simple commands.
https://developer.berlios.de/projects/bajax/

Sardalya
A small library for making dynamic HTML programming easy and fun.
http://www.sarmal.com/sardalya/Default.aspx

Behaviour
Separate Structure (xhtml) from Behavior (javascript)
http://bennolan.com/behaviour/

WZ_DradDrop
A Cross-browser JavaScript DHTML Library which adds Drag Drop functionality to layers and to any desired image .
http://www.walterzorn.com/dragdrop/dragdrop_e.htm

WZ_jsGraphics
High Performance JavaScript Vector Graphics Library. ( Wow!! This is awesome! )
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

overLIB
overLIB is a JavaScript library created to enhance websites with small popup information boxes (like tooltips) to help visitors around your website. It can be used to provide the user with information about what will happen when they click on a link as well as navigational help (see the examples below). Not to mention that it looks cool, is stable, and has an active developer community to boot!
http://www.bosrup.com/web/overlib/

Some open ajax librabries
http://ronchen.blogbus.com/logs/2006/04/2334025.html

http://www.maxkiesler.com/index.php/weblog/comments/60_more_helpful_ajax_tutorials/
http://www.maxkiesler.com/index.php/weblog/comments/50_ajax_reference_websites_from_around_the_world/
http://ajaxaspects.blogspot.com/
http://www.mathertel.de/
http://atlas.asp.net/docs/default.aspx
http://ajaxpatterns.org/wiki/index.php?title=Main_Page

3D
http://www.gogofrog.com/start.html
This 3D Gogofrog Web site is worth taking a look at.
See it at http://www.gogofrog.com/userdata/SMYSITE

Nifty Corners
http://www.html.it/articoli/niftycube/index.html

http://www.web-graphics.com/

GreyBox
http://orangoo.com/labs/GreyBox/
Demo: http://amix.dk/greybox/demo.html

Here is another version of GreyBox.
GreyBox – Redux
http://jquery.com/blog/2006/02/10/greybox-redux/

ThickBox – One box to rule them all..
http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all
Demo: http://jquery.com/demo/thickbox/

jQuery
jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX – nor is just a set of needlessly complex enhancements – jQuery is designed to change the way that you write Javascript.

http://jquery.com/

AXAH (Asynchronous XHTML and HTTP) – Crawl before you AJAX
http://codylindley.com/Javascript/237/axah-asynchronous-xhtml-and-http-crawl-before-you-ajax

LightBox (** good for photo gallery)
Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers

Version 1:
http://www.huddletogether.com/projects/lightbox/
Version 2:
http://www.huddletogether.com/projects/lightbox2/

Ajax Linki
http://www.ajaxlinki.com/

10-Week Free AJAX Programming (with Passion!) Online Course
http://www.javapassion.com/ajaxcodecamp/

http://theajaxworkshop.com/index.php/Main_Page

http://forums.theajaxworkshop.com/index.php
Start Date: The 1st session will start from August 4th, 2006.

Prerequisites.

* 1 month Java programming experience.
* 1 month web application programming experience
* Some HTML experience would be helpful but not required
* Some JavaScript experience would helpful but not required