JavaScript Object Model

Wisej.NET keeps the server and client browser in sync, including the application's UI object model. This allows JavaScript code to interact with Wisej.NET controls in the browser while simultaneously updating their server-side components.

UI Object Model

Wisej.NET registers all top-level windows and their children hierarchically with the browser using App as the root object. For example, the simple HelloWorld tutorial application registers the JavaScript object App.Window1. You can view the object model using F12 and typing App. in the console.

Child objects are reachable as members of their parent control, e.g.: App.Window1.button1.

The example below shows how to change button1 text using JavaScript and trigger the server-side event. Type this code in the browser's console (F12):

JavaScript

App.Window1.button1.setLabel("Hello JavaScript");
App.Window1.button1.execute();

Wisej.NET JavaScript widgets derive from Qooxdoo's widget. See Qooxdoo's API reference for available methods and properties.

When a name collision occurs between a child control and a widget method/property, Wisej.NET ignores the child control name. You can still access it using parent.getChildControls()[index]. For component collisions (e.g., multiple Window1 objects), Wisej.NET converts the member to an array: App.Window1[0], App.Window1[1], etc.

Remote Methods

Wisej.NET supports calling server-side methods from the client. Any public method in a visual component with the [Wisej.Core.WebMethod] attribute becomes a remote method. You can call it from the browser, passing arguments and receiving return values from the server.

You can also declare public static [Wisej.Core.WebMethod] methods in your Program.cs class - these are registered as methods of the App object on the client side.

The example below shows adding remote methods to a form and the application, demonstrating return values:

C#

public class Window1: Wisej.Web.Form
{
  ...
  [WebMethod]
  public void Hello(string name)
  {
    // Change the window title.
    this.Text = "Hello " + name;
  }
}

...

public static class Program
{
  ...
  [WebMethod]
  public static int Hello(string name)
  {
    this.Text = "Hello " + name;

    // Return the lentgh of the parameter.
    return name.length;
  }
}

VB.NET

Public Class Window1 
  Inherits Wisej.Web.Form

    ...
  <WebMethod>
  Public Sub Hello(name As String)
  
    ' Change the window title.'
    Me.Text = "Hello " + name
    
  End Sub
  
End Class

...

Module Program
  ...
  <WebMethod>
  Public Function Hello(name As String) As Int32

    Me.Text = "Hello " + name
    
    ' Return the length of the parameter.    '
    Return name.Length
    
  End Function  
End Module

Here's how to use these web methods in the browser console:

JavaScript

// Invoke the method Hello on the current instance of Window1.
App.Window1.Hello("Mary");

// Invoke the static method Hello on the Program class, running using the current session.
// And display the returned value in browser alert.
App.Hello("Jack", function(result){ alert(result); });

Only web methods declared in top-level containers (Page, Form, Desktop) are automatically registered with the client widget.

Web methods in child control classes need explicit registration by overriding OnWebRender() and adding the webMethods array: config.webMethods = new[]{"method1", "method2"};