Calling JavaScript functions from DotVVM with JS Directive

What is JS Directive?

The JS directive is a feature set that provides a way to interact between DotVVM controls and JavaScript code. For example, with JS Directive we can call JavaScript functions from DotVVM, and send data from JavaScript to DotVVM.

Steps to follow

In order for us to establish a communication between DotVVM and JavaScript, these are the steps we must follow:

  • Declare a JavaScript module with its respective functions.
  • Register that module in DotVVM Startup.
  • Import the module declared in our DotVVM views.
  • Let’s get to work! Call JavaScript functions from DotVVM, or receive data.

Example

To see how JS Directive works in an example, let’s follow the steps mentioned above to request two numbers from the user, call a JavaScript function that performs that operation, and finally display the result on the web page.

export default (contextApp) => new App(contextApp);
var WEB;
class App { constructor(contextApp) {
this.contextApp = contextApp;
WEB = contextApp;
}
operation(a, b) {
let result = a + b;
WEB.namedCommands["ResultOperation"](result);
}
}
private void ConfigureResources(DotvvmConfiguration config, string applicationPath)
{
//JS Directive
config.Resources.Register("module", new ScriptModuleResource(new UrlResourceLocation("~/JavaScript.js"))
{
//Dependencies = new[] { "external/other-js-file" }
});
}
@viewModel JSDirective.ViewModels.DefaultViewModel, JSDirective
@masterPage Views/MasterPage.dotmaster
@js module
<dot:Content ContentPlaceHolderID="MainContent">
<div class="content">
<div class="content__text">
<h1>JS Directive Demo</h1>
<h3>Add two numbers</h3>
<ul class="content-page">
<li><b>Number1: </b></li>
<li><dot:TextBox Text="{value: Number1}" Type="Number" /></li>
<li><b>Number2: </b></li>
<li><dot:TextBox Text="{value: Number2}" Type="Number" /></li>
</ul>
<dot:Button Text="Calculate"
Click="{staticCommand:_js.Invoke("operation", Number1, Number2);}" />
<dot:NamedCommand Name="ResultOperation" Command="{staticCommand: (int id) => _root.Result = id}" />
<h3>Result: <b>{{value: Result}}</b></h3>
</div>
</div>
</dot:Content>
@js module
  • To set the two numbers to add, two DotVVM controls of type TextBox have been used.
  • To call the JavaScript function we can do it with a Button, specifying the name of the function, and sending the respective parameters (Number1, and Number2).
  • The NamedCommand control allows us to invoke commands from JavaScript, in this case a section has been defined with the name ResultOperation, to send the value of the operation from JavaScript and save it in the variable Result (defined in the ViewModel from DotVVM).

Thanks for reading

Thank you very much for reading, I hope you found this article interesting and may be useful in the future.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Gomez Jaramillo

Daniel Gomez Jaramillo

Microsoft MVP (Most Valuable Professional)