JavaScript Generation in ASP.NET.

Introduction

ASP.NET applicatinos use JavaScript to provide rich client side functionality. Typically ASP.NET Controls register references to JavaScript files and generate script instantiating JavaScript components. Usually script generation is implemented using string formatting tools such as StringBuilder or String.Format. This way leads to brittle and error prone code even for simple components. If components are complex and should be combined with each other, problem becomes just unsolvable. LiveUI provides tools to generate JavaScript in object oriented way and utility controls for ASP.NET applications. This document describes how JavaScript generation works and how to use it in ASP.NET applications.

JavaScript generation basics

Central class in LiveUI generation engine is Js. Js builds JavaScript object model which can be rendered to text.  Principially, JavaScript object model is a hierarchical structure of special objects representing function calls, variable declarations and so on... Js helps to build this structure in a natural C# friendly way. For example, there is C# code generating function call

  1. var js = new Js();
  2. js.Call("alert", js.Const("Hello world"));

This code produces javaScript:

  1. alert('Hello world');

In this case following JavaScript model is created internally:

Important feature of JavaScrript generation is that it declares variables automatically. For example, if "Hello world" constant were used twice, new variable v0 would be declared. So, that C# code

  1. var helloWorld = js.Const("Hello world");
  2. js.Call("alert", helloWorld);
  3. js.Call("alert", helloWorld);

generates JavaScript

  1. v0 = 'Hello world';
  2. alert(v0);
  3. alert(v0);

There are commonly used Js methods and samples

C# JavaScript
js.Const("hello");
"hello"
var menu = js.New("Menu");
new Menu();
js.Array(js.Const(1), js.Const(2));
[] {1,2};
js.Json(js.JsonItem("name", "Alex"));
{name: "Alex"}
js.Native("window.open({0})", js.Const("http://url.com"));
window.open('http://url.com')

And that's how to render js to text:
  1. var js = new Js();
  2. js.Native("window.open({0})", js.Const("http://url.com"));
  3. js.PrepareRender();
  4. string result = js.Render();

Using JavaScript generation in ASP.NET Pages

LiveUI provides JsManager control for using Js class in ASP.NET pages. Typically JsManager is placed on ASP.NET page and new Js instance is created for each request. At the end of request processing pipeline Page and controls are rendered to Html and Js is rendered to JavaScript


There is a sample of simplest page using JavaScript generation:

  1. <%@ Page Language="C#" AutoEventWireup="true"%>
  2. <%@ Register Assembly="Xtensive.Web" Namespace="Xtensive.Web.Controls" TagPrefix="liveui" %>
  3. <%@ Register Assembly="System.Web.Extensions,..." TagPrefix="asp" %>
  4. <html>
  5. <head runat="server" />
  6. <body>
  7.   <div>
  8.     <form runat="server">
  9.       <asp:ScriptManager ID="scriptManager" runat="server" ScriptMode="Debug" />  
  10.       <liveui:JsManager runat="server" />
  11.     </form>
  12.   </div>
  13. </body>
  14. </html>


  1. public partial class WebForm1 : System.Web.UI.Page
  2. {
  3.   protected void Page_Load(object sender, EventArgs e)
  4.   {
  5.     var js = JsManager.GetCurrent(this).Js;
  6.     js.Call("alert", js.Const("Hello world!"));
  7.   }
  8. }


And there is a result
X-tensive.com 2009