LogoLogo
HomeNewsSupportVideos
  • Introduction
  • Getting Started
  • What's new in 4.0
    • Known Issues
    • .NET Core Designer
    • Managed Graphics
    • Fluent Markup
    • Markdown Support
    • Upgrade from 3.x
  • Releases
    • What's new in 4.0
    • What's new in 3.5
    • What's new in 3.2
      • View Builder
      • Validation Rules
      • Enhanced Font Support
      • Design-Time Debug
    • What's new in 3.1
    • What's new in 3.0
      • FAQs
      • Update Existing Projects
      • Multi Targeting
      • Visual Studio Designer
      • Referencing Assemblies
      • Docker Support
      • Troubleshooting
      • Deployment
    • What's new in 2.5
    • What's new in 2.2
    • What's new in 2.1
    • What's new in 2.0
    • Upgrade from 1.x
  • Getting Started
    • New Project
    • Templates
    • Troubleshooting
    • License Activation
    • FAQ
    • API
    • Hybrid
    • Deployment
    • Theme Builder
  • Concepts
    • Startup
    • Configuration
    • Load Balancing
    • Designer
    • Layouts
    • Client Profiles
    • Tab Order
    • Compression
    • Embedded Resources
    • Modal Workflow
    • Localization
    • RightToLeft
    • Background Tasks
    • Real Time Web Applications
    • JavaScript
    • JavaScript Object Model
    • Security
    • Synchronization
    • Session Management
    • Theming
    • Dependency Injection
    • Application Switches
    • Visual Studio Code
  • Controls & Components
    • General
      • Application
      • AutoSizing
      • AutoScroll
      • AutoScaling
      • Accessibility
      • Colors & Fonts
      • Embedded Tools
      • Events
      • Touch Events
      • Images
      • Labels
      • ToolTips
      • Data Binding
      • Common Properties
      • Custom Painting
      • Move & Resize
      • Drag & Drop
      • Validation
      • User Data
      • Responsive Properties
      • VB.NET Extensions
    • Common Dialogs
      • FolderBrowserDialog
      • ColorDialog
      • OpenFileDialog
      • SaveFileDialog
    • Editors
      • TextBox
        • TagTextBox
        • MaskedTextBox
        • TypedTextBox
      • DateTimePicker
      • MonthCalendar
      • TimeUpDown
      • DomainUpDown
      • NumericUpDown
      • TrackBar
    • Buttons
      • Button
      • SplitButton
      • CheckBox
      • RadioButton
    • Containers
      • Page
      • Form
      • Desktop
      • Panel
      • FlexLayoutPanel
      • FlowLayoutPanel
      • TableLayoutPanel
      • GroupBox
      • Accordion
      • TabControl
      • UserPopup
      • UserControl
      • ToolBar
      • StatusBar
      • SplitContainer
      • SlideBar
    • Lists & Grids
      • ComboBox
        • UserComboBox
        • TreeViewComboBox
        • ListViewComboBox
      • ListBox
        • CheckedListBox
      • TreeView
      • ListView
      • DataGridView
        • Column
        • TextBoxColumn
        • ButtonColumn
        • LinkColumn
        • ImageColumn
        • MaskedTextBoxColumn
        • DateTimePickerColumn
        • NumericUpDownColumn
        • CheckBoxColumn
        • ComboBoxColumn
      • DataRepeater
      • PropertyGrid
    • Extenders
      • Animation
      • ToolTip
      • ErrorProvider
      • Rotation
      • StyleSheet
      • JavaScript
    • Media
      • Audio
      • Video
      • FlashPlayer
    • Content
      • Label
      • LinkLabel
      • PictureBox
      • ScrollBars
      • Upload
      • AspNetPanel
      • ImageList
      • PdfViewer
      • ProgressBar
      • Spacer
      • Widget
      • WebBrowser
      • IFramePanel
      • HtmlPanel
      • Canvas
      • Shape
      • Line
    • Menus
      • MainMenu
      • MenuBar
      • MenuItem
      • LinkMenuItem
      • ContextMenu
    • Notifications
      • AlertBox
      • MessageBox
      • Toast
    • Other Components
      • Timer
      • BindingSource
      • BindingNavigator
      • DataSet
      • EventLog
      • MessageQueue
      • PerformanceCounter
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Concepts

JavaScript

PreviousReal Time Web ApplicationsNextJavaScript Object Model

Last updated 3 months ago

Was this helpful?

Wisej.NET enables adding unlimited JavaScript code with direct widget references. Your JavaScript code can be in .js files, called from C#/VB.NET, or embedded in resource files.

JavaScript in Wisej.NET

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

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

  • Script tag in Default.htm

    You can add scripts in the application startup page (usually Default.htm). However, scripts in the <head> tag execute before the Wisej.NET library loads and initializes. Even scripts loaded on document ready are too early for application widgets. Therefore, JavaScript in Default.htm should only be used for non-Wisej.NET purposes.

  • Embedded resource

    Create a .js file, set it to under /Resources or /Platform and add [assembly:WisejResources] to AssemblyInfo.cs. Wisej.NET loads and invokes these JavaScript files in order with the framework library.

    While too early for application objects, this is ideal for installing additional widget classes or overriding existing ones. All Wisej.NET widgets use this technique.

  • JavaScript Extender Provider

    Drop the JavaScript Extender on any top-level container (Form, Page, Desktop or User Control) to extend all controls with two properties: JavaScript and JavaScriptSource.

The JavaScript property accepts JavaScript code that runs in the control's context - this refers to the control's widget on the client. You can use widget methods, properties and address related widgets. This code runs last, after Wisej.NET renders and updates page widgets.

Use this extender to attach client events or modify widget behavior. The image below shows a button code snippet displaying a client-side alert:

  • Call or Eval from C#/VB.NET

    Call(name, args) invokes functions on the target widget, while Eval(script) executes any script in the widget's context.

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);
}
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' 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.

  Me.Call("moveTo", 10, 10)
  
End Sub

Note that Call method's first parameter is just the function name, while Eval expects a complete script:

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());
  }");
}
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

  ' attach to the "move" event on the client side and
  ' log the information to the console (use F12 to see the result)
  
  Me.Eval( _
    "this.addListener('move', function(e) {" & _
      "console.log('Moved to ' + e.getData());" & _
    "}" _
  )
  
End Sub

The property works similarly but accepts a .js file instead of inline code. This is useful for longer scripts and leverages Visual Studio's JavaScript editor.

Every Wisej.NET control and the Application class expose two client-side JavaScript execution methods: and .

JavaScriptSource
Call
Eval
JavaScript Object Model
EmbeddedResource
JavaScript Extender