Script#: C# to Javascript Converter 13

Have you heard about Script#? I heard about this toolkit last week even Nikhil started this project last year. I knew that there is a Java-to-Javascript converter called GWT (Google Web Toolkit) in Java World since long time back and I thought that it might be good if we, the C# developers, also have that kinda tools for ASP.NET web development. Now, the dream come true. Nikhil created Script# project that can convert the C# code to Javascript. I think it is pretty interesting (and strange ) tool and I wonder how Script# will convert the C# code to Javascript. Anyway, I started learning about Script# on last Friday. I’m gonna share what I have learnt about it so far. If you are already familiar with this tool, please share your thoughts about this tool. Thanks.

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 belowScript# - Scriptlet Control
  • 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";
    }
    }
    

    Script# - Scriptlet Editor

  • 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.Script# - Example 1

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}))

    Edit Arguments - ScriptletArgument Collection Editor

  • 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# ~

13 thoughts on “Script#: C# to Javascript Converter

  1. Reply hopes and dreams Oct 29,2007 10:49 am

    Hmm, I hope that the included JS libraries are fixing what is visually broken in the generated code!

    .attachEvent and .detachEvent are IE-only events… if there is code to make other browsers mimic these, then fine… although the tool should make IE mimic the W3C, *NOT* the other way around.

    Note 2.)

    The “name” of the elements in C# are *NOT* the “ids” of the elements! there is a BIG difference!

    If I create a button, it can have a name, and an id, and both can be different (using them interchangeably *WILL* cause you much pain down the road. (e.g. if I have 10 checkboxes, with the same name, and different ids, will the generated code call $(name) or $(id) ?

    Depending which is called, and worse yet, which browser is used (unless the $() function has a patch for IEs incorrect behavior) you will get some very odd results.

    Otherwise, always cool to see a tool interact better with the web.

  2. Reply Nikhil Kothari Oct 29,2007 6:36 pm

    Michael, cool post!

    I’d be curious about your disappointments as well. Is there something beyond the debugging requires debugging script limitation?

  3. Reply Michael Sync Oct 29,2007 6:45 pm

    >>I hope that the included JS libraries are fixing what is visually broken in the generated code!
    Yeah.

    >>.attachEvent and .detachEvent are IE-only events…

    As I’m a Firefox user, I have tested the generated code in Firefox. It works just fine…

    >>The “name” of the elements in C# are *NOT* the “ids” of the elements! there is a BIG difference!

    Yes. I agreed with you.. I haven’t tested the solution that you mentioned. I think that it should not be a problem since we are creating the HTML element in HTML itself.. NOT from C#. If you look at the example 2, you will see that the input “nameTextBox” and button “sayHiButton” are created in HTML only. Anyway, I will try about this today and will let you know..

  4. Reply Michael Sync Oct 29,2007 7:53 pm

    Hello Nikhil,

    Thanks a lot of visiting my blog… :)

    >>I’d be curious about your disappointments as well. Is there something beyond the debugging requires debugging script limitation?
    Yeah. there are some…. For example, scriptlet editor keep on removing “}” from my code and saying that I need to add “}” in my code.

    As I’m learning in process, I don’t want to post about that for now.. (I’m very news with that tool ). but I made a note and I’ll post about that in my blog after I got more idea about Script#.. Yeah. I would like to discuss with you too.

    Thanks again. Nikhil…

  5. Reply Myo Kyaw Htun Oct 30,2007 11:06 pm

    Mike, I think you should reduce the posts in main page or use <!–more–> inside your post. I think that will load faster. Just a thought.

  6. Pingback: Michael Sync » Script# - Is Script# right for you?

  7. Reply Narottam Das Jul 11,2008 3:15 am

    I have installed and tried in VS 2005 but not working….

  8. Reply Michael Sync Jul 11,2008 3:26 am

    Hi Narottam,

    Which version of Script# did you install? What error are you getting?

    The latest version of Script# works with VS 2008.

  9. Reply Vyas Bharghava Jul 11,2008 4:55 pm

    Michael,

    When I use the Script# Website template with VS.Net 2008, it compiles successfully but the .js file is nowhere to be seen in my Web project (not website).

    I do have a reference to the dll in my ASP.Net web project [not ajax] and I’m using sscorlib [which is default template choice anyway].

    If I compile it separately on command line, I can produce the *.js file.

    Is the only way to use script# on web pages is using ? The sample projects [silverlight clock for example] compile and place the scripts on the /app_scripts folder correctly. [but it's a website instead of a web project template].

    Can you help?

    Regards, Vyas

  10. Reply Kokila Apr 4,2009 2:17 am

    Hi Michael,

    I am trying to convert my application written in C# to java script so that it can be hosted as web service.Actually I want the Output .html format. I just copied ur sample code and pasted it in the Scriplet editor. But that is not getting compiled and I cannot save the code after making small changes. When Save and close, the first and last line of the c# code is deleted.I m wondering how is this possible? Will u pls help me.

    Thanks in Advance
    Kokila Somasundaram

  11. Reply srinivas Jan 29,2010 2:40 am

    hi very,very thanks useful yr toolkit thankful to u,

  12. Reply tester Feb 27,2014 4:10 pm

    Hello All,
    Is there any update for vs2010?
    <

  13. Reply Michael Sync Mar 10,2014 7:41 am

    Hi tester, I didn’t create that converter. please try to contact with original developer.. Thanks!

Leave a Reply