JavaScript

With Wisej you can add unlimited JavaScript code and directly reference any widget at any time. Your JavaScript code can be in .js files, you can call it from C#/VB.NET, and can embed it in resource files.

JavaScript in Wisej

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

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

Script tag in Default.htm
You can add any script in the application startup page (usually Default.htm). However, any script placed inside the <head> tag will execute too soon, before the Wisej library is downloaded and initialized. If the script is loaded on document ready, it's still too early to use your application's widgets. Therefore placing any JavaScript in Default.htm can only be used for purposes not related to Wisej objects.
Embedded resource
If you create a .js file, set it to EmbeddedResource and place it under /Resources or /Platform and add the [assembly:WisejResources] to AssemblyInfo.cs, Wisej will load and invoke the JavaScript files in the order they are found together with the Wisej framework library.
While it's too early to address your application's objects, it's the right time to install additional widget classes or override existing ones. All the Wisej widgets are included using this technique.
JavaScript Extender Provider
If you drop the JavaScript Extender on any top level container (Form, Page, Desktop or User Control), all the controls in the container will be extended with two new properties: JavaScript and JavaScriptSource.

The JavaScript property lets you type in JavaScript code that will run in the context of the control it is bound to: this refers to the control's widget on the client. You can use any of the widgets methods and properties and address all the related widgets. The code associated to the control always runs last, after Wisej has rendered and updated all the widgets on the page.

You can use this extender to attach to client events, modify or extend the widget behavior. The image below shows a small code snippet attached to a button to display an alert on the client side.

The JavaScriptSource property does exactly the same, but instead of writing the script in the property it lets you choose a .js file. This option is particularly useful when writing long scripts, plus it can use Visual Studio's excellent JavaScript editor.

Call or Eval from C#/VB.NET
Every Wisej control and the Application class expose two methods that can be used to execute JavaScript on the client: Call and Eval.
Call(name, args) can call any function on the target widget, while Eval(script) can execute any script in the context of the invoking widget.

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

Notice in the code sample above, that the first parameter of the Call method is just the name of the function to call. However, in the code sample below, the Eval method expects a fully formed 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 7 months ago

JavaScript in Wisej

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

Script tag in Default.htm

You can add any script in the application startup page (usually Default.htm). However, any script placed inside the <head> tag will execute too soon, before the Wisej library is downloaded and initialized. If the script is loaded on document ready, it's still too early to use your application's widgets. Therefore placing any JavaScript in Default.htm can only be used for purposes not related to Wisej objects.

Embedded resource

If you create a .js file, set it to EmbeddedResource and place it under /Resources or /Platform and add the [assembly:WisejResources] to AssemblyInfo.cs, Wisej will load and invoke the JavaScript files in the order they are found together with the Wisej framework library.

While it's too early to address your application's objects, it's the right time to install additional widget classes or override existing ones. All the Wisej widgets are included using this technique.

JavaScript Extender Provider

If you drop the JavaScript Extender on any top level container (Form, Page, Desktop or User Control), all the controls in the container will be extended with two new properties: JavaScript and JavaScriptSource.

You can use this extender to attach to client events, modify or extend the widget behavior. The image below shows a small code snippet attached to a button to display an alert on the client side.

Call or Eval from C#/VB.NET

Every Wisej control and the Application class expose two methods that can be used to execute JavaScript on the client: Call and Eval.

Call(name, args) can call any function on the target widget, while Eval(script) can execute any script in the context of the invoking widget.

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

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