Widget

WATCH & LEARN0:50 · Animated tutorial

7 scenesPlay, pause, or scrub at your own pace

The Widget control enables integration of JavaScript libraries into Wisej.NET applications. It loads custom JavaScript and CSS libraries at runtime, so you can host custom controls within a Wisej.NET container.

These integrated controls can be configured with server-side resources and trigger server-side events.

info

For a complete list of properties, methods, and events, see the API documentation.

Features

Server Communication

Wisej.NET provides a streamlined infrastructure for client-server messaging between individual controls.

Client to Server

Use the fireWidgetEvent method to send messages from client to server by attaching to the client-side widget event:

JavaScript

// Processes the client-side widget initialization.
this.init = function(options) 
{
    // retain a reference to 'this' context.
    var me            = this;
    options.onItemTap = function itemTap(event, inst) {
        me.fireWidgetEvent("itemTap", event.target.getAttribute("data-text"))
    }
    
    // simple integration of the MobiScroll JavaScript library.
    mobiscroll.optionlist("#demo", options);
}

warning

Check the Browser console for important messages when debugging the Widget.

The application routes received event data to the corresponding server-side control's WidgetEvent handler:

C#

// Processes events from the client-side widget.
private void widget1_WidgetEvent(object sender, WidgetEventArgs e)
{
    switch (e.Type)
    {
        case "itemTap":
            AlertBox.Show(e.Data);
            break;

        case "scroll":
            AlertBox.Show($"Scrolled: {e.Data.scrollValue}");
            break;
    }
}

Server to Client

Use the Instance dynamic member to send messages to the client-side widget.

First, define a function in your client-side Widget.InitScript:

JavaScript

// Adds two numbers together.
this.addNumbers = function(num1, num2) 
{
    return num1 + num2;
}

Then call this method using CallAsync or Eval from the server-side instance:

C#

var result = await this.widget1.CallAsync("addNumbers", 1, 2);

// or

this.widget1.Eval($"this.addNumbers({1},{2});", 
    (result) => { AlertBox.Show(result.ToString()); });

Advanced

JavaScript Widget

Item	Description
Class name	"wisej.web.Widget"
Theme appearance	"widget", see Themes.
Source code	https://github.com/iceteagroup/wisej-js