JavaScript

Wisej.NET enables adding unlimited JavaScript code with direct widget references. Your JavaScript code can be in .js files, called from C#/VB.NET, or embedded in resource files.

JavaScript in Wisej.NET

All controls written in C#/VB.NET on the server are created as pure JavaScript widgets on the client and registered in a new object model under App. See JavaScript Object Model.

You can add JavaScript to a Wisej.NET application in several ways:

Script tag in Default.htm
You can add scripts in the application startup page (usually Default.htm). However, scripts in the <head> tag execute before the Wisej.NET library loads and initializes. Even scripts loaded on document ready are too early for application widgets. Therefore, JavaScript in Default.htm should only be used for non-Wisej.NET purposes.
Embedded resource
Create a .js file, set it to EmbeddedResource under /Resources or /Platform and add [assembly:WisejResources] to AssemblyInfo.cs. Wisej.NET loads and invokes these JavaScript files in order with the framework library.
While too early for application objects, this is ideal for installing additional widget classes or overriding existing ones. All Wisej.NET widgets use this technique.
JavaScript Extender Provider
Drop the JavaScript Extender on any top-level container (Form, Page, Desktop or User Control) to extend all controls with two properties: JavaScript and JavaScriptSource.

The JavaScript property accepts JavaScript code that runs in the control's context - this refers to the control's widget on the client. You can use widget methods, properties and address related widgets. This code runs last, after Wisej.NET renders and updates page widgets.

Use this extender to attach client events or modify widget behavior. The image below shows a button code snippet displaying a client-side alert:

The JavaScriptSource property works similarly but accepts a .js file instead of inline code. This is useful for longer scripts and leverages Visual Studio's JavaScript editor.

Call or Eval from C#/VB.NET
Every Wisej.NET control and the Application class expose two client-side JavaScript execution methods: Call and Eval.
Call(name, args) invokes functions on the target widget, while Eval(script) executes any script in the widget's context.

void form1_OnLoad(EventArgs e)
{
  // move the window to 10,10.
  // there is no need to do this since you can simply set the Location property, but
  // it shows how to call a client side function from the server.

  this.Call("moveTo", 10, 10);
}

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' move the window to 10,10.
  ' there is no need to do this since you can simply set the Location property, but
  ' it shows how to call a client side function from the server.

  Me.Call("moveTo", 10, 10)
  
End Sub

Note that Call method's first parameter is just the function name, while Eval expects a complete script:

void form1_OnLoad(object sender, EventArgs e)
{
  // attach to the "move" event on the client side and
  // log the information to the console (use F12 to see the result)

  this.Eval(@"this.addListener('move', function(e) {
    console.log('Moved to ' + e.getData());
  }");
}

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' attach to the "move" event on the client side and
  ' log the information to the console (use F12 to see the result)
  
  Me.Eval( _
    "this.addListener('move', function(e) {" & _
      "console.log('Moved to ' + e.getData());" & _
    "}" _
  )
  
End Sub

PreviousReal Time Web Applications NextJavaScript Object Model

Last updated 4 days ago

JavaScript in Wisej.NET

All controls written in C#/VB.NET on the server are created as pure JavaScript widgets on the client and registered in a new object model under App. See JavaScript Object Model.

You can add JavaScript to a Wisej.NET application in several ways:

Script tag in Default.htm

You can add scripts in the application startup page (usually Default.htm). However, scripts in the <head> tag execute before the Wisej.NET library loads and initializes. Even scripts loaded on document ready are too early for application widgets. Therefore, JavaScript in Default.htm should only be used for non-Wisej.NET purposes.

Embedded resource

Create a .js file, set it to EmbeddedResource under /Resources or /Platform and add [assembly:WisejResources] to AssemblyInfo.cs. Wisej.NET loads and invokes these JavaScript files in order with the framework library.

While too early for application objects, this is ideal for installing additional widget classes or overriding existing ones. All Wisej.NET widgets use this technique.

JavaScript Extender Provider

Drop the JavaScript Extender on any top-level container (Form, Page, Desktop or User Control) to extend all controls with two properties: JavaScript and JavaScriptSource.

Use this extender to attach client events or modify widget behavior. The image below shows a button code snippet displaying a client-side alert:

The JavaScriptSource property works similarly but accepts a .js file instead of inline code. This is useful for longer scripts and leverages Visual Studio's JavaScript editor.

Call or Eval from C#/VB.NET

Every Wisej.NET control and the Application class expose two client-side JavaScript execution methods: Call and Eval.

Call(name, args) invokes functions on the target widget, while Eval(script) executes any script in the widget's context.

void form1_OnLoad(EventArgs e)
{
  // move the window to 10,10.
  // there is no need to do this since you can simply set the Location property, but
  // it shows how to call a client side function from the server.

  this.Call("moveTo", 10, 10);
}

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' move the window to 10,10.
  ' there is no need to do this since you can simply set the Location property, but
  ' it shows how to call a client side function from the server.

  Me.Call("moveTo", 10, 10)
  
End Sub

Note that Call method's first parameter is just the function name, while Eval expects a complete script:

void form1_OnLoad(object sender, EventArgs e)
{
  // attach to the "move" event on the client side and
  // log the information to the console (use F12 to see the result)

  this.Eval(@"this.addListener('move', function(e) {
    console.log('Moved to ' + e.getData());
  }");
}

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' attach to the "move" event on the client side and
  ' log the information to the console (use F12 to see the result)
  
  Me.Eval( _
    "this.addListener('move', function(e) {" & _
      "console.log('Moved to ' + e.getData());" & _
    "}" _
  )
  
End Sub