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 exposes top-level windows and their children as a hierarchy in the browser, with App as the root object. For example, the HelloWorld tutorial application exposes its window as App.Window1. To explore this hierarchy, open the browser's developer tools with F12 and type App. in the console.
Child objects are reachable as members of their parent control, e.g.: App.Window1.button1.
The following example changes the text of button1 from JavaScript and triggers its server-side event. Enter the code in the browser 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#
- VB.NET
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;
}
}
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"};