JavaScript Object Model

Wisej.NET keeps the server and the client browser always in sync. Including the application's UI object model. This means that you can write JavaScript code that interacts with the application's controls in the browser and simultaneously update their server-side related components.

UI Object Model

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

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

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

JavaScript

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

Wisej.NET JavaScript widgets are all derived from Qooxdoo's widget. See Qooxdoo's API Qooxdoo's API reference to learn which methods and properties to use.

In case there is a name collision - a child control name collides with a widget method or property - Wisej.NET will ignore the child control name. You can always reach it using parent.getChildControls()[index]. However, if the name collision is among components - an application creates 10 Window1 objects - Wisej.NET converts the member into an array: i.e. App.Window1[0], App.Window1[1], ...

Remote Methods

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

You may also declare public static [Wisej.Core.WebMethod] methods in your Program.cs class and then find them on the client-side registered as methods of the App object.

The example below shows how to add a remote method to a form and to the application, the application method shows how to return a value.

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

The following code shows how to use the web methods defined above from JavaScript, you can type the code in the browser's 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 registered with the client widget automatically.

Web methods declared in child control classes can be used, but need to be explicitly registered by overriding OnWebRender() and adding the webMethods array to config.webMethods = new[]{"method1", "method2"};