# 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):

{% tabs %}
{% tab title="JavaScript" %}

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

{% endtab %}
{% endtabs %}

Wisej.NET JavaScript widgets derive from Qooxdoo's widget. See [Qooxdoo's API](https://archive.qooxdoo.org/5.0.2/api/#qx) 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:

{% tabs %}
{% tab title="C#" %}

```csharp
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;
  }
}
```

{% endtab %}

{% tab title="VB.NET" %}

```visual-basic
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
```

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="JavaScript" %}

```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); });
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
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"};`
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/docs/concepts/javascript-object-model.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.