Click or drag to resize

JavaScript

With Wisej you can add unlimited JavaScript code and directly reference any widget at any time. Your JavaScript code can be in .js files, you can call it from C#/VB.NET, and can embed it in resource files.

JavaScript in Wisej

All the controls that you write in C#/VB.NET on the server are created as pure JavaScript widgets on the client and are all registered in a new object model under App. See JavaScript Object Model.

You can add JavaScript to a Wisej application in several ways:

  • Script tag in Default.htm

    You can add any script in the application startup page (usually Default.htm). However, any script placed inside the <head> tag will execute too soon, before the Wisej library is downloaded and initialized. If the script is loaded on document ready, it's still too early to use your application's widgets. Therefore placing any JavaScript in Document.htm can only be used for purposes not related to Wisej objects.

  • Embedded resource

    If you create a .js file, set it to EmbeddedResource and place it under /Resources or /Platform and add the [assembly:WisejResources] to AssemblyInfo.cs, Wisej will load and invoke the JavaScript files in the order they are found together with the Wisej framework library.

    While it's too early to address your application's objects, it's the right time to install additional widget classes or override existing ones. All the Wisej widgets are included using this technique.

  • JavaScript Extender Provider

    If you drop the JavaScript Extender on any top level container (Form, Page, Desktop or User Control), all the controls in the container will be extended with two new properties: JavaScript and JavaScriptSource.

    The JavaScript property lets you type in JavaScript code that will run in the context of the control it is bound to: this refers to the control's widget on the client. You can use any of the widgets methods and properties and address all the related widgets. The code associated to the control always runs last, after Wisej has rendered and updated all the widgets on the page.

    You can use this extender to attach to client events, modify or extend the widget behavior. The image below shows a small code snippet attached to a button to display an alert on the client side.

    JavaScript Extender
    javascript-extender

    The JavaScriptSource property does exactly the same, but instead of writing the script in the property it lets you choose a .js file. This option is particularly useful when writing long scripts, plus it can use Visual Studio's excellent JavaScript editor.

  • Call or Eval from C#/VB.NET

    Every Wisej control and the Application class expose two methods that can be used to execute JavaScript on the client: Call and Eval.

    Call(name, args) can call any function on the target widget, while Eval(script) can execute any script in the context of the invoking widget.

    Call a JavaScript function from the server
    void form1_OnLoad(EventArgs e)
    {
      // move the window to 10,10.
      // there is no need to do this since you can simply set the Location property, but
      // it shows how to call a client side function from the server.
    
      this.Call("moveTo", 10, 10);
    }

    Notice, in the code sample above, that the first parameter of the Call method is just the name of the function to call. However, in the code sample below, the Eval method expects a fully formed script.

    Call a JavaScript function from the server
    void form1_OnLoad(object sender, EventArgs e)
    {
    
    // attach to the "move" event on the client side and
    // log the information to the console (use F12 to see the result)
    
      this.Eval(@"this.addListener('move', function(e) {
        console.log('Moved to ' + e.getData());
      }");
    }
See Also