Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 25 May 2011
Download Sample Code
What is Script#
Naturally the first question that pops in to your mind is why? Why someone would want to create another dependency to the project?
Script# produces scripts that feel hand-written. This is handy in a situation where you want to manually edit those files or you want to debug those files client-side (ex: with Firebug)
Let's see our first example. We have a function that takes a string and creates and alert message. After this message is displayed and the user clicks OK a callback function a being executed.
Listing 1: C# code
The code being produced is readable and feels like we wrote it!
Other benefits of using Scripts# are:
- Intellisense support
- Build errors at compile time
- Ability to create documentation
- Refactoring Support
- Debug and Release (minified) version of the produced scripts
In order to start authoring your client-side libraries with Script# you need to Download and Install a Visual Studio plugin that adds the appropriate tools.
After successfully installing the plugin you will notice a new section (named Script#) when creating a new Project.
Figure 1: The Script# sections appears when creating a new Project
There are seven (7) project types available. Most of them are self-explained. For now, I will explain on two (2) of them.
Script Library Project Type
Web Application Project Type
You can also edit the .csproj file of a Script Library and change
<WebAppPartitioning> tag to
For the purpose of this article we will use a Script Library.
Creating a Script Library
Now that our tools are set let's create our first client-side library with Script#.
We need to follow the steps below:
- Create a blank solution named GettingStartedWithScriptSharp in Visual Studio 2010
- Create an Empty Web Application Project inside the solution named GettingStartedWithScriptSharp.Web
- Create an Index.html page
- Create a Scripts folder inside our Web Application Project
- Add a new project to the solution which is a Script# Script Library Project named GettingStartedWithScriptSharp.Scripts
- When asked we should point as our deployment path the Scripts folder of our Web Application
Script# projects have the ability to take produced scripts and put it in a folder of our selection (besides the /bin folder).
Figure 2: Select the Scripts folder of the Web Application Project as a Deployment path when asked
Of course you can edit that option anytime later by editing the .csproj file and specifically the
Figure 3: Configuration of DeploymentPath
Eventually we should have a project that looks like this:
Now let's add a Script# class in our Scripts project named TextPreviewer.cs
Figure 5: Adding a new Script# class
When we have our TextPreviewer class created we put the following code inside
Listing 3: TextPreviewer.cs class
This class takes two ids in the constructor - one that corresponds to an input element and one to div element. In its initialize method checks if the input element is defined and if so it creates a listener for the key up event. So every time the user hits a button the
OnKeyUpListener is being called. The last method checks if the div element is defined and takes the value from the input element and put it in the
InnerHTML property of the div.
When our project builds successfully we should see inside our Scripts folder four (4) files. Actually we have two (2) files and each file has a debug and a release version.
The first file – named GettingStartedWithScriptSharp.Scripts.js (looong name!) – is the file produced from our Script Library project.
The second file – named mscorlib.js – is file that allows us to do things like
string.IsNullOrEmpty and more, and is the only file needed (22 KB) in order to run scripts created with Script#.
Figure 6: Files inside the Scripts folder after a successful build of the Script Library Project
The first time we need to include the files in the solution. To do that we can click on "Show all files", right click on them and select "Include in Project"
Now let's go to our Index.html file and put the following code.
Listing 4: Index.html inside the body tag
In order to instantiate our class we do
new Scripts.TextPreviewer and that is because we have decorated our C# class with the Attribute
ScriptNamespace. If the attribute was missing then we should have written
new GettingStartedWithScriptSharp.Scripts.TextPreviewer which is a full namespace of the C# class.
If we run the page through a browser we should be able to see the functionality that is being explained above. Anything written inside the text field should be copied to the preview div every time we release a key.
Is it possible to use jQuery? Not only it's possible but we will use Script# to encapsulate the above functionality in to a jQuery plugin.
Let's create a Script# jQuery Plugin named TextPreviewerjQuery.cs
Figure 7: Creating the Script# jQuery Plugin
Delete the contents of the newly created file and replace them with the following code
Listing 5: TextPreviewerjQuery.cs
Now let's take a moment and see what we have here.
Mixin Attribute concatenates its value with the members of this class.
TextPreviewerjQuery method is our plugin implementation
TextPreviewerjQueryOptions is a class which is actually a JSON object; holds our plugin options and the
Imported Attribute that decorates this class, tells the compiler that no code should be generated. ScriptName attribute with value "Object" is being used when we refer to a JSON object.
In order to use this plugin inside our page we write the following code.
Listing 6: Using TextPreviewer jQuery Plugin
- alert -> Script.Alert
- typeof(object) === "undefined" -> Script.IsUndefined or Script.IsNullOrUndefined
- eval -> Script.Eval
- Script.Literal("alert(1)") – writes alert(1)
I hope this was a good kick-start on how to use Script#. Script# is a powerful tool and can really speed-up and improve client-side development.
Whatever the case is, Script# is a project that definitely deserves a second look.
John Katsiotis is a Microsoft MVP in ASP.NET since 2008 and .NET Developer for the past 4 years. You can find more info at his personal site or follow him on Twitter
This author has published 3 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.