C# to JavaScript ASP.NET tutorial

In this tutorial you will learn what must be done to start developing javascript applications in c# with the jsc compiler. Jsc enables you to write your code in c# and it will be compiled into javascript for you. This tutorial is based on this blog post.

Post your questions at google groups.
Read my blog at wordpress.com.
Visit jsc homepage.

See also C# to ActionScript tutorial.

Written by Arvo Sulakatko 2008 June.

You can skip some steps if you have already installed the software needed.

Step 1: Visual Web Developer

Install Visual Web Developer 2008 Express Edition which can be found on this page here. ~109mb

This install will take some time so go ahead and make some sandwiches. After the install you are prompted to perform a restart.

Step 2: Project Templates

Download the Orcas Web Site Template. ~0.5mb

Extract it under your ‘My Documents\Visual Studio 2008\Templates\ProjectTemplates‘.

Step 3: New Web Site

Run Microsoft Visual Web Developer 2008 Express Edition and open the new web site dialog.

Select C# as the preferred language.

Step 4: View in browser

Locate the 'Default.aspx' in the solution explorer, right click and select the 'View in Browser' menu.

Your default web browser will be opened at that location. First download will take a while because jsc compiler will need some time to convert the .net dll's to javascript behind the scenes.

Step 5: Write Some New Code

The template currently includes some not so interesting controls.

Controls/AnimatedLabel.ascx
Controls/ClientScriptReflector.ascx
Controls/WebServiceAsButton.ascx

For this tutorial we want to add a new control and a new page. The new control will be a simple HTML button that toggles between some predefined strings.

Create Controls/MyToggleButton.ascx

MyToggleButton.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyToggleButton.ascx.cs" Inherits="Controls_MyToggleButton" %>

<button class="Controls_MyToggleButton">[Controls_MyToggleButton]</button>

MyToggleButton.ascx.cs

using System;

using System.Collections;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using ScriptCoreLib;

[assembly: Script, ScriptTypeFilter(ScriptType.JavaScript, "JavaScript")]

namespace JavaScript

{

using ScriptCoreLib.JavaScript.Extensions;

using ScriptCoreLib.JavaScript.DOM.HTML;

[Script]

public class Controls_MyToggleButton

{

readonly IHTMLButton Button;

public Controls_MyToggleButton(IHTMLButton e)

{

this.Button = e;

var i = 0;

var t = new[]

{

"Hello World",

"ASP.NET Web Site",

"Powered by jsc",

};

Action Update =

delegate

{

e.innerText = t[i % t.Length];

};

e.onclick +=

delegate

{

i++;

Update();

};

Update();

}

static Controls_MyToggleButton()

{

typeof(Controls_MyToggleButton).SpawnTo(

i => new Controls_MyToggleButton((IHTMLButton)i)

);

}

public partial class Controls_MyToggleButton : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

}

Create MyPage.aspx

MyPage.aspx

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

<%@ Register src="Controls/MyToggleButton.ascx" tagname="MyToggleButton" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

<div>

<uc1:MyToggleButton ID="MyToggleButton2" runat="server" />

<uc1:MyToggleButton ID="MyToggleButton1" runat="server" />

<uc1:MyToggleButton ID="MyToggleButton3" runat="server" />

</div>

<hr />

<div>

The post-back form is here.

</div>

</form>

</body>

</html>

MyPage.aspx.cs

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class MyPage : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

jsc.server.WebTools.CompileAndRegisterClientScript(this);

}

Let's view this page in the browser.

Looks like it is working as clicking on buttons rotates their text. Let's have a look at the HTML source.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Page

</title></head>

<body>

<div>

<button class="Controls_MyToggleButton">[Controls_MyToggleButton]</button>

</div>

<hr />

<div>

</div>

<div>

The post-back form is here.

</div>

</form>

</body>

</html>

Step 7: Behind the scenes

Let's enumerate what makes this project tick.

Global.asax

This call dispatches the script requests to their cached javascript representation.

protected void Application_BeginRequest(object sender, EventArgs e)

{

jsc.server.WebTools.VirtualRequest(this.Context);

}

MyPage.aspx

The HTML form element used for post backs should not include any user controls, because one will trigger a not wanted postback when clicking a button.

MyPage.aspx.cs

This call compiles current dll and registers it as client script so it will be rendered as such.

protected void Page_Load(object sender, EventArgs e)

{

jsc.server.WebTools.CompileAndRegisterClientScript(this);

}

Controls/MyToggleButton.ascx

The class attribute is important for the client script to find the element on runtime.

<button class="Controls_MyToggleButton">[Controls_MyToggleButton]</button>

Controls/MyToggleButton.ascx.cs

These assembly attributes flag this control such that jsc compiler will try to compile types in the 'JavaScript' namespace to javascript. Each control will be compiled to a different dll by the ASP.NET compiler with a cryptic name.

[assembly: Script, ScriptTypeFilter(ScriptType.JavaScript, "JavaScript")]

This construct assumes that each element found by it's class name is a HTML button and spawns a new instance passing the button reference.

static Controls_MyToggleButton()

{

typeof(Controls_MyToggleButton).SpawnTo(

i => new Controls_MyToggleButton((IHTMLButton)i)

);

}